Skip to main content
Filter by
Sorted by
Tagged with
0 votes
0 answers
10 views

Create slots for v-combobox vuetify

I have a component that I want to create a slot for v-combobox because I want to show the dropdown items as a custom style section , <v-combobox v-model="select" v-...
Pourya Behzadpour's user avatar
0 votes
1 answer
36 views

How can I achieve absolute positioning on a flex element?

I created following component <!-- AppBar.vue --> <template> <v-row> <v-spacer></v-spacer> <v-btn text="Our plans"></v-btn> </v-row&...
PyKKe's user avatar
  • 281
0 votes
1 answer
33 views

How can I use v-img with SVG images?

I'm using Vuetify v-img tag, but it doesn't seem to accept SVG images. <!-- does not work --> <v-img src="../assets/logo.svg" width="40"></v-img> So I tried the ...
PyKKe's user avatar
  • 281
0 votes
0 answers
22 views

How can I get FontAwesome icons to display in Vuetify checkboxes?

I'm new to Vue. I'm migrating a Vue app from BootstrapVue to Vuetify. The app already uses FontAwesome5, although it imports specific icons by name. I've managed to get icons to display, including the ...
Chris Sellers's user avatar
1 vote
1 answer
45 views

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-...
PyKKe's user avatar
  • 281
0 votes
1 answer
22 views

vuetify trouble with active element highlight

i have a very simple template main.js import { createVuetify } from 'vuetify' import { createApp } from 'vue' import App from './App.vue' import * as components from 'vuetify/components' const ...
Андрей Б's user avatar
0 votes
1 answer
52 views

How can I add a new border radius definition?

The rounded classes are generated based on following SASS variables (I think) $rounded: ( 0: 0, 'sm': $border-radius-root / 2, null: $border-radius-root, 'lg': $border-radius-root * 2, 'xl': ...
PyKKe's user avatar
  • 281
1 vote
1 answer
53 views

Adding "View More" functionality for truncated long text in Vuetify v-data-table

I am working on a Vuetify 3 data tabe and need to implement a "View More" button for description that exceed three lines. I want to use scrollHeight and clientHeight to determine if the text ...
Jessica's user avatar
  • 544
0 votes
1 answer
21 views

Show a tooltip when the placehoder is overwritten

I want to dynamically display a label for a text box based on whether the v-model is empty or not. When there is no user input, the placeholder can handle this, but once text is entered (which is the ...
Giulio's user avatar
  • 210
0 votes
1 answer
37 views

Adjust input field height of `VNumberInput` in vuetify

I'm trying to adjust the height of the v-number-input or VNumberInput to 32px in vuetify. While some parts of the component seem to respond to my CSS, I'm unable to reduce the height of the entire ...
Victor's user avatar
  • 3
0 votes
2 answers
158 views

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. ...
Stokedout's user avatar
  • 11k
0 votes
1 answer
18 views

How to make an image to fullfill the <v-main> window

its the first time for me to use vuetify to create my own website. the question is: i want to place an image to my homepage and it has to full fill the <v-main> window.i have no idea how to do ...
zx p's user avatar
  • 1
0 votes
1 answer
23 views

Vuetify: Nested v-for for making lists in cards

I am attempting to create Recipe Card Components using data from a JSON file. I can successful get the cards to render with the correct data. However in the JSON file each recipe contains a nested ...
NingenIsu's user avatar
0 votes
0 answers
50 views

Vue 3 convert output of Quill editor Delta object to Html and display the Html

I am designing an app where users can comment using a rich text editor and those are displayed as a html object. This is the code to take comments: <quill-editor theme="snow" v-model:...
Hossein's user avatar
  • 13
0 votes
0 answers
20 views

v-data-table-server pagination not working

`I have 3 components for a table. In my employees table, when i click the next button in the bottom of the table, it sends two request, one with the next page url, and simultaneously it sends the ...
Juan Eduardo Escobar's user avatar
0 votes
1 answer
25 views

Issues with SCSS and Vuetify in Vue 3 using npm run serve — Invalid Dependencies

I encountered an issue when running my Vue 3 project, which uses Vuetify and SCSS. The project is started using the npm run serve command, and I am getting multiple warnings about "Invalid ...
Олег Гор_'s user avatar
0 votes
0 answers
52 views

Vuetify error findComponentParent prevents my app to load correctly

After upgrading my project, I run into the following error with [email protected]. It completely prevents my app from loading correctly but I would say it's hard to debug. I've tried to rollback Vuetify ...
Théo Lavaux's user avatar
  • 1,444
0 votes
0 answers
22 views

Vuetify V-calendar don't show some events and replaces them with (1 more) label even there isn't other events in that day

I'm displaying a whole year using different v-calendars, but for some reason in some months the event is not displayed right. As you can see, the events are not displayed even though the data ...
Vini-Posada's user avatar
0 votes
0 answers
34 views

Vuetify tooltip text always visible on mobile after touch

I'm using vuetify tooltip on v-icon. The tooltip text is supposed to be visible on hover, which works as expected for desktop. On mobile (or any touch screen device), it should not at all be visible. ...
Shivam Chaudhary's user avatar
0 votes
0 answers
28 views

For nested menu's attach the inner menu it's own button

Good day everyone, I needed some nested menu in my app so I created. You may see the reproduction. Also see the code below: <v-app> <v-container class="d-flex justify-end"> ...
Ahmet's user avatar
  • 11
0 votes
1 answer
69 views

How can I read and save the content of a slot in Vue.js at runtime?

I'm currently working on a project with Vue.js and have a problem with using slots. I have two components: PageView.vue and SlotComponentView.vue In SlotComponentView.vue, there is a slot named ...
Deniz's user avatar
  • 1,503
0 votes
1 answer
16 views

Vuetify form fails validation but the fields are correct

I have a nuxt (latest) application and I have this this login form so I can log into the back end api. The problem is the validation fails because the form stays invalid. Here is the code for the form:...
crawlingdev's user avatar
0 votes
0 answers
27 views

Vuetify steppers + Vuelidate nested components dynamic scope

Trying to setup form validation for Vuetify steppers with Vuelidate. I'm making use of nested components with each component it's own validation. <template> <VStepper v-model="page&...
Ciryk Popeye's user avatar
0 votes
0 answers
38 views

Vue3 & Vuetify Basic Layout Issue

I am trying out Vuetify and seem to be having some issues around the layout system. I am following the Application layout docs: https://vuetifyjs.com/en/features/application-layout/ I want a simple ...
bengerman's user avatar
  • 123
0 votes
0 answers
36 views

Vuetify flex wrap order

I'm working with a flex container that has four items. The third item has a variable width based on dynamic content. When the container runs out of space, I want the third item to wrap to a new line, ...
Mads Gadeberg's user avatar
1 vote
1 answer
43 views

vuetify2 to vuetify3 transition-group no longer working

So I'm currently working on my transition from Vue2 Vuetify2 to Vue3 Vuetify3 and it's been quite the challenge honestly. It seems my code needs to rely less and less on Vuetify since things like the ...
PhilippeTh's user avatar
0 votes
0 answers
24 views

How to change vuetify expansion panel animation

I'm currently using Vuetify with chart.js I tried to implement a chart.js inside a v-expansion-panel : <v-expansion-panels class="my-4" variant="popout"> ...
alexis riviere's user avatar
0 votes
0 answers
100 views

Adding vuetify to new clean nuxt installation gives me an error when running nuxt

I am new to nuxt and vuetify and I did a new fresh clean installation of nuxt. Then I followed the instructions on the the nuxt vuetify website to install vuetify-nuxt-module https://nuxt.vuetifyjs....
crawlingdev's user avatar
0 votes
0 answers
83 views

Vuetify, v-data-table-virtual nested scroll bug

I'm trying to implement a virtual data table where when a row is clicked, it shows another embedded data table. However, with the row expanded, when you attempt to scroll the outer table, it gets ...
Phu Tran Viet's user avatar
0 votes
0 answers
44 views

Datetime picker in vuetify vuejs

We are using vuetify for our vuejs website. We are able to integrate TimePicker and DatePicker in our project. User has to click twice to choose datetime. Is there any way to choose both in a single ...
Nilesh's user avatar
  • 21.1k
1 vote
1 answer
50 views

How to change style or add over component on headers of v-data-table on vuetify3

I want to add some specific changes on the header of v-data-table like this: DATE | Libelle <v-chip>(No count)</v-chip> |TYPE Anyone does have any ideas how to do that? const headers = [ ...
An Ja's user avatar
  • 79
-1 votes
0 answers
24 views

Never managed to make RTL work in Vuetify

I am using Vuetify to do a simple project so my problem is that the project is fully in Arabic so everything should be RTL everything was great until I used v-select and v-text-field I have never ...
LMech's user avatar
  • 156
0 votes
1 answer
121 views

v-autocomplete/v-select width changes depending on item length (Vue/Vuetify 3)

The selection menu of the autocomplete/select changes according to the text length of the item. For example, when the items are about 5 characters long, the menu's length is the same as the dropdown, ...
Naomikho's user avatar
1 vote
2 answers
67 views

How to prevent the selected state from being released when an already selected element in v-list of vuetify3

How to prevent the selected state from being released when an already selected element is reselected. using vue3, vuetify3 v-list consists of v-list-item, v-list-group and children of v-list-group. I ...
adddd's user avatar
  • 41
0 votes
2 answers
82 views

How to keep the reactivity of data when passing it into a function?

Suppose my component looks like this: <script setup lang="ts"> interface FileMetadata { owner: string, location: string, size: number, // And around 50 mores... } interface ...
Triet Doan's user avatar
1 vote
0 answers
37 views

Using Vuetify with JSX

Could you please help? In my project, I'm using Vue 3 + TypeScript + TSX + Vuetify. When I try to use Vuetify components, such as v-btn, I encounter a TypeScript error when listening to the onClick ...
yamadetta's user avatar
1 vote
0 answers
37 views

Why does removing <v-app-bar> make the program work properly

I created a new vuetify project, but after I used <v-app-bar>, everything on my page disappeared. As you can see from F12, there is nothing in <div id="app">: <body> &...
baotianxia's user avatar
0 votes
1 answer
39 views

How to use FontAwesome in Vue 3 without using modules?

I'm migrating a project from Vue 2 to Vue 3. This project uses the global Vue object. There's no imports or modules. Every tutorial looks the same, from https://vuetifyjs.com/en/features/icon-fonts/#...
Corey Ogburn's user avatar
  • 24.6k
0 votes
1 answer
43 views

How to create a cumulative v-file-input in vuetify

I have a v-file-input that I assign some docs in . If a user wants to add some files to it and click to select the files it clears the previous values. I would prefer to allow the v-file-input to ...
Qiuzman's user avatar
  • 1,585
0 votes
2 answers
35 views

In vuetify combobox how to transform into uppercase each character typed by the user

Can someone know in vuetify combobox on how to transform each character or letter into uppercase that being typed by user. Thanks I tried these events change, input and update:search-input to get the ...
user26915268's user avatar
0 votes
0 answers
31 views

How to make a dynamic color pack in Vuetify based on the theme?

How can I configure Vuetify to use a dynamic color pack that switches between light and dark themes based on the current theme? Is there a specific way to set this up in the Vuetify scss configuration?...
Chairil Fauzi Firmansyah's user avatar
0 votes
0 answers
30 views

Container element not found when rendering from slot in parent

I am passing a slot from a parent to multiple children. In one of the child components, the div-id is not found, possibly because the slot is not being rendered fast enough and the id is not found ...
Audiosleef's user avatar
0 votes
0 answers
91 views

vue and vuetify in shopify app theme extension

I tried Vue and Vuetify CDN to load a v-btn in a .liquid file for shopify app extension but I'm facing an error Blocked script execution in 'https://online-store-web.shopifyapps.com/themes?embedded=......
shamim shahcheraghi's user avatar
0 votes
1 answer
37 views

Auto-complete custom style of the list in vuetify

I want to customize the dropdown list, with class of vuetify or with custom class. How can I do it? This is the image of list I tried to check with F12 and see what the class of the list is, but every ...
Bela's user avatar
  • 1
0 votes
0 answers
26 views

Vuetify Combobox text highlighting when using item slot

When using the item slot in the Vuetify Combobox, we lose the default search text highlighting. Example In Vue2 there was a way to pull that functionality from the parent as seen in this answer Is ...
Justin's user avatar
  • 879
0 votes
0 answers
39 views

Incorrect display of default layout and main context in Nuxt 3 + Vuetify 3 app

In my Nuxt 3 + Vuetify 3 app there are two layouts: default and auth. app.vue <template> <NuxtLayout> <NuxtPage /> </NuxtLayout> </template> layout/default.vue &...
Kirill Donenko's user avatar
0 votes
1 answer
23 views

Relation of v-select and v-checkbox on two others components

i need help for my application in Vuejs , vuetify , i have two components : 1- MyTableFirst.vue 2- FirstCall.vue I want to do this : if i check checkbox on the MyTableFirst.vue , the v-select it will ...
An Ja's user avatar
  • 79
3 votes
0 answers
34 views

how to reuse a selection event as a slot inside v-select [duplicate]

I have a reusable set of components that I use throughout the entire app. The problem is events like template(v-slot:item="{ props, item }") are not being rendered when passed as a slot from ...
user3692459's user avatar
1 vote
0 answers
45 views

Vuetify component not loading completely in vue 3 webpack

I have a legacy vue project built with Webpack, which recently migrated to vue 3. I'm trying to add Vuetify to it following the official documentation. But only a few components are working and most ...
Abhinab Rajopadhyaya's user avatar
1 vote
1 answer
49 views

Default option in v-select not clearing/deselecting

I've a survey page in Vue JS which there is a dropdown which contains multiple options. There must be an answer selected by default whose answerid is stored in the api response as DefaultAnswerId. The ...
Dips's user avatar
  • 13

1
2 3 4 5
186