vuetify.js

I'm new in Vuetify and Vue.js. I try to make v-card layout but failed. Be honest i copy paste this code : https://github.com/vuetifyjs/vuetifyjs.com/blob/master/src/examples/layouts/centered.vue And when i run i get error : vue.runtime.esm.js?2b0e:587 [Vue warn]: Unknown custom element: <v-card> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <Login> at src/views/Login.vue <VApp> <App> at src/App.vue <Root> I already install vuetify but still error. Any solution ? Updated : If i import the vuetify, i get another error

I'm trying to put an triangle/arrow under the v-container with some gradient colour but I don't know how to "merge" the gradient. If I create the arrow with CSS the gradient won't match. Any ideas about how to achieve this? Here is the code: HTML: <div id="app"> <v-container fluid pa-0 class="gradient white--text"> <v-layout row wrap text-xs-center> <v-flex xs12> <h1 class="display-1 my-5">Lorem Ipsum</h1> </v-flex> </v-layout> </v-container> <div class="bottom-arrow"></div> </div> CSS: .gradient{ height: 300px; background: rgb(0,105,173); background: linear-gradient(45deg, rgba(0,105,173,1) 0

The doc tells me I can use a helper class to change padding/margin. I want to remove padding from an input field, so the class I need is pa-0 ( {property}{direction}-{size} ): <v-text-field v-model="mon" pa-0 solo></v-text-field> JSFiddle here Doesn't work. Any idea? EDIT: I realise I obtain a completely different markup in my JSFiddle compared to my local setup, which compounds my confusion: Markup generated by Vuetify locally (here I want to remove vertical padding inside the <input> element and horizontal padding on <div class="v-input__slot"> element): <div class="v-input v-text-field v

Normally to style an icon in Vuetify we'll do something like <v-icon large color="primary">comment</v-icon> How do we get the same effect while using the prepend-icon prop like here <v-list-group prepend-icon="comment"> The documentation says prepend-icon uses same syntax as v-icon but no concrete example is provided for my use case Target it properly and apply style. For example in v-list-group : .v-list__group__header__prepend-icon .v-icon { color: red; } But note for example v-text-field append icon .v-input__icon--append .v-icon { color: purple; } NOTE: If it's not working, and you are

I need help with creating a text-field, which has an icon inside with a tooltip attached to the icon. My code: <v-text-field v-model="url"> <span slot="label">Url <v-tooltip bottom> <v-icon slot="activator" color="primary" dark >home</v-icon> <span>Tooltip</span> </v-tooltip> </span> </v-text-field> Any ideas? Thanks. Since v1.1 we can use append (and prepend ) slots for this: <v-text-field v-model="url" label="URL"> <v-tooltip slot="append" bottom> <v-icon slot="activator" color="primary" dark>home</v-icon> <span>Tooltip</span> </v-tooltip> </v-text-field> Codepen In vuetify version 2.0.7 I

Change colors I'm trying to use Vue with Nuxt and Vuetify for the styles, on Vuetify exists many templates, one of them brings all. I tried to add colors on /assets/style/app.styl without effect. Also on /plugins/vueitfy.js add something like: Vue.use(Vuetify, { theme: { header: '#48393C', footer: '#2f3542' } }) Without effects, i think that the last way is the best way for do it. There are two options to change the color theme 1. from the /plugins/vueitfy.js Vue.use(Vuetify, { theme: { primary: '#2c3e50', secondary: '#1abc9c', accent: '#2980b9', error: '#e74c3c', action: '#23DB2A' }}) From