Html – <h1> element vs "text-h1" class
I would like to place a heading in Vuetify. I noticed that you could use either the <h1> element or the text-h1 class. What is the difference between them? It seems that the latter one has a bigger font size.…
Css – How can I disable v-text-field focused effect?
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…
Javascript – Vue 3 form input flow breaks when emit is called on blur
In Vue 3, when emitting an event from child to parent to update refs and subsequently refresh the props of the child the form control flow breaks i.e. tabindex or [tab]ing between fields doesn't work. My code is roughly setup…
Css – Margin or padding for an SVG image in v-app-bar?
This should be a dead-easy question, and maybe isn't specifically vue/vuetify but I'm ramping up and this would help my understanding. New to vue/vuetify, starting a brand-new front end. I'm using v-app-bar Here's my app.vue: <template> <v-app> <v-app-bar :elevation="2"> <!--…
Javascript – Vuetify 3 – Implementing date picker
I'm trying to achieve a simple "month-picker" in Vuetify 3. I went through the documentation and the component's API, but I can't seem to find a way to use it. There is a type property on component, but it doesn't…
Javascript – Vuetify v-data-table sort on string formatted dates and potential nulls
I have a v-data-table which includes dates that have been formatted with dayjs to "MM/DD/YYYY" however some dates are null since they have not been completed yet. I am trying to add sorting in the header array for this formatted…
Javascript – Pass data props from child component to parent in Vue3
i'm writing a personal project for my portfolio. I'm making a registration site. So the user will fill: personal data, shipping info and then will see a recap. I have a view (Register.vue) where I put a stepper from Vuetify…
Javascript – v-autocomplete not showing all the item in selection list from list
I am sending array which has value from 1-100 on v-autocomplete item props. But on scrollbar only number till 40-50 shows up. <template> <v-app> <v-container> <v-autocomplete label="Autocomplete" :items="CountList" variant="outlined" > <template #item="{ item }"> <v-list-item>{{ item.raw }}</v-list-item> </template> </v-autocomplete> </v-container>…
Javascript – How to display modified text from data member in :items object array for item-title in v-select (Vuetify) dropdown list?
I am new to Vue and I am currently working with Vuetify to build dropdown "v-select". If there is a way, that will be great! Otherwise, I am thinking of creating new array and covert data for some members in…
Css – How do you do a theme change animation in vuetify?
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…