forum
forum copied to clipboard
vuejs-br
Vuetify Theme não renderiza.
Cria a página abaixo usando um tema https://github.com/vuetifyjs/vuetifyjs.com/blob/master/examples/layouts/dark.vue
O problema é que renderiza um página em branco, com ose não reconhecesse os estilos e tag.
Alguém já passo por isso? Alguém tem um tema pronto simples que eu possa usar?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index - My ASP.NET Application</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.0.11/vuetify.min.css" rel="stylesheet" />
</head>
<body>
<!-- <div id="app"> -->
<v-app id="app" dark>
<v-navigation-drawer
clipped
fixed
v-model="drawer"
app
>
<v-list dense>
<v-list-tile @click="">
<v-list-tile-action>
<v-icon>dashboard</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Dashboard</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="">
<v-list-tile-action>
<v-icon>settings</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Settings</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar app fixed clipped-left>
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title>Application</v-toolbar-title>
</v-toolbar>
<v-content>
<v-container fluid fill-height>
<v-layout justify-center align-center>
<v-flex shrink>
<v-tooltip right>
<v-btn
icon
large
:href="source"
target="_blank"
slot="activator"
>
<v-icon large>code</v-icon>
</v-btn>
<span>Source</span>
</v-tooltip>
<v-tooltip right>
<v-btn icon large href="https://codepen.io/johnjleider/pen/qxQWda" target="_blank" slot="activator">
<v-icon large>mdi-codepen</v-icon>
</v-btn>
<span>Codepen</span>
</v-tooltip>
</v-flex>
</v-layout>
</v-container>
</v-content>
<v-footer app fixed>
<span>© 2017</span>
</v-footer>
</v-app>
</template>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.0.11/vuetify.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
drawer: true
}
})
</script>
</body>
</html>
Bom, abri o seu link e percebi que você tentou fazer uma mistura de uso do VueJS 1 com VueJS 2. O VuetifyJS é uma lib para Vue 2 e recomendo usar a estrutura com webpack mais simples de template do Vue para fazer funcionar [muitos problemas aparecerão no console ;-) ]. Agora respondendo a sua pergunta sobre temas prontos, usando Vue existem algumas alternativas: https://www.creative-tim.com/ (tem uns temas free com Vue aplicado) https://coreui.io/ (tem um tema baseado em bootstrap 4 e vue muito bom e bem documentado) https://github.com/vue-bulma/vue-admin (este utiliza bulma como framework css e vários componentes) https://github.com/PanJiaChen/vue-element-admin (este utiliza uma lib de componentes chamada Element) https://github.com/iview/iview-admin (este utiliza uma lib de componentes chamada iView)
Olá,
a melhor forma de começar qualquer projeto Vue é usar os seus templates pelo vue-cli... No caso do Vuetify tem vários, e eu recomendo que você utilize i webpack:
$ npm install -g vue-cli
$ vue init vuetifyjs/webpack my-project
$ cd my-project
$ npm install
$ npm run dev
