Vuetify

https://vuetifyjs.com/en/
Admin
Vuetify is a comprehensive UI framework for Vue.js, providing a rich set of beautifully crafted...
Tokens:938,118
Snippets:10,614
Trust Score:9.8
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Install Vuetify0 plugins (createThemePlugin, createBreakpointsPlugin, etc.)

Source: https://vuetifyjs.com/en/blog/announcing-vuetify0-alpha?one=settings

Shows a minimal Vuetify0 setup where plugins are added only as needed. Each plugin is optional and tree-shakeable. The example installs theme, breakpoints, locale, and storage plugins using the create* factory functions.

```javascript
import { createApp } from 'vue'
import {
  createBreakpointsPlugin,
  createThemePlugin,
  createLocalePlugin,
  createStoragePlugin,
} from '@vuetify/v0'

const app = createApp(App)

// Add only what you need
app.use(createThemePlugin({ default: 'light', themes: { light, dark } }))
app.use(createBreakpointsPlugin())
app.use(createLocalePlugin({ default: 'en', messages: { en, es } }))
app.use(createStoragePlugin())
```

--------------------------------

### Install Vuetify0 plugins with createApp

Source: https://vuetifyjs.com/en/blog/announcing-vuetify0-alpha

Shows the minimal Vuetify0 setup: import only the plugins you need and register them with app.use(). Each plugin is optional and tree-shakeable, so you can start with none and add as needed.

```javascript
import { createApp } from 'vue'
import {
  createBreakpointsPlugin,
  createThemePlugin,
  createLocalePlugin,
  createStoragePlugin,
} from '@vuetify/v0'

const app = createApp(App)

// Add only what you need
app.use(createThemePlugin({ default: 'light', themes: { light, dark } }))
app.use(createBreakpointsPlugin())
app.use(createLocalePlugin({ default: 'en', messages: { en, es } }))
app.use(createStoragePlugin())

```

--------------------------------

### CDN installation: Vuetify 4.2.3 URLs and full HTML example

Source: https://vuetifyjs.com/en/getting-started/installation?one=settings

CDN installation for Vuetify 4.2.3 from jsdelivr. The two URLs load the CSS and JS files, and the full HTML example shows how to include Vue and Vuetify scripts and mount the app. Note the placeholder {{ version }} in the example; replace it with the actual version number.

```html
https://cdn.jsdelivr.net/npm/vuetify@4.2.3/dist/vuetify.min.css
```

```html
https://cdn.jsdelivr.net/npm/vuetify@4.2.3/dist/vuetify.min.js
```

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <!-- ... -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@{{ version }]/dist/vuetify.min.css" />
  </head>
  <body>
    <div id="app">
      <v-app>
        <v-container>
          <v-text-field label="My field" />
        </v-container>
      </v-app>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@{{ version }}/dist/vue.global.prod.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@{{ version }}/dist/vuetify.min.js"></script>
    <script>
      const { createApp } = Vue
      const { createVuetify } = Vuetify
      const vuetify = createVuetify()
      const app = createApp()
      app.use(vuetify).mount('#app')
    </script>
  </body>
</html>
```

--------------------------------

### Install Vuetify0 with pnpm

Source: https://vuetifyjs.com/en/blog/announcing-vuetify0-v1?one=settings

Install the @vuetify/v0 package using pnpm. No plugin registration or global setup is required.

```bash
pnpm install @vuetify/v0

```

--------------------------------

### Get Started with Vuetify: bun create vuetify

Source: https://vuetifyjs.com/en?one=subscribe

Command to scaffold a new Vuetify application using bun. The latest version is 4.2.3.

```bash
bun create vuetify
```

--------------------------------

### create-vuetify interactive prompts output

Source: https://vuetifyjs.com/en/getting-started/installation

Example output shown after running the create-vuetify command, displaying the installation success message and the interactive prompts for project name, TypeScript, and package manager.

```text
success Installed "create-vuetify@x.x.x" with binaries:
    - create-vuetify

? Project name: ❯ vuetify-project // the folder to generate your application
? Use TypeScript?: ❯ No / Yes
? Would you like to install dependencies with yarn, npm, or pnpm?:
  ❯ yarn
    npm
    pnpm
    bun
    none

```

--------------------------------

### Start the development server with pnpm

Source: https://vuetifyjs.com/en/blog/building-with-nuxt-and-unocss?one=settings

Starts the Nuxt development server on localhost for local development.

```bash
pnpm dev

```

--------------------------------

### Navigate to project and start dev server

Source: https://vuetifyjs.com/en/blog/building-a-basic-nuxt-application-with-vuetify

After initialization, cd into the project directory and run npm run dev to start the local server. The server runs on port 3000 and can be accessed at http://localhost:3000.

```bash
cd vuetify-app

```

```bash
npm run dev

```

--------------------------------

### Install Vuetify CLI and initialize project

Source: https://vuetifyjs.com/en/features/css-utilities/overview

Install the latest Vuetify CLI globally and run the wizard to create a new project with optional TailwindCSS or UnoCSS integration.

```bash
pnpm add -g @vuetify/cli
vuetify init

```

--------------------------------

### Install Luxon adapter packages

Source: https://vuetifyjs.com/en/features/dates?one=settings

Install the @date-io/luxon and luxon packages using pnpm. This is the first step to use Luxon as the date adapter.

```bash
pnpm install @date-io/luxon luxon

```

--------------------------------

### Install Font Awesome 4 package

Source: https://vuetifyjs.com/en/features/icon-fonts

Install the Font Awesome 4 package locally using your package manager. The example shows pnpm.

```bash
pnpm add font-awesome@4.7.0 -D
```

--------------------------------

### Install dependencies and build packages

Source: https://vuetifyjs.com/en/getting-started/contributing

Navigate to the vuetify folder, install all project dependencies with pnpm, and build the vuetify and api packages. The build process may take a while.

```bash
# Navigate to the vuetify folder
cd vuetify

# Install all project dependencies
pnpm i

# Build the packages
pnpm build vuetify
pnpm build api

```

--------------------------------

### Install UnoCSS and Iconify package

Source: https://vuetifyjs.com/en/features/icon-fonts

Install the 'unocss' package and the Iconify package for your chosen icon library. The example uses Phosphor ('@iconify-json/ph') as a dev dependency.

```bash
pnpm add unocss @iconify-json/ph -D

```

--------------------------------

### Install Font Awesome 5 free package

Source: https://vuetifyjs.com/en/features/icon-fonts

Install the free Font Awesome 5 package locally using your package manager. The example shows pnpm.

```bash
pnpm add @fortawesome/fontawesome-free -D
```

--------------------------------

### Install and use Vuetify CLI commands

Source: https://vuetifyjs.com/en/blog/december-2025-update

Install the Vuetify CLI globally with pnpm, then use its commands to initialize a new project, create a v0 project, add ESLint, add MCP server configuration, and update Vuetify packages.

```bash
# Install the CLI globally
pnpm add -g @vuetify/cli

# Initialize a new project
vuetify init my-app

# Or create a v0 project directly
pnpm create vuetify0@latest

# Add ESLint to an existing project
vuetify add eslint

# Add MCP server configuration
vuetify add mcp

# Update Vuetify packages
vuetify update
```

--------------------------------

### Toggle fullscreen with useDisplay in setup

Source: https://vuetifyjs.com/en/customizing/breakpoints

Use the useDisplay composable in Vue 3's setup function to get the mobile breakpoint value and bind it to the fullscreen property of v-dialog.

```html
<template>
  <v-dialog :fullscreen="mobile">
    ...
  </v-dialog>
</template>

<script setup>
  import { useDisplay } from 'vuetify'

  const { mobile } = useDisplay()
</script>
```

--------------------------------

### Build and preview production with pnpm and http-server

Source: https://vuetifyjs.com/en/blog/announcing-vuetify0-alpha?one=settings

Builds the project and serves the dist directory locally to preview the production build before deploying.

```bash
pnpm build
npx http-server dist

```

--------------------------------

### Install Moment adapter packages

Source: https://vuetifyjs.com/en/features/dates?one=settings

Install the @date-io/moment and moment packages using pnpm. This is the first step to use Moment as the date adapter.

```bash
pnpm install @date-io/moment moment

```

--------------------------------

### Querying by data-testid in a test

Source: https://vuetifyjs.com/en/getting-started/unit-testing

Use the render function to get a component and query it by data-testid to assert its presence. This example checks that the element with test ID 'submit-btn' is in the document.

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

```

--------------------------------

### Start Vite development server

Source: https://vuetifyjs.com/en/getting-started/installation

After scaffolding, navigate into the project folder and run the dev command to start the Vite development server.

```bash
cd vuetify-project
pnpm dev

```

--------------------------------

### Install Vuetify with pnpm

Source: https://vuetifyjs.com/en/getting-started/installation

Run this command to add Vuetify to your Vitepress project dependencies. The page shows pnpm, yarn, npm, and bun as package managers, but this example is for pnpm.

```bash
pnpm i vuetify
```
Tokens:
Raw