I unable to connect TYPO3 backend to front app - vue.js

Question

I have plain TYPO3 version 11.5.x setup with headless version 3.1.2. Backend working perfect and frontend URL returning proper JSON data.
API URL looks like: https://t3-pwa.ddev.site:4403/typo3/
I created front directory in the project root. Project directory looks like this.
Directory
fileadmin
front - created front app with nuxt-typo3 contain node package
node_modules
server
jsconfig.json
nuxt.config.js
package.json
tsconfig.json
typo3
typo3conf
vendor
typo3temp
.ddev
index.php
.htaccess
Command
Created app with yarn create nuxt-typo3
Configured with default settings
Run yarn dev
It starts application properly but when I visit frontend on default url: http://localhost:3000 It does not starting.
Console Start app : https://i.stack.imgur.com/LDr6U.png
Front: https://i.stack.imgur.com/ms6l2.png
Console: https://i.stack.imgur.com/9ZoBm.png
nuxt.config.js: Looks like this
export default {
/*
** Headers of the page
*/
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#ff8700' },
/*
** Global CSS
*/
css: [
],
/*
** Plugins to load before mounting the App
*/
plugins: [
],
/*
** Nuxt.js dev-modules
*/
buildModules: [
// Doc: https://github.com/macopedia/nuxt-typo3-theme
'nuxt-typo3-tailwind',
// Doc: https://github.com/TYPO3-Initiatives/nuxt-typo3
'nuxt-typo3',
],
/*
** Nuxt.js modules
*/
modules: [
'#nuxtjs/pwa',
],
/*
** TYPO3 module configuration
** https://github.com/TYPO3-Initiatives/nuxt-typo3
*/
typo3: {
baseURL: process.env.NUXT_HOST,
forms: true,
api: {
baseURL: 'https://t3-pwa.ddev.site'
},
},
typo3tailwind: {
layouts: false
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend (config, ctx) {
}
}
}
Also, default frontend URL returns the same JSON URL. Can anyone share some hint? Also, minimal solution from scratch?

Answer 1

It looks like your baseURL in frontend application is not valid. You should keep only https://t3-pwa.ddev.site:4403 in baseURL in nuxt.config.js file.
Please remember that nuxt-typo3 frontend application tries to fetch ?type=834 URL at start, and if you add /typo3 at start, it's not valid anymore.
You should adjust your baseURL, rebuild and you are ready to go. You can also take a look at our pwa-demo, which uses nuxt-typo3 and TYPO3 Headless with ddev https://github.com/TYPO3-Headless/pwa-demo.