Vuetify Treeshaking Components With Nuxt V3

Dec 28, 2022
Reduce Vuetify Size

Based on Setup Vuetify V2 With Nuxt V3.

Edit nuxt.config.ts

import vuetify from 'vite-plugin-vuetify'export default defineNuxtConfig({  css: ['vuetify/lib/styles/main.sass'],  modules: [    async (options, nuxt) => {      nuxt.hooks.hook('vite:extendConfig', config => config.plugins.push(        vuetify()      ))    }  ]})

Edit plugins/vuetify.ts

import { createVuetify } from 'vuetify'// import * as components from 'vuetify/components'// import * as directives from 'vuetify/directives'export default defineNuxtPlugin(nuxtApp => {  //  //  const vuetify = createVuetify({    // theme: false,   })  nuxtApp.vueApp.use(vuetify)})

If you don't like/trust treeshaking, you can also import component manually.

<script setup>import { VApp } from 'vuetify/components/VApp'import { VAppBar } from 'vuetify/components/VAppBar'import { VBtn } from 'vuetify/components/VBtn'import { VContainer } from 'vuetify/components/VGrid'import { VFooter } from 'vuetify/components/VFooter'import { VSheet } from 'vuetify/components/VSheet'</script>

NOTE: Treeshaking only apply to dynamic import of components and it's CSS, it still import the entire base CSS and Themes. You might want to explore Replace Vuetify Utilities And Color Pack With Tailwind CSS.


❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.