Setup Vuetify for Vuejs project

Vuetify is a Material UI framework for Vuejs which make development of cross platform apps quick and easy. It is a UI library which is full of essential layout, app bar, menu and common UI element required for fast development.

Setup vuetify for Vuejs

1. Create a vue project with routes (recommended) using the CLI tool either by vue create <project-name> or using vue ui
2. Add vuetify using the following command

vue add vuetify

Optionally you can configure it manually from UI while using the vue ui for creating the vue project.

Let’s visit the vuetify site and try to start with a wire frame example.

Following are the basic layout of an landing page of vuetify-vuejs app.

<v-app>
  <!-- Must have the app property -->
  <v-app-bar app></v-app-bar>

  <v-main>
    Hello World
  </v-main>
</v-app>

All of our layout code goes through <v-app> tag and the main used for some special purposes, in our simple app it just a Hello world string. You can find some special app bar and drawers on the UI section

Keep reading these Vuetify Posts on the go

• Setup Vuetify for Vuejs project - How to add vuetify material UI to vuejs project in easy steps
• Vuetify - About Vuetify UI Kit for Vuejs