[SOLVED] [setupSFC] [question] [nuxt] Error with setupSFC in Nuxt 3

[angelhdzmultimedia]

nuxt.config.ts:

import vueMacros from 'unplugin-vue-macros/vite'
import vue from '@vitejs/plugin-vue'

export default defineNuxtConfig({
  vite: {
    vue: {
      script: {
        defineModel: true,
        propsDestructure: true,
        
      },
    },
    plugins: [
      vueMacros(),
      vue({
        include: [/\.vue$/, /\.setup\.[cm]?[jt]sx?$/],
        //                   ⬆️ setupSFC pattern need to be added
      }) as any,
    ],
  },
  
   modules: [
    '@vue-macros/nuxt',
  ],
})

pages/index.setup.tsx:

export default () => (
  <div>
  <h1>Hello World</h1>
</div>
)

Environment

OS: Windows 11 Home 10.0.22621 Build 22621
Node: 18.15.0
nuxt: 3.6.5
@vue-macros/nuxt: 1.3.19
VSCode: 1.80.1

[angelhdzmultimedia]

Attempts to solve it

Unsuccessful.

[sxzz]

setupSFC is disabled by default, and you should enable it first.
See demo

[angelhdzmultimedia]

Sorry to bother you again. It's not working for me. Same error of the image I provided.

Tried removing .nuxt directory and adding the vue and vueJsx vite plugins without success.

My nuxt.config.ts:

 modules: [
    '@pinia/nuxt',
    'nuxt-quasar-ui',
    '@nuxtjs/i18n',
    '@vue-macros/nuxt',
  ],

  

  macros: {
    setupSFC: true,
  },

Also tried with:

 macros: {
    setupSFC: {
       include: [/\.vue$/, /\.setup\.[cm]?[jt]sx?$/],
    }
  },

And:

import vueMacros from 'unplugin-vue-macros/vite'
import vue from '@vitejs/plugin-vue'

...
 vite: {
    vue: {
      script: {
        defineModel: true,
        propsDestructure: true,
      },
    }, 
    
    plugins: [
      vueMacros(),
      vue({
        include: [/\.vue$/, /\.setup\.[cm]?[jt]sx?$/],
        //                   ⬆️ setupSFC pattern need to be added
      }),
    ] as any,
  },

Also in the demo, there's no "jsx": "preserve" in the tsconfig.json, but it's required to allow jsx in the project.

[angelhdzmultimedia]

Any idea what I could be possibly doing wrong? Thank you.

[angelhdzmultimedia]

Solved?

(finally!?)

It's actually working. But there's a problem with Nuxt and VueRouter, that doesn't allow .setup.tsx files to be in the same folder of the ~/pages. I had ~/pages/index.vue and ~/pages/test.setup.tsx, and got the error in the image in my first comment.

After an exhausting amount of experimenting multime possible solutions, researching,
finally decided to move the file to the ~/components directory and importing it from there as a component, and now it works!!!

But now this creates a new question, any way of telling VueRouter to use the setupSFC TSX syntax in its pages?
Nothing I add in ~/pages or in any subfolder works.

[angelhdzmultimedia]

Update

Yup, I'm afraid this is a bug. I'm going to move it to an Issue.
.setup.tsx files in pages should be parsed as well, and in Nuxt example there's not account for files inside the VueRouter ~/pages directory.

[angelhdzmultimedia]

Update 2

Yup. I removed @vue-macros/nuxt entirely, and tested Nuxt's native .tsx support for pages, and they work.

Then I add back @vue-macros/nuxt module, and:

And yes, I have macros: { setupSFC: true } in nuxt.config.ts.

[angelhdzmultimedia]

I give up 😔

My last attempt, getting rid of Nuxt module, and adding the Vite plugins instead:

And:

And:

[sxzz]

Could you please provide a reproduction repo?

[angelhdzmultimedia]

https://stackblitz.com/edit/nuxt-starter-zfbrrv

[sxzz]

Please try @vue-macros/nuxt@1.6.0. Thanks for your detailed feedback! ❤️
https://stackblitz.com/edit/nuxt-starter-ugvg9h?file=pages%2Findex.setup.tsx

[angelhdzmultimedia]

Ooohhh yes, they DO work NOW 😁, thanks to your fast, and hard work! 😍🤯⚡⏰

I appreciate it a lot.

Time to have fun with setupSFC! 🔥🎉💚