I have a component for v-select, for example like this <v-container> <v-row> <v-col> <v-select class="no-border" variant="underlined" label="Select" :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']" ></v-select> </v-col> </v-row> </v-container> And i try to remove using css like this .v-input--underlined .v-input__control { border:…
I'm using Vuetify 3 and Maska, which provides masking of input values. I need to put a mask for phone numbers on v-text-field. The documentation describes how it works with a regular HTML input element, but I need to put…
I have a Vue app consuming a Vuetify table that doesn't support bordered tables ( yet, see https://github.com/vuetifyjs/vuetify/issues/16336 ). That's why I tried my own CSS to add the missing borders. Given the following sample ( Reproduction link ) <template>…
i want to create a line with total from each group of items in a list like this: So i did this to group by Car: if (val == 2) { this.dadosResumo.sort((a, b) => (a.carro > b.carro ? 1 :…
I'm just trying to add validation in my vuetify form from my Model or Controller and make an alert. In my .vue file <v-row dense> <v-col cols="3"> <v-text-field dense outlined label="Employee Code" v-model="emp_code"></v-text-field> </v-col> <v-col cols="3"> <v-text-field dense outlined label="Employee…
I have implemented something similar to this code pen in one of my projects. https://codepen.io/sudheer-ranga/pen/bGVbjbx There is one issue that am facing, the selected items disappear for invalid search. So, I found out that the items prop is mutating. Furthermore,…
Question: I'm currently working on a Laravel 9 project with Vite and I'm trying to integrate Vuetify into it. I've followed the instructions on the Vuetify documentation, but the styles are not being applied app.js import App from "./App.vue"; //…
<v-card :style="{ textAlign: 'left' }" class="basic-card pa-6" :class="{ 'small-padding': !$vuetify.breakpoint.xl }" elevation="0" flat :height="windowHeight - 104 + 'px'" outlined align="start" justify="start"> <v-row class="mt-0"> <v-col cols="12" class="pt-0"> <v-tabs v-model="eventTabs" center-active class="mx-0" grow> <v-tab v-for="(tab, index) in eventAssets" :key="index" :class="{ 'mr-1': index…
Given a Vue app based on Vuetify using the table component. When using this setup ( Reproduction link ) <template> <v-app> <v-main> <v-container fluid> <v-table> <thead> <tr> <th>Col 1</th> <th>Txt</th> <th>Checkbox Column</th> <th>Select ( plain txt )</th> <th>Chips</th> </tr> </thead>…
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…