vuetify.js

I am using Vuetify and VueJS (the latest versions). Here is the small template of Login.vue : <template> <v-layout align-center justify-center> <v-flex xs12 sm8 md4> <v-card class="elevation-12"> <v-toolbar dark color="success"> <v-toolbar-title>Login form</v-toolbar-title> <v-spacer></v-spacer> </v-toolbar> <v-card-text> <v-form @submit.prevent="checkLogin"> <v-text-field prepend-icon="person" id="userLogin" v-model="userLogin" placeholder="my@login.com"></v-text-field> <v-text-field prepend-icon="lock" id="userPassword" v-model="userPassword" placeholder="password" type="password"></v-text

I am new to Vue and Vuetify. I just created quick app to check both of them. But I am a running into issues in beginning. The vue fails to identify vuetify components despite following all the steps outlined in document. The error is like below - vue.runtime.esm.js?ff9b:587 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> at src\App.vue You can access the entire code at sandbox https://codesandbox.io/s/40rqnl8kw You're likely experiencing a problem with the order of your operations.

The code shows the tooltip icon but does not show anything when I hover on it.How do I enable it on hover like in the case of number below. https://vuetifyjs.com/en/components/tooltips <v-text-field label="Name" id="name" disabled> <v-tooltip slot="append" :value="true" bottom> <v-icon slot="activator" color="primary" dark>live_help</v-icon> <span>Name of the user</span> </v-tooltip> </v-text-field> <v-text-field label="number" id="number"> <v-tooltip slot="append" bottom> <v-icon slot="activator" color="primary" dark>live_help</v-icon> <span> Number of years</span> </v-tooltip> </v-text-field

I have 5 v-swtich components, called A, B, C, D and E. Here is what I want to achieve: If I switch on A , then D and E must automatically switch on, and the user must not be able to switch D and E off unless if he switches off A. If A is not switched on, the the user can switch on D or E . If the user switches on any combinations where D and E appear (for example: (C, D , E ), (C, D , E , B), (B, D , E ) ) then A must be automatically switched on, and the user must not switch off D and E until he switches off A. Here is some code to start with: <div id="app"> <v-app id="inspire"> <v-container

Using a stylus block level import: # vuetify-style.styl .myapp @import '~vuetify/src/stylus/main' This is to ensure that the vuetify css doesn't interfere with elements from other parts of the page which aren't using vuetify. But unfortunately it doesn't work, I can't compile it. ERROR Failed to compile with 1 errors 2:13:28 pm error in ./src/stylus/main.styl Module build failed (from ./node_modules/stylus-loader/index.js): Error: node_modules/vuetify/src/stylus/settings/_el evations.styl:85:33 81| 0px 9px 46px 8px $shadow-key-ambient-opacity 82| 83| // MIXINS 84| elevation($z, important =

Text fields in Vuetify have rules props, which take an array of functions returning true or an error string. How to make them async, so that the validation could be made server-side using XHR? Something like: <v-text-field :rules="[v => { axios.get('/check?value=' + val).then(() => { return true }) }]"> One solution is to set the error-messages prop: <v-text-field v-model="input" :error-messages="errors"> and use the watch method: new Vue({ data () { return { input: '', errors: [] } }, watch: { input (val) { axios.get('/check?value=' + val).then(valid => { this.errors = valid ? [] : ['async