I’ve recently had to go through this process with a rather large Nuxt application, so I can share some of the insights and solutions we came up with. We managed to bump ours up by about 40 points before we were happy. My number one piece of advice for anyone reading: Ditch the frameworks. By … Read more
When you declare a Vue component, you can create Named Slots, which is a Vue native feature (not from Vuetify): For example, suppose we have an app-layout component with the following template: <div class=”container”> <header> <slot name=”header”></slot> </header> <main> <slot></slot> </main> <footer> <slot name=”footer”></slot> </footer> </div> Parent markup: <app-layout> <h1 slot=”header”>Here might be a page … Read more
Not sure if this is the absolute best way but I was able to get a tooltip on a disabled button by wrapping it in a div tag: Codepen <v-tooltip v-model=”show” top> <template v-slot:activator=”{ on }”> <div v-on=”on”> <v-btn disabled icon> <v-icon color=”grey lighten-1″>shopping_cart</v-icon> </v-btn> </div> </template> <span>Programmatic tooltip</span> </v-tooltip>
You can set width with header like below headers: [ { text: ‘Dessert (100g serving)’, value: ‘name’, width: ‘20%’}, { text: ‘Calories’, value: ‘calories’, width: ‘50%’ }, { text: ‘Fat (g)’, value: ‘fat’ }, { text: ‘Carbs (g)’, value: ‘carbs’, width: ‘200px’ }, ],
If you put the slot attribute on a html element, that html element is passed to the child component to fill the slot with that name. If you don’t want to pass along a html element, you can use slot on a template tag within your component. A template tag groups elements, but does not … Read more
v-list-tile, v-btn, and v-card all extend router-link, so you can use any of the router-link attributes directly on those components instead. In your case you can just use <v-list-tile :to=”item.link”>
I found a way around it using @click:row <v-data-table :headers=”headers” :items=”desserts” :items-per-page=”5″ class=”elevation-1″ @click:row=”handleClick”> </v-data-table> The handleClick function returns a value of the clicked item so I call the method I want to act upon the value within the handleClick method. I also manually highlighted the clicked row since I didn’t find a Vuetify way … Read more
You should use a custom row cell : <v-data-table :headers=”headers” :items=”logs”> <template v-slot:item.createdOn=”{ item }”> <span>{{ new Date(item.createdOn).toLocaleString() }}</span> </template> </v-data-table>
Try the following code snippet <v-btn icon href=”https://stackoverflow.com/fooRoute” target=”_blank”> <v-icon>window</v-icon> Link Text </v-btn> Vuetify Button API
wrap button inside <div class=”text-xs-center”> <div class=”text-xs-center”> <v-btn primary> Signup </v-btn> </div> Dev uses it in his examples. For centering buttons in v-card-actions we can add class=”justify-center” (note in v2 class is text-center (so without xs): <v-card-actions class=”justify-center”> <v-btn> Signup </v-btn> </v-card-actions> Codepen For more examples with regards to centering see here