I have following v-text-field which has following defaults // defaults.ts (used by Vuetify) const INPUT_DEFAULTS = { color: '#8AB8E5', baseColor: '#8AB8E5', bgColor: '#E8F1FA', rounded: 't-lg', persistentHint: true } const defaults = { VTextField: INPUT_DEFAULTS } and these are the CSS…
I created following data table: <script setup lang="ts"> const headers: any = [ { title: 'Title', key: 'title', cellProps: { class: ['my-bold-class'] } } ... ] const items = [...] </script> <template> <v-data-table :headers :items ></v-data-table> </template> Now I want…
Steps to see what I mean: Head to the vuetify website Click on the cog icon Select either dark or light theme. As you alternate between different themes, an animation plays. A circle (starting from roughly the position of the…
I've finally been able to encapsulate a Vuetify <v-dialog> in a custom component in Vue 3 Composition API. Below is the code for my SignUpDialog.vuecomponent. It's also available in a Vuetify Play playground. <script setup> import { onMounted } from…
I have already several days looking for a solution CSS or component for making an image resizable (height and width) and over the image, elements keeping the position over the same X and Y coordinates of the image. A simple…
Problem Statement : I just migrated my Vue 2 application (Contains Vuetify 2) into Vue 3 (with Vuetify 3). After migrating, validate() method on form is not working as expected. It always return truthy value if still there are errors…
Currently there is no support for grid lines for Vuetify 3 tables ( https://github.com/vuetifyjs/vuetify/issues/16336 ) So I added them with custom CSS ( reproduction link ) <template> <v-app> <v-main> <v-container> <v-table fixed-header height="300px"> <thead> <tr> <th>First header</th> <th>Second header</th> <th>Third…
I'm using Vuetify and have some content above a table. The table should have a fixed-header but this requires a height prop. A height of 100% didn't work and I can't use 100vh because I have some content above. Reproduction…