I've tried to follow CDN usage example on the Vuetify website, but I'm getting the following errors:
[Vue warn]: Unknown custom element:
<v-list-tile>- did you register the component correctly? For recursive components, make sure to provide the "name" option.
[Vue warn]: Unknown custom element:<v-list-tile-action>- did you register the component correctly? For recursive components, make sure to provide the "name" option.
[Vue warn]: Unknown custom element:<v-list-tile-content>- did you register the component correctly? For recursive components, make sure to provide the "name" option.
See example at codepen.
JS:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
drawer: false,
app_title: 'Custom Name...',
elevations: [6, 12, 24],
tiles: [4,5,6,7,8,9]
},
})
HTML:
<div id="app">
<v-navigation-drawer
v-model="drawer"
temporary
fixed
app
>
<v-list dense>
<v-list-tile @click="">
<v-list-tile-action>
<v-icon>home</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Home</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="">
<v-list-tile-action>
<v-icon>contact_mail</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Report</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar color="#213f5e" dark fixed app>
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title>{{app_title}}</v-toolbar-title>
</v-toolbar>
<v-content>
<v-item-group>
<v-container fluid fill-height grid-list-md>
<v-layout
flex-child
wrap
>
<v-flex
v-for="tile in tiles"
:key="tile"
xs12
md4
>
<v-sheet
class="pa-5"
color="grey lighten-3"
>
<v-card
:elevation="8"
class="mx-auto"
height="100"
width="100"
>
<div>bla bla bla</div>
</v-card>
</v-sheet>
</v-flex>
</v-layout>
</v-container>
</v-item-group>
</v-content>
</div>
