I'm having the same output/error and get 404 errors on the browser console when running npm run dev.

The error appears only when having a specific configuration file for styles - i.e, doesn't happen when pushing vuetify onto Vite plugins without arguments.

I followed the same tutorial and I'm not sure what's the correct way of importing vuetify via Vite yet, so it might be related.

I have the same issue.

I have https://my.local.app/_nuxt/%EF%BF%BDplugin-vuetify:components/VIcon/VIcon.sass not working. And many other components URLs broken like that. There seems to be this NULL byte after /_nuxt/ in the URL. And this https://my.local.app/_nuxt/plugin-vuetify:components/VIcon/VIcon.sass seems to work just fine. Also in the Nuxt dev yarn console I see same problem such files cannot be found/loaded. What adds this byte and how to get rid of it?

Maybe related to this? https://vitejs.dev/guide/api-plugin.html#virtual-modules-convention I got this from Kael.

Disabling inlineSSRStyles fixed error for me.

https://v3.nuxtjs.org/api/configuration/nuxt-config#inlinessrstyles

@mhfeizi could you share how have you included Vuetify 3 in your Nuxt 3 project? With plugin? But what's in nuxt.config.ts and what's in the plugin file? Because it did not help me.

Disabling inlineSSRStyles fixed error for me.

https://v3.nuxtjs.org/api/configuration/nuxt-config#inlinessrstyles

It doesn't work for me
nuxt version => 3.0.0-rc.13

@mhfeizi could you share how have you included Vuetify 3 in your Nuxt 3 project? With plugin? But what's in nuxt.config.ts and what's in the plugin file? Because it did not help me.

nuxt.config.ts

export const defaultConfigs = { 

ssr: true, 

experimental: { 

inlineSSRStyles: false 

}, 

vite: { 

ssr: { 

noExternal: ["vuetify"] 

} 

}, 

modules: [ 

(_options, nuxt) => { 

nuxt.hooks.hook( 

"vite:extendConfig", 

config => config.plugins?.push(vuetify({ styles: { configFile: "assets/vuetify.settings.scss" } })) as any 

); 

} 

] 

};

plugins/vueytify.ts

import { createVuetify } from "vuetify"; 

import { aliases, mdi } from "vuetify/iconsets/mdi-svg";


export default defineNuxtPlugin(app => { 

const vuetify = createVuetify({ 

ssr: true, 

icons: { 

defaultSet: "mdi", 

aliases, 

sets: { 

mdi 

} 

}

}); 

app.vueApp.use(vuetify); 

});

@mhfeizi thank you. Unfortunately, I still have the same errors in the Browser console and in the terminal. But your answer helped me understand and remove some of the misconfigurations I had. What do you have in assets/vuetify.settings.scss?

I'm using Nuxt 3.13 along with Vuetify 3.0.1 and also experiencing long load times in dev mode. Here is my plugins/vuetify.ts config that may help with some of the 404 component errors above:

import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
import { aliases, fa } from 'vuetify/iconsets/fa';
import colors from 'vuetify/lib/util/colors.mjs';

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    icons: {
      defaultSet: 'fa',
      aliases,
      sets: {
        fa,
      },
    },
    theme: {
      defaultTheme: 'dark',
      themes: {
        light: {
          dark: false,
          colors: {
            primary: colors.blue.darken2,
            secondary: colors.grey.darken3,
            accent: colors.blue.accent1,
            error: colors.red.accent2,
            info: colors.blue.base,
            success: colors.green.base,
            warning: colors.orange.darken1,
          },
        },
        dark: {
          dark: true,
          colors: {
            primary: colors.blue.darken4,
            secondary: colors.grey.darken1,
            accent: colors.pink.accent2,
            error: colors.red.darken2,
            info: colors.blue.base,
            success: colors.green.darken2,
            warning: colors.orange.darken1,
          },
        },
      },
    },
    components,
    directives,
  });

  nuxtApp.vueApp.use(vuetify);
});

The import * comopnents and * directives I think are key.

What do you have in assets/vuetify.settings.scss?

@use 'vuetify/settings' with( /* ... */ );

I also add vuetify.settings.scss in my main.scss and import main.scss in layout

main.scss

@use "./vuetify.settings.scss";

The problem is still here with Nuxt 3.0.0 stable right @alexMugen ? I got an email saying you fixed it but I assume you deleted the comment? Cheers

The problem is still here with Nuxt 3.0.0 stable right @alexMugen ? I got an email saying you fixed it but I assume you deleted the comment? Cheers

Yes it's still here unfortunately

Same issue here with Nuxt 3 stable version and Vuetify 3.1.1
It only happens when SSR is true

Yeah, Vuetify 3.1.2 & Nuxt 3 showing errors in browser console when I customize SASS vars.
They only get displayed when ssr: true inside nuxt.config. I also cannot deploy the app to netlify because of the errors.

One of the many errors received: Failed to load resource: the server responded with a status of 404 (Page not found: /_nuxt/%EF%BF%BDplugin-vuetify:components/VAppBar/VAppBar.sass).

I don't know why this gets added %EF%BF%BD

Temporary solution :

server/plugins/vuetify-fix.ts

export default defineNitroPlugin((nitroApp: any) => {
  nitroApp.hooks.hook("render:response", (response: any) => {
    response.body = response.body.replaceAll("/_nuxt/\0", "/_nuxt/");
  });
});

Sadly I am not seeing where this changed anything.

Thanks tho.

Temporary solution :

server/pluigns/vuetify-fix.ts

export default defineNitroPlugin((nitroApp: any) => {
  nitroApp.hooks.hook("render:response", (response: any) => {
    response.body = response.body.replaceAll("/_nuxt/\0", "/_nuxt/");
  });
});

Maybe this has something to do with the error? https://github.com/vuetifyjs/vuetify-loader/blob/next/packages/vite-plugin/src/stylesPlugin.ts#L227

Temporary solution :

server/pluigns/vuetify-fix.ts

export default defineNitroPlugin((nitroApp: any) => {
  nitroApp.hooks.hook("render:response", (response: any) => {
    response.body = response.body.replaceAll("/_nuxt/\0", "/_nuxt/");
  });
});

So you have it all working perfectly fine? I cannot get it to work, even with your suggestions in this thread.

So you don't have a very slow development environment, no toolbar/layout shifts the first seconds while it is loading?

If so, would it be possible for you to create a demo repository? That would be appreciated! I am currently doing some research towards Nuxt 3 compatible UI frameworks & libraries and would like to work with Vuetify.

False alarm.. This actually worked!
It did not work initially because @mhfeizi wrote the folder name wrong.. instead of server/pluigns/vuetify-fix.ts , it should be server/plugins/vuetify-fix.ts. Plugins was spelt wrong. The errors are gone from the console. I will share a repo soon.

Thanks @mhfeizi

@ItsMeDelanoDev here is the link to the repo with the customized variables working: https://github.com/BayBreezy/vuetify3-nuxt3-sass-customized

I also hosted it on Netlify with no trouble: https://v3customized.behonbaker.com/
Again, thanks @mhfeizi - That plugin saved me lol

@BayBreezy I'm trying your solution but I'm not getting the variables applied in the application!
do you have an idea why this happens ?

Here is my variables.scss:

When I replace vuetify/settings with vuetify: the basic sass variables work fine. but because I'm trying to
override a component sass variable "list" I'm getting a SASS error.

@BayBreezy Even when I tried to clone your repo, It seems not to work even locally. the font-family is "Roboto" instead of "Inter" !

I would definitely advise using the module. This is not an issue with Nuxt as far as I can tell (nor something to fix within Nuxt)...

Any idea where this bug belongs, so we could move it there? Please no further off-topic discussion about the pro's and con's of vuetify here.

It seems a bug in nuxt with default resolved virtual module prefix \0. Devtools cannot show some virtual using it (found same problem in i18n module). I guess the bug is about using that prefix wrongly, since vuetify is changing the entry point and should use a custom prefix to resolve the styles: check the last paragraph before previous section here https://vitejs.dev/guide/api-plugin.html#universal-hooks

I fix it in my nuxt module with a copy/paste from the original vuetify styles plugin using another prefix and handling ssr properly.

I suffered from the same problem long time.
In my environment, the line that affected performance the most was the following:

import [* as components | VBtn | ...etc] from "vuetify/components"

Just writing, it doesn't matter whether use it or not.
Maybe looking again for a common component like VOverlay that call from within.

By omitting this description and specifying the component to be used, much improved..

ex)

import { VBtn } from "vuetify/components/VBtn"

If SSR is true, no any vite plugin and inlineSsrStyle: true was required, only build.transpile: ["vuetify"] .

I would definitely advise using the module. This is not an issue with Nuxt as far as I can tell (nor something to fix within Nuxt)...

This module poses conflicts with Sass variables. Whenever I attempt to include Vuetify's Sass variables into my project, I encounter the following error:
This module was already loaded, so it can't be configured using "with".

For more detailed information about this issue, you can refer to:
userquin/vuetify-nuxt-module#115
(It's an ongoing issue, and perhaps the respective developer will address and fix this problem in the future)

The challenge of integrating Nuxt, Vuetify, and Vite has been a persistent and somewhat tedious matter within the Vue community. While both Nuxt and Vuetify are popular among Vue programmers, it's puzzling why challenges like these arise.

Could the Nuxt team consider publishing an official Vuetify loader that seamlessly integrates with Nuxt and Vite? As of now, there are limited (if any) UI frameworks available, and we have no choice but to use Vuetify and unfortunately it appears that these integration difficulties persist without much attention.

PS:
If given the choice between resolving this issue today or waiting 6-12 months for a feature-rich UI framework developed by the Nuxt team, I would opt for the latter. I'm feeling quite exhausted with all the ongoing challenges surrounding the Vuetify project.

@mostafaznv what other UI libraries have you checked out? There are a few plus it is easier now more than ever to create a custom one

@mostafaznv

With the upgrade to Vue3, Nuxt, Vuetify, and their surrounding libraries are still not aligned,
but as far as Vuetify is concerned, the reason is that almost all of them use vite-plugin-vuetify internally.

It is located in

https://github.com/vuetifyjs/vuetify-loader/blob/c4ead7300f63b702d96945440db6dd61835097dc/packages/shared/src/imports/getImports.ts#L24

Probably the most effective solution would be wait for this PR to be merged.

vuetifyjs/vuetify-loader#313

By the way, it can also be improved by replacing with a general-purpose plugin such as esbuild-sass-plugin instead of vite-plugin-vuetify.

I think many developers, myself included, don't understand that upgrading Vue3 and Nuxt3 involves fundamental changes.
It is supposed to be a more general-purpose and effective modification than before, but it seems that it is a modification that will lead to a decrease in development efficiency if it is tied to the existing source.

Probably the most effective solution would be wait for this PR to be merged.

vuetifyjs/vuetify-loader#313

I Will try to add those changes to vuetify nuxt module.

By the way, it can also be improved by replacing with a general-purpose plugin such as esbuild-sass-plugin instead of vite-plugin-vuetify.

I Will also try esbuild.

@coela-oss nice, esbuild sass plugin: precompile and precache. The styles once configured shouldn't change, why we need to rebuild them between dev server restarts?

@userquin
In this case, the reason is module has't updated in Vuetify3 loader that main stream changed to esbuild from webpack, not the expected behavior.

Vuetify3/Vite supports esbuild and TreeShaking, so loads only the necessary parts. They shouldn't have to look at the entire tree again and again if it worked according to specifications.

This is definitely not a Nuxt3 issue, but I need the docs how Nuxt2 absorbs Vue3 changes and separates Nuxi, Nitro, Vite, etc.

Please let me know if anyone has additional information. I may have overlooked something. Is this case's complexity, should be resolved by simply writing createVuetify and nuxtApp.vueApp.use(vuetify) in the plugin directory as Nuxt3?

They are 2 completely different problems, the fact that sass is slow (I think this one has no solution) and the warnings in the sources

Anyone looking for Nuxt+Vuetify flavours, I have been doing a lot of trial & errors to setup some starter templates, and I have these three repos using this module (https://vuetify-nuxt-module.netlify.app/).

Based on my limited testing, these templates are not throwing any errors/warnings. All these repos build fine, so they include netlify demo urls.

• https://github.com/Pinegrow/pg-nuxt-vuetify
• https://github.com/Pinegrow/pg-nuxt-vuetify-tailwindcss
• https://github.com/Pinegrow/pg-nuxt-vuetify-unocss

Feel free to improve these templates by testing them at your end, and share them with the rest of us. Also, note that all three repos have a "blank" branch, which scaffolds just the project skeleton with an empty index.vue (just a single span), for a fresh start. Also, the tailwind & unocss ones use !important flag in their config to take precedence over the vuetify's generous use of !important.

As @userquin stated correctly, sass is slow, so these templates have sass override (for components) in nuxt.config.ts commented out. If you want to override component's sass variables, uncommented these two in the nuxt config file.

vuetify: {
    moduleOptions: {
      /* If customizing sass variables of vuetify components */
      /* If enabling this, set experimental.inlineSSRStyles to false */
      // styles: {
      //   configFile: 'assets/vuetify/settings.scss',
      // },
    },
    vuetifyOptions: './vuetify.config.ts', // This file is generally configured as configPath with Pinegrow Vuetify Plugin
},       

  // Required when customizing Vuetify sass variables via configFile with SSR enabled - https://vuetify-nuxt-module.netlify.app/guide/server-side-rendering.html#vuetify-sass-variables
  // experimental: {
  //   inlineSSRStyles: false,
  // },

We will get there eventually!

Temporary solution :

server/plugins/vuetify-fix.ts

export default defineNitroPlugin((nitroApp: any) => {
  nitroApp.hooks.hook("render:response", (response: any) => {
    response.body = response.body.replaceAll("/_nuxt/\0", "/_nuxt/");
  });
});

This works fine. But it need restart server for applying.

Question. Why it does not work out of box in Nuxt?

Can you provide a minimal reproduction?

Can you provide a minimal reproduction?

https://github.com/itelmenko/nuxt3-vuetify3-customisation

In browser dev console I see a lot of errors:

....

 WARN  Sourcemap for "plugin-vuetify:components/VSlideGroup/VSlideGroup.sass" points to missing source files                                                  11:50:54 AM

.....
[Vue Router warn]: No match found for location with path "/_nuxt/%EF%BF%BDplugin-vuetify:components/VApp/VApp.sass"

npm_run_dev.log

If I add server plugin

 mv server.backup server
 npm run dev

then I don't see errors in browser console, I dont see [Vue Router warn]: No match found for location with path "/_nuxt/%EF%BF%BDplugin-vuetify:components/VApp/VApp.sass" in linux console (terminal). But I see errors like WARN Sourcemap for "plugin-vuetify:components/VSlideGroup/VSlideGroup.sass" points to missing source files still.

But I see errors like WARN Sourcemap for "plugin-vuetify:components/VSlideGroup/VSlideGroup.sass" points to missing source files still.

You can disable Nuxt's source map option.

export default defineNuxtConfig({
  sourcemap: {
    server: false,
    client: false
  }
})

Combining these two workarounds might resolve the issue, but it's somewhat a messy solution.

Unfortunately, the Vuetify team has no plans to maintain support for their official nuxt-vite plugin, and the Nuxt team doesn't seem inclined to do so either.

On the other hand, NuxtUI is not as feature-rich as Vuetify "yet". So, we, as Vue users, find ourselves navigating this endless desert alone, hoping for a day when either NuxtUI or PrimeVue will step up to take on the responsibility.

I’m feeling a bit tired, but at the same time, I’m filled with hope and readiness. I believe the switch to one of them will happen at some point this year.

If there’s something we can fix in Nuxt, we will. (which is why I asked for a reproduction.) But as far as I’m aware these stem from issues with Vuetify.

also note there is an excellent module by @userquin which solves these issues for Nuxt users.

also note there is an excellent module by @userquin which solves these issues for Nuxt users.

Could you explain what do you mean? What solution exactly?

@itelmenko any chance you could make it a minimal reproduction? 🙏

@itelmenko I think Daniel is referring to this module here: https://vuetify-nuxt-module.netlify.app/

It gets rid of some of the issues posted above. I was so frustrated with the Vuetify + Nuxt integration that I created my own UI lib here: https://ui-thing.behonbaker.com/getting-started/introduction

@itelmenko any chance you could make it a minimal reproduction? 🙏

#15412 (comment)

Or what do you mean?

It's quite a big project: https://github.com/itelmenko/nuxt3-vuetify3-customisation/blob/main/package.json#L12-L27

Will this work?

https://github.com/SvenjaReissaus/nuxt-vuetify-sass

Will this work?

https://github.com/SvenjaReissaus/nuxt-vuetify-sass

I recommend using this: https://github.com/userquin/vuetify-nuxt-module.
It's still in beta versions, but it works quite well.

Will this work?
https://github.com/SvenjaReissaus/nuxt-vuetify-sass

I recommend using this: https://github.com/userquin/vuetify-nuxt-module. It's still in beta versions, but it works quite well.

I feel adding a third-party module to an issue reproduction might just add an extra layer of where the issue is originated from. Are you able to reproduce the issue using that module?

I recommend using this: https://github.com/userquin/vuetify-nuxt-module. It's still in beta versions, but it works quite well.

There is not enough documentation.
I don't see how can I define

1. Vuetify globals
2. Vuetify custom themes
3. Vuetify sass variables (reefine)

Could you send some snippets?

Please move this discussion to the third party module, it is not relevant to this issue

It's quite a big project: https://github.com/itelmenko/nuxt3-vuetify3-customisation/blob/main/package.json#L12-L27

Here's more about what I mean by a minimal reproduction

Do you mean minimal reproduction with userquin/vuetify-nuxt-module or without it?

Here my pr vuetifyjs/vuetify-loader#332

Nuxt reproduction there (link to open the repo in stackblitz in the readme file) using a local vite plugin tgz, you can remove the dependency and add the vuetify plugin and run the dev:sourcemap script.

Right now we also have some vue router warnings in nuxt.

The problem, vite will not show the sourcemap map. The missing source warnings is because entries in sources array in the sourcemap with file:/// prefix.