Nuxt 3 Module custom layout style issue

Environment

• Operating System: Darwin
• Node Version: v14.18.2
• Nuxt Version: 3.0.0-rc.4-27605536.8c2c80e
• Package Manager: yarn@1.22.19
• 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 <style> block, it works fine. See here: https://github.com/sppmstar/nuxt-3-module-layout-vite-bug/blob/master/src/layouts/custom-layout.vue#L7-L11

Additional context

No response

Logs

No response

[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.

[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')