Nuxt 3 Module custom layout style issue

[sppmstar]

Environment

• Operating System: Darwin
• Node Version: v14.18.2
• Nuxt Version: 3.0.0-rc.4-27605536.8c2c80e
• Package Manager: [email protected]
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

Please see reproduction example here: https://github.com/sppmstar/nuxt-3-module-layout-vite-bug

Describe the bug

When adding a style block to a custom layout in a Nuxt 3 module, i get the following error:

If I remove the

Additional context

No response

Logs

No response

[sppmstar]

any updates on this issue @danielroe ?

[danielroe]

This looks like an upstream issue with @vitejs/plugin-vue which is trying to read the virtual template from disk. You can workaround it for the moment by ensuring the template is written to disk:

- const tpl = addTemplate(resolve(layoutsDir, 'custom-layout.vue'))
+ const tpl = addTemplate({
+   src: resolve(layoutsDir, 'custom-layout.vue'),
+   write: true
+ })

Or, even more simply, using your existing file:

- const tpl = addTemplate(resolve(layoutsDir, 'custom-layout.vue'))
- addLayout(tpl, 'custom')
+ addLayout(resolve(layoutsDir, 'custom-layout.vue'), 'custom')

[sppmstar]

@danielroe is this workaround only available in newer versions ? I tried your suggestion but i get a TypeScript warning about invalid argument (addLayout expects a NuxtTemplate in the version I am running), and am still getting the same error upon accessing localhost:3000 .

[sppmstar]

I also tried the approach of adding write: true to the addTemplate call; while it does get rid of the error, the custom layout is still not rendering. Please see updated code in the reproduction example listed above: https://github.com/sppmstar/nuxt-3-module-layout-vite-bug/commit/df7c5830465c9bf5f236abd35c7b93b7b3b12af1

[sppmstar]

I just tried updating my node modules and am now running Nuxt CLI v3.0.0-rc.6-27667279.0b22079 but still get the same issue.

[danielroe]

You are right, it does need a template, not a string - my mistake.

But you define layouts with definePageMeta, not within component options: https://stackblitz.com/edit/github-7l7hcr.

[sppmstar]

hey @danielroe ,

I confirm it works now when using:

definePageMeta({
  layout: 'custom',
});

Thanks a lot !

[sppmstar]

I updated the code in the example repo with the working code; hope this helps someone else :) https://github.com/sppmstar/nuxt-3-module-layout-vite-bug