[nuxt] [setupSFC] [IDEAS] setupSFC auto imports

[angelhdzmultimedia]

Now that setupSFC is working in Nuxt (see #429), it opened a window of opportunity for improvements.

Allowing files in ~/components and ~/pages to be auto imported.

For now, we have to import them manually with import Component from '~/components/component.setup'.

Explicit import:

Auto import:

Final Words

I don't think we need auto imports for ~/layouts, because these are imported using <NuxtLayout name="some layout"/>.
Layouts are not working! I added ~/layouts/main.setup.tsx, then in ~/pages/index.setup.tsx:

export default () => (
  <NuxtLayout name="main"> // also tried with "main.setup"
     <h1>Index</h1>
    <Working />
  </NuxtLayout>
)

Error:

Props to the @vue-macros team for the great job! 😍🔥🎉

[sxzz]

Auto-import components are not working in JSX, even the normal SFC files (.vue). Maybe we should report it to Nuxt core first.

[sxzz]

The use of setupSFC in layouts is supported in @vue-macros/[email protected].

[sxzz]

Demo: https://stackblitz.com/edit/nuxt-starter-crjsmy?file=layouts%2Fmain.setup.tsx