#Upgrade Guide

#Style entry points

There are now pre-compiled entry points for the most common style changes. If you have a Sass file that only sets $color-pack: false or $utilities: false you can replace it with import 'vuetify/styles/core'. See Style entry points for more information.

#CSS reset

The CSS reset has been mostly removed, with style normalisation being moved to individual components instead. You can inspect the exact changes to learn more. Here is the high level overview:

• global * { padding: 0; margin: 0; } is gone - no longer resets all elements
• <button>, <input>, <select> have their browser-native borders and background colors.

If you notice browser styles adding unnecessary spaces and impact text size, it is recommended to assess the scope of visual regression and selectively apply spacing resets:

@layer vuetify-core.reset {
  ul, ol, figure, details, summary {
    padding: 0;
    margin: 0;
  }

  h1, h2, h3, h4, h5, h6, p {
    margin: 0;
  }
}

Restoring most of the previous reset styles would be heavy-handed, but will get the job done as well.

@layer vuetify-core.reset {
  * { padding: 0; margin: 0; }
  a:active, a:hover { outline-width: 0; }
  code, kbd, pre, samp { font-family: monospace; }
  pre { font-size: 1em; }
  small { font-size: 80%; }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub { bottom: -0.25em; }
  sup { top: -0.5em; }
  textarea { resize: vertical; }
  button,
  input,
  select,
  textarea {
    background-color: transparent;
    border-style: none;
  }
  select {
    -moz-appearance: none;
    -webkit-appearance: none;
  }
  legend {
    display: table;
    max-width: 100%;
    white-space: normal;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@4/dist/vuetify.css">

<style>
  @layer vuetify-core.reset {
    ul, ol, figure, details, summary { padding: 0; margin: 0; }
    h1, h2, h3, h4, h5, h6, p { margin: 0; }
  }
</style>

#Layers

Cascade layers are now being used everywhere. If you have other styles that are not using @layer they will now always take priority over vuetify.

If you were already using $layers: true in Vuetify 3, there are now five top-level layers instead of one.

- @layer base, vuetify, overrides;
+ @layer base, vuetify-core, vuetify-components, vuetify-overrides, vuetify-utilities, vuetify-final, overrides;

This can be used to easily interleave your own layers with ours:

@layer vuetify-core, base, vuetify-components, vuetify-overrides, overrides, vuetify-utilities, utilities, vuetify-final;

If you had any usages of @layer vuetify.* in your styles they should be replaced with your own layer name with an appropriate declaration order.

#Typography

Codemod Available

The typography system has been updated from Material Design 2 to Material Design 3. The following replacements will have some minor font size differences:

For detailed mapping and migration instructions, see Typography Migration.

#Breakpoints

The default breakpoints have been reduced to better match modern device sizes:

One of the components specifically impacted by those changes is VContainer. See the detailed information about those changes below.

v3 breakpoints can be restored with the following configuration:

export default createVuetify({
  display: {
    thresholds: {
      md: 960,
      lg: 1280,
      xl: 1920,
      xxl: 2560,
    },
  },
})

@use 'vuetify/settings' with (
  $grid-breakpoints: (
    'md': 960px,
    'lg': 1280px,
    'xl': 1920px,
    'xxl': 2560px,
  ),
);

#Elevation

Codemod Available

Elevation classes (shadows) have been updated to Material Design 3 which uses 6 levels (0-5) instead of 25 (0-24).

* “dp” (density-independent pixels) is a relative unit from Material Design

See Elevation migration for details and tips to restore legacy MD2 levels if needed.

#VBtn display

In Vuetify 3, VField’s layout was changed from display: flex to display: grid to better handle its internal elements. However, the grid implementation had limitations with gap control, so in Vuetify 4 we’ve reverted back to using display: flex.

The $button-stacked-icon-margin Sass variable has been removed and replaced with $button-stacked-gap. This change allows for more consistent and flexible spacing between elements within the field. If you modified this value, update its variable target:

  @use 'vuetify/settings' with (
-   $button-stacked-icon-margin: 8px,
+   $button-stacked-gap,
  );

#VBtn text-transform

The default text-transform of uppercase has been removed. To restore the previous behavior, set the text-transform prop to uppercase.

• Set it in the Sass variables for buttons:

@use 'vuetify/settings' with (
  $button-text-transform: 'uppercase',
)

• Set it as a global default:

import { createVuetify } from 'vuetify'

const vuetify = createVuetify({
  defaults: {
    VBtn: {
      class: 'text-uppercase',
      // or if you are using $utilities: false
      style: 'text-transform: uppercase;',
    },
  },
})

• Manually type uppercase letters:

- <v-btn>button</v-btn>
+ <v-btn>BUTTON</v-btn>

#VBadge

The $badge-dot-border-radius Sass variable has been changed from 4.5px to 50%. Both values produce the same result for the default dot size. If your app increases dot size and prefer them square-ish, you might want to undo the change.

@use 'vuetify/settings' with (
-  $badge-dot-border-radius: 4.5px,
+  $badge-dot-border-radius: 50%,
);

#VContainer

Container component won’t center the content vertically when paired with fill-height. If you depend on this behavior, you can supplement the missing styles with utility classes:

<v-container
-  class="fill-height"
+  class="fill-height d-flex align-center flex-wrap"
/>

#VCounter

VCounter is used to display the counter hint under VTextField, VTextarea and VFieldInput. The $counter-color and color was replaced in favor of opacity. If you modified this value, move it to target CSS class directly:

.v-counter {
  opacity: 1;
  color: /* your $counter-color */;
}

#VDatePicker

multiple="range" emits only the start and end dates instead of everything in between. Use something like date-fns’ eachDayOfInterval if you need all dates in the range.

- ['2023-09-28', '2023-09-29', '2023-09-30', '2023-10-01', '2023-10-02']
+ ['2023-09-28', '2023-10-02']

#VFileInput

Removed the $file-input-details-padding-inline Sass variable.

@use 'vuetify/settings' with (
-  $file-input-details-padding-inline: <value>
+  $input-details-padding-inline: <value>
);

#VForm

Codemod Available

Slot variables are no longer refs, read-only values passed to slots are now unwrapped:

  <VForm>
    <template #default="{ isValid, validate }">
      <VBtn @click="validate" text="validate" />
-     Form is {{ isValid.value ? 'valid' : 'invalid' }}
+     Form is {{ isValid ? 'valid' : 'invalid' }}
    </template>
  </VForm>

The following properties are affected:

• errors
• isDisabled
• isReadonly
• isValidating
• isValid
• items

#VRadioGroup

Removed the $radio-group-details-padding-inline Sass variable.

@use 'vuetify/settings' with (
-  $radio-group-details-padding-inline: <value>
+  $input-details-padding-inline: <value>
);

#VSelect/VCombobox/VAutocomplete

Codemod Available

item in slots has been renamed to internalItem for consistency with VList and VDataTable. item is still available but is now an alias for internalItem.raw which seems like the most common use case.

You can rename:

  <VSelect item-title="name">
-   <template #item="{ item, props }">
-     <VListItem v-bind="props" :title="item.title" />
+   <template #item="{ internalItem, props }">
+     <VListItem v-bind="props" :title="internalItem.title" />
    </template>
  </VSelect>

Or alias:

  <VSelect>
-   <template #item="{ item, props }">
+   <template #item="{ internalItem: item, props }">
      <VListItem v-bind="props" :title="item.raw.name" />
    </template>
  </VSelect>

Or remove .raw:

  <VSelect>
    <template #item="{ item, props }">
-     <VListItem v-bind="props" :title="item.raw.name" />
+     <VListItem v-bind="props" :title="item.name" />
    </template>
  </VSelect>

#VSnackbar

Codemod Available

Removed the multi-line prop and the $snackbar-multi-line-wrapper-min-height Sass variable. It can be replaced with min-height equivalent.

  <VSnackbar
    v-model="visible"
-    multi-line
+    min-height="68"
    :text="message"
  />

#VSnackbarQueue

Codemod Available

The default slot has been renamed to item. The slot props remain the same.

<v-snackbar-queue v-model="messages">
-  <template v-slot:default="{ item }">
+  <template v-slot:item="{ item }">
    <v-snackbar v-bind="item" />
  </template>
</v-snackbar-queue>

#VTextField

Removed the $text-field-details-padding-inline Sass variable.

@use 'vuetify/settings' with (
-  $text-field-details-padding-inline: <value>
+  $input-details-padding-inline: <value>
);

#Grid System (VRow and VCol)

The grid system has been refactored to use CSS gap instead of negative margins on rows and padding on columns. This change provides more flexibility and predictable spacing behavior.

- <v-col offset="3" offset-md="2">
+ <v-col offset="3" offset-md="2">  <!-- Props still work the same -->

- <div class="v-col offset-6">
+ <div class="v-col v-col-offset-6">

- $form-grid-gutter: $spacer * 2 !default;
+ $grid-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;

@use 'vuetify/settings' with (
  $avatar-margin-end: 8px;
  $avatar-margin-start: 8px;

  $icon-left-margin-left: 8px;
  $icon-margin-end: 8px;
  $icon-margin-start: 8px;

  $icon-btn-margin-start: 8px;
  $icon-btn-margin-end: 8px;
}