vuetify.js

I'm aware of the question change-default-font-in-vuetify in SO, but it doesn't address my problem as it was posted before vue-cli-3 came out, so the ideas there don't apply here as that, the official docs from Vuetify on how to change themes and other options don't have any valid step for when the project is created with vue-cli 3. So far my attempts go like this: - vue create fooproject (using default config, but even if I don't use the default but cherrypick what I want in the project and select the css-preprocessor as stylus manually it won't work) - vue add vuetify - it creates a plugin

I want to create a vue page that has two data-tables that fill half the screen (vertically). Each data table should have a scroll bar if required. I have tried the markup below, but this does not size the data-tables to the screen size. Here is a codepen example <div id="app"> <v-app id="inspire"> <v-container fluid grid-list-md fill-height> <v-layout column> <v-flex md6> <v-data-table :headers="headers" :items="desserts" hide-actions class="elevation-1" > <template slot="items" slot-scope="props"> <td>{{ props.item.name }}</td> <td class="text-xs-right">{{ props.item.calories }}</td> <td

I'm using VueJS v2.5.13 and Vuetify v0.17.6. I'm building a select with autocomplete functionality and whenever the user types something that's not on the list they'll be able to see a action to create a new option as the code below shows: <template> <v-select prepend-icon="view_list" :items="options" label="Quick searches" v-model="selected" item-text="label" autocomplete :search-value="inputText" clearable dense> <template slot="item" slot-scope="data"> <v-flex xs12> <v-layout> <v-layout justify-start fill-height align-content-center> <span>{{data.item.label}}</span> </v-layout> <v-layout

I want to use Vuetify (v1.0.18) to render some static navigation using v-tabs . The routing is done on the server side, so I need a way to set the active tab by properties. It's a very basic task, but I don't get it to work. Example: <v-tabs> <v-tab href="/path1">Tab 1</v-tab> <v-tab href="/path2">Tab 2</v-tab> </v-tabs> This preselects the first tab - fine. Now the question ist: How to preselect the second tab? The following does not work: <v-tabs value="tab2"> <v-tab id="tab1" href="/path1">Tab 1</v-tab> <v-tab id="tab2" href="/path2">Tab 2</v-tab> </v-tabs> To preselect an active tab: <v

Question: I have a loop displaying specified amount of cards. The problem is with ma-5 attribute in <v-flex> . On xs screen size this margin is too big. Ho do I specify a different margin for different screen sizes? Code: <v-container> <v-layout row wrap> <v-flex xs12 sm6 md4 ma-5 v-for="card in filteredCards" :key="card.id"> <v-card flat class="elevation-20 test"> <v-card-media :src="card.image" height="200px"> </v-card-media> <v-card-title primary-title class="pa-4"> <div> <h3 class="headline mb-0">{{card.title}}</h3> <div style="min-height:50px;">{{card.description}}</div> </div> </v-card

My use case. I got an array of objects from a back-end api. I want to render those objects in a v-select This is my code. <v-select :items="categories" name="category" label="Select a category" v-model="category" v-validate="'required'"> </v-select> But it gives me the output. But I wants objects name property to be display in the v-select We would do this in vanilla Vue.js <li v-for="cat in categories" :key="cat.name">{{cat.name}}</li> But here with vuetify we can't do this. :items="categories.name" Vuetify documentation Can be an array of objects or array of strings. When using objects, will