Vuetify Template

index.html

<script type="text/x-template" id="app-template">
  <v-app>
    <v-container>
        <v-slider
          v-model="value"
          step="10"
          ticks="always"
          tick-size="4"
          label="Bugs"
        />
        <v-slider
          v-model="value2"
          step="10"
          ticks="always"
          tick-size="4"
          label="Scale"
        />
      <v-checkbox label="Unit Tests" dense></v-checkbox>
      <v-checkbox label="Load Testing" dense></v-checkbox>
      <v-checkbox label="Documentation" dense></v-checkbox>
      <v-btn color="primary" elevation="2" @click="buttonClick">
        <v-icon left dark>mdi-floppy</v-icon>
        Compile
      </v-btn>

    </v-container>
  </v-app>
</script>

<div id="app"></div>

script.js

// Looking for the v1.5 template?
// https://codepen.io/pen?template=GVoaNe

const App = {
  template: '#app-template',
  data: () => ({
    value: 0, 
    value2: 0

  }),
  computed:{},
  methods: {
    buttonClick(){
      window.alert("Just Kidding")
    }
  }
}


new Vue({
  vuetify: new Vuetify(),
  render: h => h(App)
}).$mount('#app')

scripts

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet" />

vuetify-template.markdown

Vuetify Template

A Pen by Juan Davila on CodePen.

License.