Vuetify Skilld

vuetify@4.0.1

Material Design component framework for Vue 3. Source citations like lib/framework.js:15 refer to the prepared vuetify@4.0.1 package (package.json:4).

Environment limits

• Vue ^3.5.0 peer dependency (package.json:208). No Vue 2 support; Vuetify 2 is EOL (README.md:274).
• ESM only: "type": "module" (package.json:32).
• Optional peers: vite-plugin-vuetify >=2.1.0, webpack-plugin-vuetify >=3.1.0, typescript >=4.7 (package.json:205).
• Modern browsers, Safari 13+ with polyfills, minimum design width 320px (README.md:159).
• Default font is Roboto; you must add it yourself, e.g. @fontsource/roboto (https://vuetifyjs.com/getting-started/installation/).

Setup

Vite with automatic treeshaking (preferred). The vuetify plugin must come after the vue plugin:

// vite.config.js
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'
export default defineConfig({ plugins: [vue(), vuetify()] })

// src/plugins/vuetify.js
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
export default createVuetify({
  // components, directives not needed with the loader plugin
})

Without a loader plugin, register manually; wildcard imports include everything and slow development builds:

import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
createVuetify({ components, directives })

createVuetify accepts aliases, blueprint, components, date, defaults, directives, display, goTo, icons, locale, ssr, theme and returns { install, unmount, defaults, display, theme, icons, locale, date, goTo } (lib/framework.js:15). Install with app.use(vuetify); wrap the app in a single <v-app> root.

For SSR frameworks (Nuxt, vite-ssr) set ssr: true so display values render correctly (https://vuetifyjs.com/getting-started/installation/).

Scaffolding: pnpm create vuetify / npm create vuetify@latest (README.md:44).

CDN bundle with everything included: vuetify/dist/vuetify.js (package.json:35).

Components

• Prefer imports from vuetify/components/<Group> over vuetify/components (loads only needed styles in dev).
• Labs components are NOT production ready; import from vuetify/labs/<Name> or vuetify/labs/components. In 4.0.1 labs holds: VAvatarGroup, VColorInput, VCommandPalette, VDateInput, VFileUpload, VIconBtn, VMaskInput, VPicker, VPie, VStepperVertical, VPullToRefresh, VVideo (lib/labs/components.js:1).
• Dynamic <component :is> is invisible to the loader plugin; import those components manually (https://vuetifyjs.com/features/treeshaking/).
• Full inventory and export paths: references/exports.md

Configuration

• Theme: the v4 default is system (follows prefers-color-scheme), not light (lib/composables/theme.js:10). Pin it with theme: { defaultTheme: 'light' } if system switching is unwanted.
• Defaults: set prop defaults per component with createVuetify({ defaults: { VBtn: { ... } } }). class and style work only on component keys, never in the global key (https://vuetifyjs.com/features/global-configuration/).
• Display: v4 breakpoints changed; defaults are sm 600, md 840, lg 1145, xl 1545, xxl 2138 (lib/composables/display.js:10).
• Icons: default set is mdi and expects the @mdi/font stylesheet, or use mdi-svg for bundled SVG icons (https://vuetifyjs.com/features/icon-fonts/).
• Dates: default adapter wraps native Date; swap with any date-io adapter (https://vuetifyjs.com/features/dates/).
• Blueprints: createVuetify({ blueprint: md3 }) applies a design-system preset; explicit options override the blueprint (lib/framework.js:15, lib/blueprints/index.js:1).
• Details and examples: references/configuration.md

Composables

All exported from the vuetify entry point (lib/composables/index.js:1): useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, useHotkey, useMask.

<script setup>
import { useTheme } from 'vuetify'
const theme = useTheme()
theme.toggle() // light <-> dark
</script>

For hotkeys prefer the cmd modifier (useHotkey('cmd+s', save)); it resolves to Command on Mac and Control elsewhere (lib/composables/hotkey/key-aliases.js:10).

Full API per composable: references/composables.md