Skip to content

Instantly share code, notes, and snippets.

@matthewoestreich

matthewoestreich/vuetify-simple-boilerplate.html

Last active February 14, 2019 20:09
Show Gist options
  • Save matthewoestreich/aec61f2a6108570daf8bae3be4711776 to your computer and use it in GitHub Desktop.
Save matthewoestreich/aec61f2a6108570daf8bae3be4711776 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
vuetify-simple-boilerplate.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" sizes="16x16" href="">
<link rel="stylesheet" href="https://unpkg.com/vuetify/dist/vuetify.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/3.4.93/css/materialdesignicons.min.css">
</head>
<body>
<div id="root" v-cloak>
<!-- html will be auto injected -->
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<script>
new Vue({
el: '#root',
template: `
<v-app>
<v-container text-lg-center>
<v-card elevation-10 style='height:300px;'>
<h1>{{ message }}</h1>
</v-card>
</v-container>
</v-app>
`,
data: {
message: 'Your code here',
},
});
</script>
<style>
[v-cloak] {
display: block;
padding: 50px 0;
}
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
[v-cloak]:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
border-radius: 50%;
border: 2px solid #ccc;
border-top-color: #333;
animation: spinner 0.6s linear infinite;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
[v-cloak]>* {
display: none;
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment