is @nuxtjs/vuetify comfortable with nuxt 3

[shahriar350]

@nuxtjs/vuetify is the popular ui for nuxt. is it comfortable/ when it will comfortable?

[Harm-Nullix]

Yes you can use Vuetify, but not with @nuxtjs/vuetify! You can follow the beta guide of Vuetify (It is Vue3 specific): https://next.vuetifyjs.com/en/getting-started/installation/

My setup with Vuetify in Nuxt:

package:

  "dependencies": {
    "vuetify": "^3.0.0-beta.0"
  },

nuxt.config:

export default defineNuxtConfig({
  build: {
    transpile: ['vuetify'],
  },
  css: ['vuetify/lib/styles/main.sass'],
})

plugins/vuetify:

// @ts-ignore
import {defineNuxtPlugin} from '#app'
import {createVuetify} from 'vuetify'
import * as components from 'vuetify/components'
import {aliases, mdi} from 'vuetify/iconsets/mdi-svg'

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components,
    icons: {
      defaultSet: 'mdi',
      aliases,
      sets: {
        mdi,
      },
    },
    theme: {
      defaultTheme: 'light',
      themes: {
        light: {
          dark: false,
          colors: {
            background: '#EEEEEE',
            surface: '#CDCDCD',
            primary: '#0091ff',
            secondary: '#0091ff',
            success: '#0091ff',
            warning: '#0091ff',
            error: '#0091ff',
            info: '#0091ff',
            'on-background': '#000000',
            'on-surface': '#000000',
            'on-primary': '#000000',
            'on-secondary': '#000000',
            'on-success': '#000000',
            'on-warning': '#000000',
            'on-error': '#000000',
            'on-info': '#000000',
          },
        },
      },
    },
  })

  nuxtApp.vueApp.use(vuetify)
})

Note that I use svg icons, you can read more about the settings in the feature menu or look into the node_modules/vuetify/dist/vuetify.d.ts locally /packages/vuetify/src/framework.ts folder for the interface VuetifyOptions

[jvhellemondt]

Would this module help? https://github.com/nuxt/modules/issues/578