nuxt3.jsvuetifyjs3vuetify-datatable

How to import both components and labcomponents in Vuetify3 in Nuxt3 (or Vue3) project?


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!


Solution

  • Replace

    components: {
      components,
      labsComponents
    },
    

    with

    components: {
      ...components,
      ...labsComponents
    },