Skip to main content

​
Upgrading to v4

Vuetify 4.0.0 introduces significant improvements and optimizations while maintaining the core principles that make Vuetify powerful. This guide will help you migrate your application from Vuetify 3 to Vuetify 4.

​
Prerequisites

Before starting the migration, ensure your project meets these requirements:
  • Vue.js: Version 3.5.0 or higher
  • Node.js: Version 24.11.1 or higher
  • TypeScript: Version 4.7 or higher (optional but recommended)
  • Build Tool: Vite or Webpack with the appropriate Vuetify plugin

​
Migration Steps

1
Update Dependencies
2
Update your package.json to use Vuetify 4:
3
{
  "dependencies": {
    "vuetify": "^4.0.0",
    "vue": "^3.5.0"
  },
  "devDependencies": {
    "vite-plugin-vuetify": "^2.1.0"
  }
}
4
Then install the updated dependencies:
5
pnpm install
# or
npm install
# or
yarn install
6
Update Plugin Configuration
7
If you’re using Vite, ensure your plugin configuration is up to date:
8
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'

export default defineConfig({
  plugins: [
    vue(),
    vuetify({
      autoImport: true,
      styles: {
        configFile: 'src/styles/settings.scss',
      },
    }),
  ],
})
9
Update Vuetify Instance
10
Review your Vuetify instance creation. The basic structure remains the same, but verify your configuration:
11
// src/plugins/vuetify.ts
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: 'light',
  },
})
12
Update Module Imports
13
Vuetify 4 uses ES modules exclusively. Update your imports to use the new export structure:
14
Component Imports:
15
// ✅ Recommended - Tree-shakable
import { VBtn, VCard } from 'vuetify/components'

// ✅ Also valid - Auto-import with plugin
// Components automatically available when using vite-plugin-vuetify
16
Style Imports:
17
// Main styles
import 'vuetify/styles'

// Or specific style bundles
import 'vuetify/styles/core'
import 'vuetify/styles/utilities'
import 'vuetify/styles/colors'
18
Utility Imports:
19
import { useTheme, useDisplay } from 'vuetify'
import colors from 'vuetify/util/colors'
20
Review Breaking Changes
21
Vuetify 4 includes breaking changes that may require code updates in your application.
22
Common breaking changes to review:
23
  • Component Props: Some component props may have been renamed or removed
  • SASS Variables: Variable naming and structure may have changed
  • Composables: API updates in composable functions
  • Theme Configuration: Enhanced theme system with new options
    • 24
    Use the ESLint plugin to help identify outdated patterns:
    25
    pnpm add -D eslint-plugin-vuetify
    26
    // .eslintrc.js
module.exports = {
  plugins: ['vuetify'],
  rules: {
    'vuetify/no-deprecated-components': 'error',
    'vuetify/no-deprecated-props': 'error',
  },
}
    27
    Update SASS/SCSS Variables
    28
    If you’re using custom SASS variables, update your settings file:
    29
    // src/styles/settings.scss
@use 'vuetify/settings' with (
  $utilities: (
    'rounded': true,
    'elevation': true,
  ),
);
    30
    Test Your Application
    31
    Thoroughly test your application after migration:
    32
  • Component Rendering: Verify all components render correctly
  • Responsive Layouts: Test across different screen sizes
  • Theme Switching: Ensure theme transitions work properly
  • Forms & Validation: Test all form interactions
  • Navigation: Verify routing and navigation components
    • 33
    Optimize Bundle Size
    34
    Vuetify 4 includes improved tree-shaking. Verify your build configuration:
    35
    pnpm build
    36
    Review the bundle analysis to ensure optimal tree-shaking is occurring. With proper configuration, Vuetify 4 should produce smaller bundles than v3.

    ​
    Component-Specific Changes

    ​
    Date & Time Components

    Date adapter imports have changed: 
    // Before (v3)
import { VuetifyDateAdapter } from 'vuetify/labs/date/adapters/vuetify'

// After (v4)
import { VuetifyDateAdapter } from 'vuetify/date/adapters/vuetify'

    ​
    Lab Components

    Some lab components may have graduated to stable: 
    // Check if components have moved from labs to core
import { VDataTable } from 'vuetify/components' // If stable
import { VDataTable } from 'vuetify/labs/components' // If still in labs

    ​
    TypeScript Support

    Vuetify 4 includes enhanced TypeScript support. Update your type declarations: 
    import type { ThemeDefinition } from 'vuetify'

const customTheme: ThemeDefinition = {
  dark: false,
  colors: {
    primary: '#1976D2',
    secondary: '#424242',
  },
}

    ​
    Performance Optimizations

    Vuetify 4 includes several performance improvements:
    • Automatic Tree-Shaking: Components are automatically tree-shaken when using Vite
    • Smaller Bundle Sizes: Optimized component code reduces overall bundle size
    • Improved SSR: Better server-side rendering support
    • CSS Optimization: Enhanced CSS generation and minification

    ​
    Getting Help

    If you encounter issues during migration:

    ​
    Next Steps

    After successfully migrating to Vuetify 4:
    • Explore new features and components
    • Review the Release Notes for detailed changes
    • Optimize your bundle size using the build analysis tools
    • Consider adopting new patterns and best practices
    • Review the Long-term Support policy
    Keep your dependencies up to date to receive bug fixes, security patches, and new features.

    Build docs developers (and LLMs) love

    Get started for freeTalk to us