ENvironment:
package.json:
{
"name": "nuxt-app",
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"@iconify/vue": "^4.1.1",
"@nuxt/devtools": "latest",
"@types/node": "^18",
"nuxt": "^3.6.5"
},
"dependencies": {
"@mdi/font": "^7.2.96",
"mdi": "^2.2.43",
"mitt": "^3.0.1",
"sass": "^1.63.6",
"vuetify": "3.3.9"
}
}
For using some lab components such as v-data-table, v-data-table-server, I know I can directlly add below directive into the component which uses them.
import { VDataTable, VDataTableServer } from 'vuetify/labs/VDataTable'
However, for not duplicating the above line in each component using the lab components,after refering to https://vuetifyjs.com/en/labs/introduction/, I prefer to add it into plugins/vuetify.ts
. So I adjust my plugins/vuetify.ts
as below:
file plusgins/vuetify.ts
:
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import * as labsComponents from 'vuetify/labs/components'
import '@mdi/font/css/materialdesignicons.css'
import {aliases, mdi} from "vuetify/iconsets/mdi";
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify({
ssr: true, // https://vuetifyjs.com/en/getting-started/installation/
components: {
components,
labsComponents
},
directives,
icons: {
defaultSet: 'mdi',
aliases,
sets: {
mdi
}
}
})
nuxtApp.vueApp.use(vuetify)
})
When I start my project, it appears below error:
[Vue warn]: Failed to resolve component: v-window 8:02:18 AM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: v-window-item 8:02:18 AM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: v-app 8:02:18 AM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: v-system-bar 8:02:18 AM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: v-app-bar
.....
.....
Please suggest the correct approach. Appreciate!
Replace
components: {
components,
labsComponents
},
with
components: {
...components,
...labsComponents
},