vuetify.js

How to enable dark mode with custom colors in light theme in vuetify?

孤街浪徒 提交于 2020-01-05 04:22:25
问题 I am using vuetify 2.0 and I am facing an issue, in my vuetify.js file I have the following code export default new Vuetify({ theme:{ themes: { light: { primary: '#3f51b5', secondary: '#b0bec5', accent: '#8c9eff', error: '#b71c1c', } }, dark: true } }) vuetify theme https://vuetifyjs.com/en/customization/theme Here, I have set the custom color for the light theme by default but when I set the dark to true the colors I have set for light gets changed. Why this is happening, why can't I have my

How to format Vuetify data table date column?

丶灬走出姿态 提交于 2020-01-05 03:27:17
问题 I have a simple data table using Vuetify data table. One of the column is a createdOn (date time), I want to format it. How can I do it ? <template> <v-layout> <v-data-table :headers="headers" :items="logs"> </v-data-table> <v-layout> </template> <script> headers: [ { text: "Time", value: "createdOn", dataType: "Date" }, { text: "Event Source", value: "eventSourceName" }, { text: "Event Details", value: "eventDetails" }, { text: "User", value: "user" } ], items: [], </script> 回答1: You should

Accessing $vuetify instance property from vuex store

有些话、适合烂在心里 提交于 2020-01-04 15:51:22
问题 I was using vuetify and wanted to change theme from vuex store using $vuetify instance but i got this error Cannot set property 'theme' of undefined" here is my code export default { getters: {}, mutations: { toggleDarkTheme(state) { this.$vuetify.theme.primary = "#424242"; } } }; 回答1: $vuetify is an instance property hence you can access any vue instance property using Vue.prototype.$prop For your case import Vue from 'vue'; export default { getters: {}, mutations: { toggleDarkTheme(state) {

Pass the target element through @change in Vuetify combo box

冷暖自知 提交于 2020-01-04 06:40:21
问题 I need to pass the target event through the updateTags method. Here is the combo box below: When I call the comboActive method I can get the target event. KeyboardEvent {isTrusted: true, key: "y", code: "KeyY", location: 0, ctrlKey: false, …} Notice, the comboActive method in the combo box does not send any params but in the method comboActive(event) I can get the target event. I would like to be able to get the target event inside the updateTags method. As you can see I have tried using

Pass the target element through @change in Vuetify combo box

落花浮王杯 提交于 2020-01-04 06:40:15
问题 I need to pass the target event through the updateTags method. Here is the combo box below: When I call the comboActive method I can get the target event. KeyboardEvent {isTrusted: true, key: "y", code: "KeyY", location: 0, ctrlKey: false, …} Notice, the comboActive method in the combo box does not send any params but in the method comboActive(event) I can get the target event. I would like to be able to get the target event inside the updateTags method. As you can see I have tried using

Nuxt + Vuetify. How to apply theme colors

↘锁芯ラ 提交于 2020-01-03 09:46:28
问题 I am using a Nuxt.js + Vuetify.js project Looking at the file assets/style/app.styl we have // Import and define Vuetify color theme // https://vuetifyjs.com/en/style/colors @require '~vuetify/src/stylus/settings/_colors' $theme := { primary: $blue.darken-2 accent: $blue.accent-2 secondary: $grey.lighten-1 info: $blue.lighten-1 warning: $amber.darken-2 error: $red.accent-4 success: $green.lighten-2 } // Import Vuetify styling @require '~vuetify/src/stylus/main' .page @extend .fade-transition

emit go-modal at other instance do nothing, how to call modal?

核能气质少年 提交于 2020-01-03 06:04:33
问题 I am using standard vuetifyjs/dialogs... All scripts and templates in the same page, no server-side. The sequence in the page is something as: <div id="main"> ... <v-expansion-panel>...<!-- v-for... --> <v-btn @click="$emit('go-modal', {title: 'Hello', body: 'Bye!'})">Go</v-btn> ... </v-expansion-panel> </div> ... <div id="appDlg">... <v-dialog v-model="dialog" fullscreen>... <v-btn color="primary" dark slot="activator">TEST</v-btn> ... </v-dialog> </div> (the expansion-panel and TEST btn are

Accessing $refs array inside a Vue JS Instance watch object

拟墨画扇 提交于 2020-01-03 05:13:41
问题 I am building a Vue JS SPA, and have a Vuetify data-table inside of the v-app. I am trying to set a variable inside the watch object for the filteredItems computed property inside the data-table but I am unsure of how to access the $refs array inside the instance. I know that the data is accessible within the instance by using: this.$refs['prospectsTable'].filteredItems However the same reference name does not work within the watch object. I have tried: $refs['prospectsTable'].filteredItems:

FontAwesome SVG icons with Vuetify - how to use within v-icon/prepend-icon?

痴心易碎 提交于 2020-01-02 13:15:19
问题 I'm new to Vue, can't find the exact answer how to use FA SVG icons in v-icon and prepend-icon. If i use: <font-awesome-icon :icon="dekstop" color="gray"></font-awesome-icon> Icons are displayed, but how i can use FA SVG icons in v-icon and prepend-icon? Sample: <v-autocomplete v-model="replUser" :items="users" color="accent white--text" label="User" prepend-icon="dekstop></i>" // i can use material font icons here, but FA SVG not worked > </v-autocomplete> my main.js: import Vue from 'vue'

How to setup a vue-cli with vuetify project to run with IE 11?

≡放荡痞女 提交于 2020-01-02 06:06:06
问题 I spend a few days to setup a vue.js + vue-cli + typescript + vuetify project to run with IE 11 without success? I found many posts on the net that explain how it should be done but without success. I tried to combine in almost all the ways possible the setup explained below without success, endind with many different errors up to a blank page The application runs fine wit Chrome or FF If someone has such an application running in IE 11 it would be greatly appreciated Context (all the latest