vuetify Documentation

File: README.md Copy Chapter

🖥️ Documentation Copy Section

To check out the documentation, visit vuetifyjs.com.

⚡ Quick Start Copy Section

Getting started with Vuetify is easy. To create a new project, choose your package manager and run one of the following commands:

Using pnpm

pnpm create vuetify

Using yarn

yarn create vuetify

Using npm

npm create vuetify@latest

Using bun

bun create vuetify

For more information on how to get started, such as using Nuxt or Laravel, check out the official Installation guide.

💖 Supporting Vuetify Copy Section

Vuetify is a MIT licensed project that is developed and maintained by the Core Team. Sponsor Vuetify and receive some awesome perks and support Open Source Software at the same time! 🎉

What's the difference between GitHub Sponsors and OpenCollective? Copy Section

Funds donated through GitHub Sponsors directly support John Leider and the ongoing development and maintenance of Vuetify. Funds donated via Open Collective are managed with transparent expenses and will be used for compensating work and expenses for Core team members. Your name/logo will receive proper recognition and exposure by donating on either platform.

**Special Sponsor**

**Diamond Sponsors**

**Platinum Sponsors**

🚀 Introduction Copy Section

Vuetify is a no design skills required UI Library with beautifully handcrafted Vue Components. No design skills required — everything you need to create amazing applications is at your fingertips. Vuetify has a massive API that supports any use-case. Some highlights include:

• Customizable: Extensive customization options with SASS/SCSS and Default configuration and Blueprints
• Responsive Layout: The default configuration of Vuetify components is responsive, allowing your application to adapt to different screen sizes.
• Theme System: A powerful color system that makes it easy to style your application with a consistent color palette.
• Vite Support: Smaller bundle sizes with automatic tree-shaking
• min. 6 months Long-term support for Major releases
• Internationalization: 42+ supported languages

Browser Support

Vuetify supports all modern browsers, including Safari 13+ (using polyfills). Components are designed for a minimum width of 320px.

🌎 Vuetify Ecosystem Copy Section

Resources

🙋‍♂️ Questions Copy Section

For help and support questions, please use our Discord community. This issue list of this repo is exclusively for bug reports and feature requests.

🐛 Issues Copy Section

Use our Issue generator to report bugs and request new features.

Please make sure to read the Important Information before opening an issue. Issues not confirming to the guidelines may be closed immediately.

2️⃣ Vuetify 2 Support
Vuetify 2 is now End Of Life (EOL) and is no longer supported, even for security issues. Commercial support for this version is available from our partner, HeroDevs.

📝 Changelog Copy Section

Detailed changes for each release are documented in the release notes.

💁‍♂️ Contributing Copy Section

Developers interested in contributing should read the Code of Conduct and the Contribution Guide.

Please do not ask general questions in an issue. Issues are only to report bugs, suggest
enhancements, or request new features. For general questions and discussions, ask in the community chat.

To help you get you familiar with our contribution process, we have a list of good first issues that contain bugs which have a relatively limited scope. This is a great place to get started. If you have any questions, please join us on the community chat.

We also have a list of help wanted issues that you might want to check.

📑 License Copy Section

Vuetify is available under the MIT software license.

Copyright (c) 2016-present Vuetify, LLC

This project exists thanks to all the people who contribute 😍!

File: packages/docs/src/pages/en/getting-started/browser-support.md Copy Chapter

meta:
title: Browser support
keywords: vuetify browser support
related:

• /getting-started/installation/
• /introduction/why-vuetify/
• /features/sass-variables/

Browser support

Vuetify 4 is a next generation framework that takes advantage of the latest web technology features and requires an evergreen browser to function.

Browsers Copy Chapter

This is not an exhaustive list of compatible browsers, but the main targeted ones. If you are using a browser that is not listed here, it is not officially supported.

• All browsers on iOS use WebKit and have the same support as Safari
  ** Some components may have incorrect colors due to lack of support for relative color syntax (e.g. rgb(from ...)). VNumberInput locale-aware grouping requires Intl.NumberFormat with string useGrouping options (Chrome 106+, Firefox 115+).

This table is updated with minor releases of Vuetify. Chrome, Firefox, and Safari will be supported at least two years back from the Vuetify x.x.0 release date.
Current start date is December 2023.

Support for older browsers may be possible with additional polyfills and PostCSS plugins, but has not been tested and is not guaranteed. If you need to support older browsers we recommend using Vuetify 2 or 3.

File: packages/docs/src/pages/en/getting-started/contributing.md Copy Chapter

meta:
title: Contributing
keywords: contribute, contributing, feature request
related:

• /getting-started/unit-testing/
• /about/code-of-conduct/
• /introduction/roadmap/

Contributing

Vuetify is made possible by an amazing community that submits issues, creates pull requests, and provides invaluable feedback.

It is our job to enable you to create amazing applications. A lot of the time, you come across something that can be made better. Maybe you find a bug, or you have an idea for additional functionality. That's great! It's as easy as cloning the Vuetify repository to get started working in a development environment.

Reporting Issues Copy Chapter

The issue list of this repo is exclusively for bug reports and feature requests. Non-conforming issues will be closed immediately. Before reporting an issue:

• Search for similar issues, it may have been answered already.

  If a similar issue already exists, you do not need to open another issue for this, if you want to help with it in any way, you can help by giving appropriate information in the already existing issue.

• Try to reproduce with the latest version in Vuetify Play or a repository that can be cloned to produce the expected behavior.
• Make sure that the reproduction is MINIMAL and CONCISE

These steps ensure that we have all the information necessary to quickly triage and resolve your issue. Once your reproduction is complete, submit a new issue using the Vuetify Issue Creator. Using this issue creator is required, otherwise the issue will be closed automatically.

When writing an issue please provide as much detail as possible. Note that "reproduction steps" should be a series of actions another developer should take after clicking your reproduction link, not a recollection of how you discovered the bug.

Issues that are convoluted and lacking a proper reproduction may be closed by a member of the Core Team. For additional questions regarding reporting issues and creating reproductions, join the official Vuetify Discord community.

::: tip
When you create a reproduction, exclude all elements, properties, and data variables that are not needed for the reproduction. This helps drastically reduce the time it takes to triage the issue and ultimately resolve it.
:::

In the next section you will learn step-by-step how to set up your local environment and how to configure Vuetify for development.

Local development Copy Chapter

The Vuetify repository is a lerna monorepo that connects the vuetify library, docs, api generator, and reduces the friction of working with multiple projects at once. The following guide is designed to get you up and running in no time.

Setting up your environment Copy Section

We recommend using FNM (with all four options enabled) to automatically set up and use the exect node and pnpm versions specified in package.json.

Required software:

• Git >v2.20
• Node.js 24
• pnpm

Some of our dependencies use node-gyp to build themselves. You don't need to install node-gyp itself but may require additional tools, especially on windows. See the node-gyp documentation for more details.

Once you have everything installed, clone the repository:

# Using HTTPS
git clone https://github.com/vuetifyjs/vuetify.git

# Using SSH
git clone [email protected]:vuetifyjs/vuetify.git

::: info
Which remote URL should I use?
:::

Then install dependencies and perform an initial build to link all the packages together:

# Navigate to the vuetify folder
cd vuetify

# Install all project dependencies
pnpm i

# Build the packages
pnpm build vuetify
pnpm build api

The build process compiles all the Vuetify packages for development and may take a while (grab some ☕). Once the packages are built, you can start developing.

Vuetify Copy Section

The Vuetify library is located in packages/vuetify. In packages/vuetify/dev you will find a Playground.vue file; running pnpm dev from the project root will start a dev server on localhost:8090 with this file loaded. Test your changes in the Playground.vue file you copied, then paste its contents into your pull request when you're ready.

You can also test Vuetify in your own project using pnpm link:

• Navigate to packages/vuetify
• Run pnpm link --global
• Navigate to your project's directory
• Run pnpm link --global vuetify
• Clear Vite's cache by deleting node_modules/.vite folder

If your project is using vuetify-loader you will have to run pnpm build:lib in the vuetify package to see changes, otherwise you can use pnpm watch for incremental builds.

Playground.vue

The Playground file is a cleanroom used for Vuetify development and is the recommended way to iterate on changes within the framework.

<template>
  <v-app>
    <v-container>
      
    </v-container>
  </v-app>
</template>

<script setup>
  //
</script>

Automated testing

Vuetify uses Vitest for unit tests, Vitest browser mode with Playwright for component interaction tests, and Vizzly for visual regression tests.

• pnpm test - run all tests
• pnpm test:unit - run only unit tests
• pnpm test:browser - run only browser tests
• pnpm test:open - run browser tests in a chrome window
  • use this if you need devtools to debug a failing test
• pnpm test:screen - run only screenshot tests, saves a report to http://localhost:47392/
• pnpm tdd - start the vizzly dev server, follow with test, test:screen, test:browser, or test:open to actually run tests. Screenshot baselines and diffs can be managed and viewed at http://localhost:47392/
  • run pnpm tdd:stop when you're done to kill the background process

The test:* commands all accept a list of test names to filter by, eg. pnpm test textfield textarea to only run VTextField and VTextarea tests.

Visual regression workflow

• Checkout the base branch (master or dev)
• Run pnpm tdd
• Visit http://localhost:47392/stats and click "Reset baselines"
• Run pnpm test:screen
• Click "Accept all changes"
• Checkout your PR branch
• Run pnpm test:screen again
• Any visual differences will be shown on http://localhost:47392

Documentation Copy Section

The documentation is located in packages/docs but also uses some files from packages/api-generator. A dev server for the documentation can be started by running pnpm dev docs from the project root and will be available on localhost:8095 by default.

If you want to see changes from Vuetify in the documentation you need to run pnpm build:lib in the vuetify package before starting the documentation server.

API Generator Copy Section

All api descriptions are managed via the api-generator package. This package must be built prior to running or building the docs. Descriptions can be updated via the JSON files located in the src/locale/en folder. Some general guidelines to follow when handling api descriptions are:

• en language only. Translations are handled via Crowdin.
• Prop names should be formatted using bold markdown eg: prop-name.
• Slot and other code related text should be formatted using code markdown eg: some-slot.
• Description keys should be in camelCase, except for slot keys which should be kebab-case.
• Put keys in alphabetical order.
• Descriptions utilize a hierarchy of generic.json < Source.json < Component.json to reduce duplication. Source can be viewed using the Developer Mode in docs settings.

Adding API Documentation

When creating a new component (or composable, though this is typically done by the Vuetify team), you need to add a corresponding JSON file named ComponentName.json in packages/api-generator/src/locale/en/. This file should contain descriptions for props, slots, events, and exposed methods. After adding or updating JSON files, run pnpm build api to regenerate the dist language files. Keep in mind:

• Changes to Vuetify require a rebuild before building the API
• The API must be built before running the documentation server

Enabling developer mode in the documentation settings will allow you to see the source of truth on API description pages.

Submitting Changes / Pull Requests Copy Section

First you should create a fork of the vuetify repository to push your changes to. Information on forking repositories can be found in the GitHub documentation.

Then add your fork as a remote in git:

# Using HTTPS
git remote add fork https://github.com/YOUR_USERNAME/vuetify.git

# Using SSH
git remote add fork [email protected]:YOUR_USERNAME/vuetify.git

Choosing a base branch

Before starting development you should know which branch to base your changes on. If in doubt use master as changes to master can usually be merged into a different branch without rebasing.

# Switch to the desired branch
# v4
git switch master
# v3
git switch v3-stable

# Pull down any upstream changes
git pull

# Create a new branch to work on
git switch --create fix/1234-some-issue

::: warning
Never commit directly to the base branches, always create a feature branch to work on
:::

Commit your changes following our guidelines, then push the branch to your fork with git push -u fork and open a pull request on the Vuetify repository following the provided template.

::: error
Pull requests that include unrelated commits or your local merges will be CLOSED without notice
:::

Working with GitHub Copy Chapter

Vuetify's repository lives on GitHub and is the primary location for all development related information.

Some of the more notable links within these services include:

GitHub

• Issues
• Discussions

The following sections are designed to familiarize you with our standard operating procedures for Vuetify development.

Issue triage Copy Section

With the size and popularity of Vuetify has come a constant influx of new issues, questions, and feature requests. To organize these requests the Core Team developed tools to aid not only the triaging of issues, but creating them as well.

The Issues board makes heavy use of GitHub's label system with some light automation, such as adding the triage label to new issues.

For Docs - Language

We do not accept PRs for any documentation changes pertaining to languages other than en. All changes for languages other than en are to be submitted through our Crowdin project. You can help translate in one of 2 ways:

• Using in-context translation service directly through the documentation site. To get started simply select Help Translate in the language drop down in the docs.
• Directly through the Crowdin project.

Note: Languages will not be added to the language drop down on the docs site until they have at least 50% of their translations completed.

Requesting new features Copy Section

Pending

Commit guidelines Copy Section

All commit messages are required to follow the conventional-changelog standard using the angular preset. This standard format consists of 2 types of commits:

• With scope: <type>(scope): <subject>

  bash Copy

  fix(VSelect): don't close when a detachable child is clicked
  
  fixes #12354

• Without scope: <type>: <subject>

  bash Copy

  docs: restructure nav components
  
  Moved duplicated functionality in drawer to reduce
  scope of responsibility

General Rules

• Commit messages must have a subject line and may have body copy. These must be separated by a blank line.

• The subject line must not exceed 60 characters

• The subject line must be written in imperative mood (fix, not fixed / fixes etc.)

• The body copy must include a reference all issues resolved:

  bash Copy

  docs(sass-variables): fix broken link to api
  
  resolves #3219
  resolves #3254

• The body copy must be wrapped at 72 characters

• The body copy must only contain explanations as to what and why, never how. The latter belongs in documentation and implementation.

Commit types

The following is a list of commit types used in the angular preset:

• feat: Commits that result in new features or functionalities. Backwards compatible features will release with the next MINOR whereas breaking changes will be in the next MAJOR. The body of a commit with breaking changes must begin with BREAKING CHANGE, followed by a description of how the API has changed.
• fix: Commits that provide fixes for bugs within vuetify's codebase.
• docs: Commits that provide updates to the docs.
• style: Commits that do not affect how the code runs, these are simply changes to formatting.
• refactor: Commits that neither fixes a bug nor adds a feature.
• perf: Commits that improve performance.
• test: Commits that add missing or correct existing tests.
• chore: Other commits that don't modify src or test files.
• revert: Commits that revert previous commits.

File: packages/docs/src/pages/en/getting-started/frequently-asked-questions.md Copy Chapter

meta:
title: Frequently asked questions
keywords: frequently asked questions, faq
related:

• /introduction/why-vuetify/
• /getting-started/contributing/
• /getting-started/installation/

Frequently asked questions

Stuck on a particular problem? Check some of these common gotchas before creating a ticket. If you still cannot find what you are looking for, you can submit an issue on GitHub or ask in our community.

import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    server: {
      deps: {
        inline: ['vuetify'],
      },
    },
  },
})

pnpm add @vue/test-utils vitest resize-observer-polyfill --save-dev

yarn add @vue/test-utils vitest resize-observer-polyfill --dev

npm install @vue/test-utils vitest resize-observer-polyfill --save-dev

bun add @vue/test-utils vitest resize-observer-polyfill --dev

import { mount } from '@vue/test-utils'
import { expect, test } from 'vitest'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import HelloWorld from '../../src/components/HelloWorld.vue'

const vuetify = createVuetify({
  components,
  directives,
})

global.ResizeObserver = require('resize-observer-polyfill')

test('displays message', () => {
  const wrapper = mount({
    template: '<v-layout><hello-world></hello-world></v-layout>'
  }, {
    props: {},
    global: {
      components: {
        HelloWorld,
      },
      plugins: [vuetify],
    }
  })

  // Assert the rendered text of the component
  expect(wrapper.text()).toContain('Components')
})

export function render<C> (
  component: C,
  options?: RenderOptions<C> | null,
  vuetifyOptions?: VuetifyOptions
): RenderResult {
  const vuetify = createVuetify(mergeDeep({ icons: { aliases } }, vuetifyOptions))

  const defaultOptions = {
    global: {
      stubs: {
        transition: false,
        'transition-group': false,
      },
      plugins: [vuetify],
    },
  }

  const mountOptions = mergeDeep(defaultOptions, options!, (a, b) => a.concat(b))

  return _render(component, mountOptions)
}

<v-btn data-testid="submit-btn">Submit</v-btn>

const { getByTestId } = render(MyComponent)
expect(getByTestId('submit-btn')).toBeInTheDocument()

# Claude Code
claude mcp add --transport http vuetify-mcp https://mcp.vuetifyjs.com/mcp

# Configure for hosted remote server
npx -y @vuetify/mcp config --remote

# Or configure for local installation
npx -y @vuetify/mcp config

Using the vuetify-mcp server, scan this project for Vuetify 3 to 4 breaking changes. List each issue found with the file, line number, and recommended fix.

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

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

@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>

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

// @layer declaration comes first
import './styles/layers.css'
import 'vuetify/styles'
import { createApp } from 'vue'

@layer vuetify-core;
@layer vuetify-components;
@layer vuetify-overrides;

@layer my-app-base;
@layer my-app-components;

@layer vuetify-utilities;

@layer my-app-utilities;

@layer vuetify-final;

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,
  ),
);

export default createVuetify({
+ theme: {
+   defaultTheme: 'light',
+ },
})

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

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

import { createVuetify } from 'vuetify'

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

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

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

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

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

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

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

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

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

<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>

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

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

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

<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>

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

- <v-row align="center" justify="space-between">
+ <v-row class="align-center justify-space-between">

- <v-row align-sm="start" align-md="center" justify-lg="end">
+ <v-row class="align-sm-start align-md-center justify-lg-end">

- <v-col order="2" order-md="1">
+ <v-col class="order-2 order-md-1">

- <v-col align-self="center">
+ <v-col class="align-self-center">

- <v-row dense>
+ <v-row density="compact">

- <v-col offset="3" offset-md="2">
+ <v-col offset="3" offset-md="2">

- 
+

- $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;
}

export default defineConfig({
  optimizeDeps: {
    include: [
      'vuetify/components/VOverlay',
      'vuetify/components/VDialog',
      'vuetify/components/VMenu',
      'vuetify/components/VSelect',
      'vuetify/components/VTooltip',
    ],
  },
})

rm -rf node_modules/.vite

createVuetify({
  defaults: {
    VBtn: { color: 'green' },
  },
})

<VDefaultsProvider :defaults="{ VBtn: { color: undefined }}">
  <VBtn />
</VDefaultsProvider>

<template>
  <v-menu>
    <template v-slot:activator="{ props }">
      <v-btn
        text="Click me"
        v-bind="props"
      ></v-btn>
    </template>

    <v-list>
      <v-list-item @click="method">
        <v-list-item-title>Option 1</v-list-item-title>
      </v-list-item>

      <v-list-item disabled>
        <v-list-item-title>Option 2</v-list-item-title>
      </v-list-item>

      <v-list-item @click="method">
        <v-list-item-title>Option 3</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-menu>
</template>

Click me