Router warnings on cold start when resolving virtual sass modules

[thorge]

After upgrading to Nuxt version 3.14.159, I encounter persistent router warnings on a cold start related to the resolution of virtual Sass modules provided by Vuetify. These warnings do not appear on subsequent hot reloads, but they show up consistently after a full restart (cold start). This issue seems to be similar to the one described in vuetifyjs/nuxt-module#150

WARN  [Vue Router warn]: No match found for location with path "/_nuxt/virtual:plugin-vuetify:components/VCard/VCard.sass"                   
WARN  [Vue Router warn]: No match found for location with path "/_nuxt/virtual:plugin-vuetify:components/VAvatar/VAvatar.sass"               
WARN  [Vue Router warn]: No match found for location with path "/_nuxt/virtual:plugin-vuetify:components/VChip/VChip.sass"
...

My package versions:

{
  "@nuxt/vite-builder": "^3.14.159",
  "nuxt": "^3.14.159",
  "vite-plugin-vuetify": "^2.0.4",
  "vue": "^3.5.12",
  "vue-router": "^4.4.5",
  "vuetify": "^3.7.4"
}

[userquin]

You can add upath and @vuetify/loader-shared as dev dependencies, then, add this module to your modules folder https://github.com/vuetifyjs/create/pull/61/files#diff-4b4c4cd18da70e601d2655333385b40296a6604e786e298bd5e1d1a8c398c594R1

Remove vite-plugin-vuetify from your nuxt config file and add the vuetify plugin options to vuetify: entry in the nuxt config file, for example:

vuetify: {
  autoImport: true,
  styles: {
    configFile: './assets/settings.scss'
  }
}

This should solve any issue with sass: you should also replace sass with latest sass-embedded (or add it to your dev dependencies).

EDIT: I have sent a PR a few weeks ago here to solve SSR and SASS issues => #338

[thorge]

Thanks, @userquin, for the information! Just to confirm, does this mean that vite-plugin-vuetify is no longer necessary? I’m asking because the Vuetify documentation still recommends it as the standard approach.

Currently, I’m including my settings with:

 modules: [
  (_options, nuxt) => {
    nuxt.hooks.hook('vite:extendConfig', (config) => {
      // @ts-expect-error
      config.plugins.push(vuetify({
        autoImport: true,
        styles: {
          configFile: 'scss/settings.scss',
        },          
       }))
    })
  },
  ...
]

[userquin]

No, you will use it in the new module but only to auto import vuetify components: you can remove that inlined module, the new module will register it properly disabling styles plugin adding a new one to solve the sass issues.

EDIT: vite-plugin-vuetify will register Vite auto import and style plugins, the new module will use it only for auto import veutify stuff disabling styles plugin registration, will register a new custom styles plugin to deal with new Vite 4.2 SASS (modern-api) and SSR