Get started with Vuetify 3
Get started with Vuetify, the world’s most popular Vue.js framework for building feature rich, blazing fast applications.
Installation
Vuetify has support for multiple different installation paths with the most common scaffolding tool being create-vuetify
For more information regarding supported package managers, please visit their official websites:
Using Vite
To get started with Vuetify 3, simply paste the following code into your terminal:
This command prompts you with a few options before generating your scaffolded Vue / Vuetify 3 project.
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
After making your selections, create-vuetifywill generate the structure for your new application.
Once the scaffold is complete, start the vite development server by running the following commands:
cd vuetify-project
yarn dev
Using Nuxt 3
Nuxtis an open-source framework that has helpful features to quickly get you started with developing a full-stack Vue app, such as file-based routing, SSR and component auto-imports. Nuxt is powered by Vite, so the steps to get Vuetify working in Nuxt 3 are quite similar to the manual steps described above.
Start off creating a nuxt app by executing the following commands:
and then install the required Vuefity modules as dependencies:
Next, integrate the following entries into your nuxt.config.ts
file:
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
export default defineNuxtConfig({
//...
modules: [
(_options, nuxt) => {
nuxt.hooks.hook('vite:extendConfig', (config) => {
// @ts-expect-error
config.plugins.push(vuetify({ autoImport: true }))
})
},
//...
],
vite: {
vue: {
template: {
transformAssetUrls,
},
},
},
}
Nuxt allows you to change its Vite config by using its built-in hook vite:extendConfig
. In its callback function, add the Vuetify plugin to the array of Vite plugins. To resolve relative asset URLs that are passed to Vuetify components such as VImg
(e.g. ~/assets/img/some.png
) the transformAssetUrls
function needs to be added in the vite
entry .
In the next step, initialize Vuetify and add it to the main Vue app instance. This can be done in the plugins
folder as any plugin that is placed in this folder will be automatically loaded by Nuxt at startup.
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
export default defineNuxtPlugin((app) => {
const vuetify = createVuetify({
// ... your configuration
})
app.vueApp.use(vuetify)
})
Finally, add Vuetify’s root VApp
component either in ~/app.vue
or ~/layouts/default.vue
, for example:
<template>
<NuxtLayout>
<v-app>
<NuxtPage />
</v-app>
</NuxtLayout>
</template>
or
<template>
<v-app>
<!-- .... -->
</v-app>
</template>
You should now have access to all Vuetify components and tools in Nuxt app.
Using Laravel Mix
import { createApp } from 'vue'
import App from './App.vue'
// Vuetify
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
const vuetify = createVuetify({
components,
directives
})
createApp(App).use(vuetify).mount('#app')
To import the fonts you need to add to webpack.mix.js:
mix.copy('node_modules/@mdi/font/fonts/', 'dist/fonts/')
Using CDN
We recommend using the latest version of Vuetify 3 from jsdelivr. All components and styles are included.
https://cdn.jsdelivr.net/npm/vuetify@3.3.20/dist/vuetify.min.css
https://cdn.jsdelivr.net/npm/vuetify@3.3.20/dist/vuetify.min.js
const { createApp } = Vue
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = createApp()
app.use(vuetify).mount('#app')
Existing projects
Follow these steps if for example you are adding Vuetify to an existing project, or simply do not want to use a scaffolding tool.
TIP:
If you are upgrading from an earlier version of Vuetify, make sure to check out our Upgrade Guide
In the file where you create the Vue application, add the following code
import { createApp } from 'vue'
import App from './App.vue'
// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
const vuetify = createVuetify({
components,
directives,
})
createApp(App).use(vuetify).mount('#app')
This will include all components and directives regardless of whether or not you are using them. If you instead only want to include used components, have a look at the Viteor Webpackplugins, depending on your setup. The plugins also makes it possible to customize SCSS variables.
Lastly, do not forget to install icons.
SSR caveats
Vue 3 has no way to automatically detect if SSR is used — so nuxt, gridsome, and other SSR frameworks must manually set the ssr
option to true
in order to properly render the application.
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
const vuetify = createVuetify({
ssr: true,
})
Exposed exports
The following export paths exist for the Vuetify framework:
JS / TS
Name | Description |
---|---|
vuetify | Main entry point. Contains createVuetify() and public composables. |
vuetify/styles | Precompiled global CSS (reset, utilities, etc.), no component styles. Will be redirected to SASS if styles.configFile is set in vite or webpack. |
vuetify/components | All components. Not recommended as it will include all components during development, slowing down your build. |
vuetify/components/<name> | Individual components. Grouped by top-level name, for example VListItem, VListGroup, and VListItemTitle are all in vuetify/components/VList . |
vuetify/directives | All directives. |
vuetify/directives/<name> | Individual directives. |
vuetify/blueprints/<name> | Preset collections of prop defaults. |
vuetify/locale | Translations for strings in vuetify components. Each language is a named export. |
vuetify/locale/adapters/<name> | Adapters to retrieve translations from other libraries such as vue-i18n. |
vuetify/iconsets/<name> | Icon presets, see Icon Fonts |
SASS
See SASS Variablesfor more information.
Name | Description |
---|---|
vuetify | Global CSS (reset, utilities, etc.), no component styles. Equivalent to vuetify/styles in JS. |
vuetify/settings | All SASS variables, including component variables. |
vuetify/tools | Mixins and functions. |
Nightly Builds
The three development branches (master
, dev
, and next
) are automatically published to NPM at 1200 UTC under the @vuetify/nightly
namespace. They may be outdated or buggy and are therefore not officially supported and are only supplied for testing purposes. These builds can be installed with a package alias.
"devDependencies": {
- "vuetify": "^3.3.0"
+ "vuetify": "npm:@vuetify/nightly@3.3.0-master.2023-05-21"
}
Questions
Have a question that belongs here? Tell us in our Discord Communityor create a request on our Issue Generator.