CODEWITHSUNDEEP
vuejs3vuetifyjs3nuxt3.js
A456B123
A456B123

Reputation: 95

Nuxt 3 and Vuetify 3: Failed to resolve component: *

I wanted to look at Nuxt 3 with Vuetify 3 and unfortunately I get the following error message during setup:

[Vue warn]: Failed to resolve component: v-btn                                                                                                                                                                  
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.                                                                                                      
[Vue warn]: Component <Anonymous> is missing template or render function.

plugins/vuetify.ts:

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default defineNuxtPlugin(nuxtApp => {
  const vuetify = createVuetify({
    components,
    directives,
  })

  nuxtApp.vueApp.use(vuetify)
})

app.vue:

<template>
  <div>
    <v-btn> Button </v-btn>
  </div>
</template>

nuxt.config.ts:

export default defineNuxtConfig({
    css: [
        'vuetify/lib/styles/main.sass',
        '@mdi/font/css/materialdesignicons.min.css'
    ],
    build: {
        transpile: ['vuetify'],
    },
    vite: {
        define: {
            'process.env.DEBUG': false,
        },
    },
})

package.json:

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "nuxt": "^3.3.1"
  },
  "dependencies": {
    "@mdi/font": "^7.1.96",
    "sass": "^1.59.3",
    "vuetify": "^3.1.10"
  }
}

Do you have any idea what I am doing wrong? I followed these instructions: https://codybontecou.com/how-to-use-vuetify-with-nuxt-3.html.

With the difference that I used npm and did not install vuetify@next but simply vuetify.

So I used the following commands:

Thank you very much for your help. :)

Upvotes: 5

Views: 12029

Answers (2)

Henrique Van Klaveren
Henrique Van Klaveren

Reputation: 1760

I believe this problem is occurring because Nuxt uses Vite as a compiler, and it will be necessary to import Vuetify as a plugin to work correctly.

See the installation documentation: https://vuetifyjs.com/en/getting-started/installation/#ssr

In my case, mid 2023, I have used the vite-plugin-vuetify installed to import Vuetify as well.

First of all, install vite-plugin-vuetify:

npm install -D vite-plugin-vuetify

Create a new plugin in plugins/vuetify.ts

import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import "vuetify/lib/styles/main.sass";

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    ssr: true,
    components,
    directives,
  });
  nuxtApp.vueApp.use(vuetify);
});

Configure vuetify in nuxt.config.ts

import vuetify from "vite-plugin-vuetify";

export default defineNuxtConfig({
...
   modules: [
    (options, nuxt) => {
      nuxt.hooks.hook("vite:extendConfig", (config) =>
        // @ts-ignore
        config.plugins.push(
          vuetify({
            autoImport: true,
            // styles: { configFile: "assets/styles/vuetify.scss" },
          })
        )
      );
    },    
  ],
  build: {
    transpile: ["vuetify"]
  },
  vite: {
    define: {
      'process.env.DEBUG': false
    },
    ssr: { // if ssr enabled in future, this config is required to load vuetify properly
      noExternal: ['vuetify']
    }
  }
...
})

I believe nuxt will work with vuetify as espected.

Btw I was never able to overwrite the styles configuration file without losing the original css. If someone can complement I will be happy.

// styles: { configFile: "assets/styles/vuetify.scss" },

The custom styles configure will generate a hundred warnings in the terminal and make the application very slow.

So that's it.

Upvotes: 0

Everton Luis de Oliveira
Everton Luis de Oliveira

Reputation: 616

It's strange, it's possible the components are try to rewhrite, try change the vuetify config, add ...components

see an example of my project, ignore the another content:

import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/lib/iconsets/mdi-svg'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { VDataTable } from 'vuetify/labs/VDataTable'

export default defineNuxtPlugin(nuxtApp => {
  const vuetify = createVuetify({
    components: {
      ...components,
      VDataTable,
    },
    directives,
    icons: {
      defaultSet: 'mdi',
      aliases,
      sets: {
        mdi
      }
    }
  })

  nuxtApp.vueApp.use(vuetify)
})

Upvotes: 2

Related Questions