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

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.