Categories
Vuetify

Getting Started with Vuetify

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to get started with the Vuetify framework.

Vue CLI Install

The easiest way to create a Vuetify Vue app is to use the Vue CLI.

We create a project directory, go into it, and run:

npx vue create .

We choose the options we want when prompted.

Once we did that, we run:

vue add vuetify

to add the Vuetify files.

We choose Default when prompted.

This is the recommended configuration.

It comes with all the components and assets we need to build an app with it.

Colors

Once we did that, we can set the colors by using the classes.

So we can write:

<div class="red">

or

<span class="red--text">

and to set the colors to red.

We can also change the colors in vuetify.js :

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import colors from 'vuetify/lib/util/colors'

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: colors.red.darken1,
        secondary: colors.red.lighten4,
        accent: colors.indigo.base
      },
    },
  },
});

We import the colors object and set the colors to what we want.

SASS Colors

We can also import SASS colors by writing:

@import '~vuetify/src/styles/main.sass';

They can also be imported in the src/index.js file writing;

import './src/sass/main.scss'
// OR
require('./src/sass/main.scss')

This works if we configured our Vue CLI to use SASS.

Content

We can create content with various elements.

Vuetify provides styles for them.

For instance, we can create a blockquote by writing:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <blockquote class="blockquote">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</blockquote>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",

  data: () => ({}),
};
</script>

We just put them inside a component within the v-container to have the styling applied.

We can do the same for code:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
         <code>&lt;code&gt;</code>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",

  data: () => ({}),
};
</script>

Also, we can apply styles to the kbd element:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <kbd>npm install vuetify</kbd>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",

  data: () => ({}),
};
</script>

Display Helpers

We can add various classes to add padding, colors, set the display CSS property and more.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <div class="d-inline pa-3 deep-purple accent-4 white--text">foo</div>
        <div class="d-inline pa-3 black white--text">bar</div>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",

  data: () => ({}),
};
</script>

We create a purple and black divs with some classes.

pa-3 created padding.

d-inline make the divs display inline.

deep-purple , accent-4 , white--text , and black are the color classes.

Conclusion

We can create a Vuetify app with a few commands.

It adds styles to elements and we can also add our own style with the classes it provides.