nuxt: Build and dev mode are slow and got errors in logs when importing Vuetify 3 with Vite-plugin-vuetify

Vuetify: 3.2.5 Nuxt: 3.5.0

the problem still EXIST!

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/");
  });
});

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.

Last Friday : yes 😕

@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 that sucks cause Vite is much better.

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.

Still an issue Nuxt 3.7.0 Vuetify 3.3.14

Thanks @BayBreezy! I think we’re making progress in finding the reason.

@danielroe please also have a look at the information in the comments marked “Off Topic” over there, I guess especially my last one helps to compare the results.

TL;DR: vuetify-loader prepends a \0 to the path for indication and with nuxt (perhaps as /_nuxt/ is prepended) this never gets removed again. That seems to cause these issues. The maintainer wrote, with vite-only that doesn’t happen.

I guess for reproduction, this guide & repo can be used: https://codybontecou.com/how-to-use-vuetify-with-nuxt-3.html

Here my pr https://github.com/vuetifyjs/vuetify-loader/pull/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.

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.

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.

Still an issue Nuxt 3.6.5 Vuetify 3.3.12

I have created a new nuxt module here vuetify-nuxt-module:

• no server hack
• no sources warnings
• @nuxtjs/i18n support
• working to add date support

Here a StackBlitz example: https://stackblitz.com/edit/nuxt-starter-9fybba

Nuxt got updated… Same issue 😦

So after the nuxt update to 3.1.1, he issue is back. Long load time and the warnings are now in the VSCode terminal instead of the browser console

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

https://github.com/vuetifyjs/vuetify-loader/pull/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.

@jd-solanki I think we should give this module a try. I think it fixes the issues outlined here: https://vuetify-nuxt-module.netlify.app/ I have not pressure tested it yet in terms of customization but it takes the sass variables and shows no error in the console. Plus the build & dev server start time (on a mac) is fast.

Hey @danielroe

Is there any way we can prevent this logs:

I tried using custom logger mentioned in this issuse by you but didn’t work:

const logger = createLogger()
const loggerWarn = logger.warn

logger.warn = (msg, options) => {
  // Ignore vuetify warnings
  if (msg.includes('Could not resolve id plugin-vuetify:')) {
    // console.log('Got it!')

    return
  }
  loggerWarn(msg, options)
}

hooks: {
    'vite:extendConfig': function (config) {
      config.customLogger = logger
    },
  },

After 3 years of my decision, I would not choose or recommend vuetify now. There’s better alternative (but with less components) like radix vue & Nuxt UI.

@Hebilicious The problem occurs when you try to add configFile to customize Vuetify SASS variables:

check this reproduction link

the more component you use, the slower the application becomes.

Amazing investigation. I will look into this further on the Nuxt end.

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.

@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); 

});

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.

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.

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!

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)…

@jd-solanki I think we should give this module a try. I think it fixes the issues outlined here: https://vuetify-nuxt-module.netlify.app/ I have not pressure tested it yet in terms of customization but it takes the sass variables and shows no error in the console. Plus the build & dev server start time (on a mac) is fast.

I think since neither nuxt nor vuetify devs have shown interest in fixing this, it probably makes more sense to start using and maintaining the vuetify-nuxt module…

Is Radix Vue production ready?

I guess yes, But let’s not divert the conversation from the original issue.

If anyone gets some solution regarding vuetify please share.

After 3 years of my decision, I would not choose or recommend vuetify now. There’s better alternative (but with less components) like radix vue & Nuxt UI.

Hi @jd-solanki ,

I took a look to radix vue. Interesting option.

Is radix vue production ready?

@derHodrig This is called Hybrid rendering. According to best of my knowledge, Below is identical to your snippet:

- ssr: true
- routeRules: {
-     '/**': { ssr: false },
-   },
+ ssr: false

Not sure why you posted it here, it will be misleading to those researching.

@Hebilicious no, using sass will be slow, I’ll try to find alternatives to not block/degrade the app and improve DX experience, I don’t promise anything

@Hebilicious no, using sass will be slow, I’ll try to find alternatives to not block/degrade the app and improve DX experience, I don’t promise anything

@subinznz check the repo, you have the source code there: basically copy/paste the styles plugin from vite-plugin-vuetify repo and rewrite the ids (just added lib/ to the ids and don’t use Vite virtual resolved convention).

About the new module: I don’t want to write any vuetify logic in every project, just add the module to the config file and that’s it (with some configuration), that way you can forget you’re using vuetify underneath and focus on building your app.

Does your module fix the SASS issue mentioned by @KareemDa ?

I’m experiencing the same issue now!

OMG I spent a whole working day on this. Thanks @BayBreezy your working example should be mentionned everywhere, especially there https://codybontecou.com/how-to-use-vuetify-with-nuxt-3.html !!!

@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

Legend, thank you!

REPO: https://stackblitz.com/edit/nuxt-starter-xddf1p?file=nuxt.config.ts Here is a repo… As the ppl stated above, configuring the SASS vars give weird errors in the browser console (which stopped me personally from deploying the app to Netlify).

This plugin saved the day for me --> https://github.com/nuxt/nuxt/issues/15412#issuecomment-1398110500 Sadly, @KareemDa is using PNPM and the mentioned plugin did not help his case.

I’m referring to the original repro: https://stackblitz.com/edit/github-2wrsdj?file=nuxt.config.ts

Thank you so much for providing help. Waiting for an expert to figure out how to solve this issue

Ohhhhhhhhh… Ouch… i have never used PNPM… I really don’t know how to help you fix that… The PNPM experts would have to take a look at that

Actually the main repo is a little bit complex (monorepo) and private. but it has a project with (vuetify 3 + Nuxt 3) with 100% the same config as yours. But unfortunately, It’s not working.

UPDATE After a deep look. the problem seems with using PNPM as a package manager! your project won’t work with pnpm. but it WILL work with npm !

What a problem!

UPDATE 2 from vuetify documentation:

How to solve this ?!

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

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

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.

@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?