Open shahriar350 opened 2 years ago
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
Would this module help? https://github.com/nuxt/modules/issues/578
@nuxtjs/vuetify is the popular ui for nuxt. is it comfortable/ when it will comfortable?