Get started with Vuetify, the world’s most popular Vue.js framework for building feature rich, blazing fast applications.
Vue CLI is the next generation cli tool made to abstract away the complexities of building an application. When you start your app with Vue CLI you will also be able to get the official webpack updates and config changes, as well as Vuetify's updates without an arduous upgrade process.
If you have not already created a new Vue.js project using Vue CLI, you can do so by typing:
Now that you have an instantiated project, you can add the Vuetify Vue CLI package using the cli.
Vuetify can also be installed using Vue UI, the new visual application for Vue CLI. Ensure that you have the latest version of Vue CLI installed, then from your terminal type:
This will start the Vue User Interface and open a new window in your browser. On the left side of your screen, click on Plugins. Once navigated, search for Vuetify in the input field.
Vuetify can be added by installing the Nuxt Vuetify module.
Once installed, update your
nuxt.config.js file to include the Vuetify module in the build.
More information on installing Nuxt can be found on the official documentation.
To install Vuetify into a Webpack project you need to add a few dependencies:
Once installed, locate your
webpack.config.js file and copy the snippet below into the rules array. If you have an existing sass rule configured, you may need to apply some or all of the changes below. If you are looking to utilize the vuetify-loader for treeshaking, ensure that you are on version
>=4 of Webpack. You can find more information on setting it up with webpack on the A-la-carte page.
Create a plugin file for Vuetify,
src/plugins/vuetify.js with the below content:
vuetify-loader use the content below:
Navigate to your main entry point where you instantiate your Vue instance and pass the Vuetify object in as an option.
To test using Vuetify.js without installing a template from Vue CLI, copy the code below into your
index.html. This will pull the latest version of Vue and Vuetify, allowing you to start playing with components. You can also use the Vuetify starter on codepen. While not recommended, if you need to utilize the cdn packages in a production environment, it is recommended that you scope the versions of your assets. For more information on how to do this, navigate to the jsdelivr website.
To use Vuetify with Electron, add the electron-builder plugin via Vue CLI.
If you are creating a new app with Vue CLI, you have the option to select Progressive Web App (PWA) Support in the first prompt after initiating
vue create my-app. This package can also be installed into existing Vue CLI projects by entering the following command:
To use Vuetify with Cordova, add the Cordova plugin via Vue CLI:
To use Vuetify with Capacitor, add the Capacitor plugin via Vue CLI:
There are 2 ways we can use Vuetify with default vuepress theme. Either by registering vuetify as a plugin in vuepress
.vuepress/enhanceApp.js file (code sample below), or by using vuetify directly from CDN:
Ready for more? Continue reading with: