Created
March 29, 2019 18:35
-
-
Save GeekSnail/63472af2143ff85de2559a58146cfc16 to your computer and use it in GitHub Desktop.
vuetify default
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<v-app> | |
<v-toolbar app> | |
<v-toolbar-title class="headline text-uppercase"> | |
<span>Vuetify</span> | |
<span class="font-weight-light">MATERIAL DESIGN</span> | |
</v-toolbar-title> | |
<v-spacer></v-spacer> | |
<v-btn | |
flat | |
href="https://github.com/vuetifyjs/vuetify/releases/latest" | |
target="_blank" | |
> | |
<span class="mr-2">Latest Release</span> | |
</v-btn> | |
<v-btn color="error">butt</v-btn> | |
</v-toolbar> | |
<v-content> | |
<HelloWorld/> | |
</v-content> | |
</v-app> | |
</template> | |
<script> | |
import HelloWorld from './components/HelloWorld' | |
export default { | |
name: 'App', | |
components: { | |
HelloWorld | |
}, | |
data () { | |
return { | |
// | |
} | |
} | |
} | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<v-container> | |
<v-layout | |
text-xs-center | |
wrap | |
> | |
<v-flex xs12> | |
<v-img | |
:src="require('../assets/logo.svg')" | |
class="my-3" | |
contain | |
height="200" | |
></v-img> | |
</v-flex> | |
<v-flex mb-4> | |
<h1 class="display-2 font-weight-bold mb-3"> | |
Welcome to Vuetify | |
</h1> | |
<p class="subheading font-weight-regular"> | |
For help and collaboration with other Vuetify developers, | |
<br>please join our online | |
<a href="https://community.vuetifyjs.com" target="_blank">Discord Community</a> | |
</p> | |
</v-flex> | |
<v-flex | |
mb-5 | |
xs12 | |
> | |
<h2 class="headline font-weight-bold mb-3">What's next?</h2> | |
<v-layout justify-center> | |
<a | |
v-for="(next, i) in whatsNext" | |
:key="i" | |
:href="next.href" | |
class="subheading mx-3" | |
target="_blank" | |
> | |
{{ next.text }} | |
</a> | |
</v-layout> | |
</v-flex> | |
<v-flex | |
xs12 | |
mb-5 | |
> | |
<h2 class="headline font-weight-bold mb-3">Important Links</h2> | |
<v-layout justify-center> | |
<a | |
v-for="(link, i) in importantLinks" | |
:key="i" | |
:href="link.href" | |
class="subheading mx-3" | |
target="_blank" | |
> | |
{{ link.text }} | |
</a> | |
</v-layout> | |
</v-flex> | |
<v-flex | |
xs12 | |
mb-5 | |
> | |
<h2 class="headline font-weight-bold mb-3">Ecosystem</h2> | |
<v-layout justify-center> | |
<a | |
v-for="(eco, i) in ecosystem" | |
:key="i" | |
:href="eco.href" | |
class="subheading mx-3" | |
target="_blank" | |
> | |
{{ eco.text }} | |
</a> | |
</v-layout> | |
</v-flex> | |
</v-layout> | |
</v-container> | |
</template> | |
<script> | |
export default { | |
data: () => ({ | |
ecosystem: [ | |
{ | |
text: 'vuetify-loader', | |
href: 'https://github.com/vuetifyjs/vuetify-loader' | |
}, | |
{ | |
text: 'github', | |
href: 'https://github.com/vuetifyjs/vuetify' | |
}, | |
{ | |
text: 'awesome-vuetify', | |
href: 'https://github.com/vuetifyjs/awesome-vuetify' | |
} | |
], | |
importantLinks: [ | |
{ | |
text: 'Documentation', | |
href: 'https://vuetifyjs.com' | |
}, | |
{ | |
text: 'Chat', | |
href: 'https://community.vuetifyjs.com' | |
}, | |
{ | |
text: 'Made with Vuetify', | |
href: 'https://madewithvuetifyjs.com' | |
}, | |
{ | |
text: 'Twitter', | |
href: 'https://twitter.com/vuetifyjs' | |
}, | |
{ | |
text: 'Articles', | |
href: 'https://medium.com/vuetify' | |
} | |
], | |
whatsNext: [ | |
{ | |
text: 'Explore components', | |
href: 'https://vuetifyjs.com/components/api-explorer' | |
}, | |
{ | |
text: 'Select a layout', | |
href: 'https://vuetifyjs.com/layout/pre-defined' | |
}, | |
{ | |
text: 'Frequently Asked Questions', | |
href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions' | |
} | |
] | |
}) | |
} | |
</script> | |
<style> | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment