Get started with Vuetify, the world’s most popular Vue.js framework for building feature rich, blazing fast applications.
Vue CLI 3 is the next generation cli tool made to abstract away the complexities of building an application. When you start your app with Vue CLI 3 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 3, you can do so by typing:
Now that you have an instantiated project, you can add the Vuetify Vue CLI 3 package using the cli.
Vuetify can also be installed using Vue UI, the new visual application for Vue CLI 3. 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, simply 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 you 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:
Navigate to your main entry point where you instantiate your Vue instance and pass the Vuetify object in as an option.
For more information on different support iconfonts and advanced implementations, navigate to the Icons page.
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.
Ready for more? Continue reading with: