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 ...