How to add Vuetify3 in your template (or new template) ?

[frck006]

Hi,

I would like to use Vuetify instead of tailwind.
Until now Vuetify was not compliance with Vue3, but now, there is Vuetify 3 Alpha.
Normaly, we can use it with vue-cli 4 and add

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import App from './App.vue'

const app = createApp(App)
const vuetify = createVuetify(...) // Replaces new Vuetify(...)

app.use(vuetify)

app.mount('#app')

How can I do this with ViteSSG ?

Regards,
Franck

[antfu]

app is accessible in ctx.app https://github.com/antfu/vitesse/blob/0e40c550f811f3b695c0d34f72c75a099126b962/src/main.ts#L14

See the docs for Vite SSG for more details.

[frck006]

Thank you.

For information, this is how to add Vuetify 3.

// modules/vuetify.js

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/lib/styles/main.sass'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/lib/components'
import * as directives from 'vuetify/lib/directives'

export default createVuetify({
  components,
  directives,
})

// /src/main.ts

import './styles/main.postcss'
import { ViteSSG } from 'vite-ssg'
import generatedRoutes from 'pages-generated'
import { setupLayouts } from 'layouts-generated'
import vuetify from './modules/vuetify.js'
import App from './App.vue'

const routes = setupLayouts(generatedRoutes)

// https://github.com/antfu/vite-ssg
export const createApp = ViteSSG(
  App,
  {
    routes,
    // Decommenter pour la version Tomcat.
    // base: 'dist',
  },
  (ctx) => {
    ctx.app.use(vuetify)
    // install all modules under `modules/`
    Object.values(import.meta.globEager('./modules/*.ts')).map(i => i.install?.(ctx))
  },
)

[peterbud]

@frck006 : I have tried the same, but it seems that I adding vuetify 3 fails:
[vite] Internal server error: Failed to resolve import "vuetify/lib" from "src\pages\index.vue". Does the file exist?

Have you also changed the vite.config.ts? Like adding VuetifyResolver()?I have limited knowledge about the vite infrastructure, but it seems that the rollup/build for the new Vuetify requires something extra, but I'm not sure what.

Do you maybe havea working example?

[athisun]

@peterbud I got mine working by creating a custom version of VuetifyResolver to change the import path from vuetify/lib to vuetify. I'm not sure yet how this affects tree-shaking.

src/plugins/vuetifyResolver.ts

/**
 * Resolver for Vuetify v3
 *
 * @link https://github.com/vuetifyjs/vuetify
 */
export function VuetifyResolver(): any {
  return (name: string) => {
    if (name.match(/^V[A-Z]/))
      return { importName: name, path: 'vuetify' }
  }
}

vite.config.ts

import { VuetifyResolver } from './src/plugins/vuetifyResolver'

export default defineConfig({
  plugins: [
    // https://github.com/antfu/vite-plugin-components
    ViteComponents({
      customComponentResolvers: [
        // https://github.com/vuetifyjs/vuetify/
        VuetifyResolver(),
      ],
    }),
  ],
})

src/modules/vuetify.ts

import '@mdi/font/css/materialdesignicons.css'
import { createVuetify } from 'vuetify'
// import * as components from 'vuetify/lib/components'
import * as directives from 'vuetify/lib/directives'
import 'vuetify/lib/styles/main.sass'
import { UserModule } from '~/types'

// https://github.com/vuetifyjs/vuetify/
export const install: UserModule = ({ app }) => {
  const vuetify = createVuetify({
    // Components will be imported by vite-plugin-components
    // components,
    directives,
  })
  app.use(vuetify)
}

This should probably be turned into a pull request similar to unplugin/unplugin-vue-components#32