To use Vuetify with a Vue-CLI project, we need to create a custom Vue-CLI project with pre-defined configurations, so that we are able to take full advantage of the framework and the styling options it provides:
- We need to open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> vue create vue-vuetify
- First, Vue-CLI will ask for you to choose a preset; select Manually select features using the space bar:
? Please pick a preset: (Use arrow keys)
default (babel, eslint)
❯ Manually select features
- Now Vue-CLI will ask for the features, and you will need to select CSS Pre-processors as an additional feature on top of the default ones:
? Check the features needed for your project: (Use arrow keys)
❯ Babel
TypeScript
Progressive Web App (PWA) Support
Router
Vuex
❯ CSS Pre-processors
❯ Linter / Formatter
Unit Testing
E2E Testing
- Here, Vue-CLI will ask which CSS pre-processor...