Vuetify Basic

by Renan Ribeiro Brando

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<div id="app">
<v-app>
        <v-row>
          <v-col cols="10">
            <p>
              Texto
            </p>
            <v-divider></v-divider>
          </v-col>
          <v-col cols="2">
            <v-btn>
              Botao
            </v-btn>
          </v-col>
        </v-row>
        
        
        </v-app>
</div>

CSS

#a {
  width: 50%;
}

table {
  width: 50% !important;
}

JavaScript

Vue.use(Vuetify);

var vm = new Vue({
	el: "#app",
  methods: {
  	add(){
    	this.people.push({
      	name: this.newName,
        number: this.newNumber
      });
      
      this.newName = undefined;
      this.newNumber = undefined;
    }
  },
  data: {
  	fake: undefined,
  	newName: undefined,
    newNumber: undefined,
  	people: [
    	{ name: "Alpha", number: 1 }
    ],
  	headers: [
    	{ text: "Name", value: 'name' },
      { text: "Number", value: 'number' },
      { text: "Inputs", value: 'name' }
    ]
  }
});