Using UI components

There are many components provided with Vuetify but in this section, we will just talk about a few of them to get an idea of how to use them. The example code uses components such as a color picker, button, badge, and so on.

Figure 8.3 shows the directory structure of the example. All of the source files are inside the src/ folder:

Figure 8.3: The directory structure of a Vuetify sample app

The main.js host code for initializing Vue and Vuetify is shown in the following snippet:

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false
new Vue({
 vuetify,
 render: h => h(App)
}).$mount('#app')

The code looks like any other Vue-based application except it adds the Vuetify framework, which is imported from the plugins/vuetify directory, as shown in this snippet:

import Vue from 'vue';
import Vuetify from ...