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

/**
 * Custom vite-plugin-components resolver for Vuetify v3
 * Solves https://github.com/antfu/vitesse/discussions/174
 *
 * @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

[athisun]

Note that vuetify have been working on a vite plugin that should replace the custom resolver I used above. Check it out here:

• https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
• https://www.npmjs.com/package/@vuetify/vite-plugin

I've opened an issue over there that resolves some build issues I had with it and vitesse: vuetifyjs/vuetify-loader#210

[userquin]

@athisun use alpha.11 or wait for new alpha.12: if you are using features like custom-icons, will not work, since they only supports esm. I have it working with @mdi/js but rebuilding vuetify@next on my fork generating also cjs for icons module.

To integrate with this template the best way to do it is installing the new vuetify vite plugin, for auto import components (no more import from vuetify/lib) and for custom styles, on i18n module on modules, since we need to add the vue-i18n stuff to vuetify:

"devDependencies": {
   "@vuetify/vite-plugin": "^1.0.0-alpha.2",
   <other-deps>
}

// vite.config.ts
import Vuetify from '@vuetify/vite-plugin'
plugins: [
   Vuetify({ styles: 'expose' }),
]

// src/modules/i18n.ts
import { createVuetify, VuetifyOptions } from 'vuetify'
export const install: UserModule = ({ app }) => {
  const i18n = createI18n({
    legacy: false,
    locale: 'en',
    messages,
  })

  const options: VuetifyOptions = {
     locale: createVueI18nAdapter({
        i18n,
        useI18n,
      }),
  }

  const { install } = createVuetify(options)

  app.use(i18n)
  app.use(install)
}

For icons you can use this instead, but it will not work (only with node and esm), for example using @mdi/js:

// src/modules/i18n.ts
import { createVuetify, VuetifyOptions } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'

export const install: UserModule = ({ app }) => {
  const i18n = createI18n({
    legacy: false,
    locale: 'en',
    messages,
  })

  const options: VuetifyOptions = {
      locale: createVueI18nAdapter({
        i18n,
        useI18n,
      }),
    icons: {
      defaultSet: 'mdi',
      aliases,
      sets: {
        mdi,
      },
    },
  }

  const { install } = createVuetify(options)

  app.use(i18n)
  app.use(install)
}

[userquin]

If you want to also use custom styles, add <root>/styles/vuetify.scss (you need to configure styles: 'expose' on vuetify vite plugin):

@use 'vuetify/styles' with (
  $color-pack: false,
  $alert-padding: 24px,
  $utilities: false,
);

and add it tosrc/main.ts

// src/maint.ts
...
// windicss utilities should be the last style import
import 'virtual:windi-utilities.css'
// windicss devtools support (dev only)
import 'virtual:windi-devtools'
// vuetify
import './styles/vuetify.scss'

const routes = setupLayouts(generatedRoutes)
...

You need to update the vuetify vite plugin to 1.0.0-alpha.5.

[bekreativ]

Hello everybody,

I just start to use this Vitesse template to migrate my existing VueJs app. In this app I use Vuetify, and I have some trouble to install Vuetify in Vitesse template.

I'm not sure to understand the steps to installe the vuetify vit plugin.

Maybe, I miss some steps, because I had errors during install.

Thanks, and have a nice day.

[Zehir]

I dont know if you was able to make it work but this is what I did.

Edit : The first version was not working for build, there is the new one

First install Vuetify 3 and some other packages

pnpm i vuetify@next
pnpm i sass -D
pnpm i @vuetify/vite-plugin

In the file vite.config.ts import the Viefity3 Resolver from unplugin-vue-components

import Vuetify from '@vuetify/vite-plugin'

Then add Vuetify({}), to the plugins definition

    Vue({
      include: [/\.vue$/, /\.md$/],
      reactivityTransform: true,
    }),

    Vuetify({}),

Create the vuetify.ts module in src/modules/vuetify.ts

import 'vuetify/styles/main.sass'

import { createVuetify } from 'vuetify'
import { type UserModule } from '~/types'

// Import Vuetify
export const install: UserModule = ({ app }) => {
  const vuetify = createVuetify({
    theme: {
      // defaultTheme: 'dark',
    },
  })

  app.use(vuetify)
}

Update the App.vue template.

<template>
  <v-app>
    <router-view />
  </v-app>
</template>

Update the layouts/default.vue template.

<template>
  <v-navigation-drawer app>
    <!-- -->
  </v-navigation-drawer>

  <v-app-bar app>
    <!-- -->
  </v-app-bar>

  <!-- Sizes your content based upon application components -->
  <v-main>
    <!-- Provides the application the proper gutter -->
    <v-container fluid>
      <!-- If using vue-router -->
      <router-view />
    </v-container>
  </v-main>

  <v-footer app>
    <!-- -->
  </v-footer>
</template>

[tsxoxo]

@Zehir Thank You for sharing your setup and instructions! Helped me get vite + vuetify 3 beta working!

---

For future ppl

• I remixed this solution with this setup from a Stack Overflow question --- helpful because it leaves out UserModule, which I didn't have and didn't know how to set up 😁

[Zehir]

You also want to add Vuetify in the no ssr option in the vite settings :
https://github.com/Zehir/deconz-ruler/blob/38140918e08ef304bdc06fe1d5431bc783ffe8d2/vite.config.ts#L151

You can also check my project to check jow I setup everything.

@Return180bpm About the Usermodule it's from the vitesse template : https://github.com/antfu/vitesse/blob/main/src/types.ts