Is it compatible with VueJS 2.7?

[MartinX3]

Or do we need to wait for VuetifyJS 2.7?

https://github.com/vuejs/vue/releases/tag/v2.7.0

[KaelWD]

Vuetify itself is, vuetify-loader isn't yet: vuetifyjs/vuetify-loader#240

[MartinX3]

Same for vite.
It's only usable with heavy workarounds.
I assume we need to wait for vuetify 2.7

[kingyue737]

Hey @MartinX3, I've made a starter template with Vite + Vuetify 2 +Vue 2.7, components are auto imported by unplugin-vue-components. It works like a charm. Several products of my team based on this template are in stable production. Hope it can help you.

[MartinX3]

@kingyue737 thank you but sadly it seems that there is too much code to workaround the missing vite support or it takes too much time to analyse the project and isolate and extract the specific code to add vite support.
I better wait for vuetify 2.7/3.2

[kingyue737]

Sorry the project is a bit heavy for beginer, the docs is still in progress. It's not responsibility of vuetify 2.7 to support vite but an official vite-plugin-vuetify2 which doesn't exist currently. In fact, it's very simple to use vuetify 2 in vite!! Just intall unplugin-vue-components.

npm install -D unplugin-vue-components

then add the plugin in vite.config.ts

import { defineConfig } from 'vite'
import vue2 from '@vitejs/plugin-vue2'
import Components from 'unplugin-vue-components/vite'
import { VuetifyResolver } from 'unplugin-vue-components/resolvers'

defineComponent({
  plugins: [
     vue2(),
     Components({
        resolvers: [VuetifyResolver()],
     })
  ]
})

Not too much at all.

If you also use vuetify custom sass variable

defineComponent({
  plugins: [
    vue2(),
    Components({
      resolvers: [VuetifyResolver()],
    }),
  ],
  css: {
    // https://vitejs.dev/config/#css-preprocessoroptions
    preprocessorOptions: {
      sass: {
        additionalData: [
          // vuetify variable overrides
          '@import "@/styles/variables.scss"',
          '',
        ].join('\n'),
      },
    },
  },
})

9 extra lines in vite config. That's all.

If you don't want to wait, take a try. And don't hesitate to ask in discussion if you meet any issue

[MartinX3]

Thank you, I keep it in mind to test it later with Nuxt 2 Bridge which I use as static website generator.

Edit: Sadly not working.