vuetify.js

How to install vuetify 2.0 beta to the new vue cli project?

由 柔情痞子 提交于 2019-11-27 05:28:20
Vuetify 2.0.0-beta.0 has just been released and I want to try it out and play around in a new vue test application. But I get errors when I try to install it in a fresh new project. Here are the steps I've taken. I use @vue/cli v3.8.2 to create a new project with default settings: vue create testapp which gives me successful result: 🎉 Successfully created project testapp. 👉 Get started with the following commands: $ cd testapp $ npm run serve Then I add vuetify plugin to the project with default (recommended) preset: cd testapp vue add vuetify which gives me success: 📦 Installing vue-cli

vuetify center items into v-flex

由 坚强是说给别人听的谎言 提交于 2019-11-27 02:32:22
问题 I'm trying to center a <v-btn> into a <v-flex> . Since <v-flex> is a flexbox div, I use justify-center that is transformed into justify-content: center Since my direction is horizontal, my button should be center aligned but it's not. Here is the codepen that reproduce my problem. https://codepen.io/anon/pen/ZXLzex I want to signup the button to be centered inside the div (v-flex). Here is the full code: <v-card> <v-card-text > <v-text-field label="Email"></v-text-field> <v-text-field label=

How to use Vuetify tabs with vue-router

由 旧时模样 提交于 2019-11-27 01:14:03
问题 I have the following jsfiddle that has two Vuetify tabs. The documentation doesn't show examples on using vue-router with them. I found this Medium.com post on how to use Vuetify with vue-router , which has the following code: <div id="app"> <v-tabs grow light> <v-tabs-bar> <v-tabs-item href="/" router> <v-icon>motorcycle</v-icon> </v-tabs-item> <v-tabs-item href="/dog" router> <v-icon>pets</v-icon> </v-tabs-item> </v-tabs-bar> </v-tabs> <router-view /> </div> However, the code is now

Open a Vuetify dialog from a component template in VueJS

由 混江龙づ霸主 提交于 2019-11-27 01:05:14
问题 I'm using the VueJS Vuetify framework and I need to open a dialog - that gets imported as a component template - from another template. Once the Menu button in App.vue got clicked, the Modal should open. Here is my setup: App.vue = navigation template with Menu button Modal.vue = Modal template, imported as global in main.js main.js import Modal from './components/Modal.vue' Vue.component('modal', Modal) Modal.vue Template: <template> <v-layout row justify-center> <v-btn color="primary" dark

Using custom theming in Vuetify and pass color variables to components

由 别等时光非礼了梦想. 提交于 2019-11-26 19:42:54
问题 In my index.js file I have manually override the Vuetify theme object with my company's color: Vue.use(Vuetify, { theme: { primary: '#377ef9', secondary: '#1b3e70', accent: '#ff643d', error: '#ff643d' ... } Now, I can use these colors from my templates like so: <my-text-field name="input text" label="text" value="text text text text..." type="text" color="primary"> </my-text-field> What I'm after is using the primary or any other variable in the theme object defined above, inside my template

Styling Vuetify selectors

由 旧巷老猫 提交于 2019-11-26 14:46:29
问题 The Vuetify component for a selector is: <v-select :items="items" label="Standard" ></v-select> But when the selector is active, many nested components appear (on inspect), for example, the dropdown menu itself, menu__content . How would I go about styling it? For the "visible" Vuetify component v-select, I can manually add a class, and style it in css directly. However, I can't do this for the hidden components. I've tried to style with the inspect-given class, ".menu__content", but it

How to install vuetify 2.0 beta to the new vue cli project?

由 风格不统一 提交于 2019-11-26 12:48:13
问题 Vuetify 2.0.0-beta.0 has just been released and I want to try it out and play around in a new vue test application. But I get errors when I try to install it in a fresh new project. Here are the steps I\'ve taken. I use @vue/cli v3.8.2 to create a new project with default settings: vue create testapp which gives me successful result: 🎉 Successfully created project testapp. 👉 Get started with the following commands: $ cd testapp $ npm run serve Then I add vuetify plugin to the project with
订阅 vuetify.js