scrimba
Learn Vuetify
Intro to Vuetify
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Intro to Vuetify
AboutCommentsNotes
Intro to Vuetify
Expand for more info
Playground.vue
run
preview
console
<template>
<v-container>
<v-row>
<v-col cols="12">
<v-row class="mb-12">
<v-col cols="12">
<h1 class="mb-5">Playground</h1>
<v-divider />
</v-col>
</v-row>
<v-row class="mb-12">
<v-col cols="12">
<Typography />
<v-divider />
</v-col>
</v-row>
<v-row class="mb-12">
<v-col cols="12">
<Spacing />
<v-divider />
</v-col>
</v-row>
<v-row class="mb-12">
<v-col cols="12">
<Buttons />
<v-divider />
</v-col>
</v-row>
<v-row class="mb-12">
<v-col cols="12">
<Menus />
<v-divider />
</v-col>
</v-row>
<v-row class="mb-12">
<v-col cols="12">
<Grid />
<v-divider />
</v-col>
</v-row>
<v-row class="mb-12">
<v-col cols="12">
<Card />
<v-divider />
</v-col>
</v-row>
</v-col>
</v-row>
</v-container>
</template>

<script>
import Typography from './components/Typography.vue'
import Spacing from './components/Spacing.vue'
import Buttons from './components/Buttons.vue'
import Menus from './components/Menus.vue'
import Grid from './components/Grid.vue'
import Card from './components/Card.vue'

export default {
components: {
Typography,
Spacing,
Buttons,
Menus,
Grid,
Card
}
}
</script>
Console
"Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools"
,
"You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html"
,
/index.html
-2:02