Questions tagged [vuetify.js]

Vuetify.js is an open source framework for building user interfaces for Vue.js 2 and 3. Use this tag for questions specific to Vuetify components and API. (If possible, provide a CodePen or JsFiddle item reproducing your issue.)

Filter by
Sorted by
Tagged with
2 votes
1 answer
34 views

trying to access nested json value for v-select (itemProps) in vuetify

I am trying to make a v-select component in vuetify which get data from a API and show it as options , but the bizzare thing is the recieved json data have an object inside the object and it can not ...
Elias's user avatar
  • 301
0 votes
1 answer
49 views

Error occurs when running 'npm run dev' in Vuetify project initialized with 'npm init vuetify'

I'm new in vue3. I try to use vite+vuetify3 to dev the web. I create a vuetify by using npm init vuetify and it works perfectly.Then I want to start to devlope by using npm run dev and it jump some ...
Joshua H's user avatar
-1 votes
0 answers
18 views

How to create real backend API based on mysql vuexy9 vuejs3? [closed]

I downloaded the vuexy_vuejs_admin template. The template code by default uses a fake backend api that uses the browser's local storage and some files to manage app data. I want to use a real backend ...
android androod's user avatar
0 votes
0 answers
21 views

Could not find useGroup injection with symbol vuetify:v-window-group [closed]

While updating to Vue 3 and Vuetify 3 I got this error [Vuetify] Could not find useGroup injection with symbol vuetify:v-window-group I tried to migrate from Vuetify2 to Vuetify3 and encountered this ...
Mousa Abdelmaksoud's user avatar
0 votes
1 answer
33 views

How can I make use of item-class in v-data-table to increase the font-size?

I'm relatively new to VueJs and have attempted to update the font size to 20px in my v-data-table items (Vuetify 2). While doing so, I came across item-class. This approach was successful for changing ...
user2824374's user avatar
0 votes
1 answer
32 views

Vuetify 3.4/Vue 3.3 radiogroup :rules example?

Pretty basic question. I'm looking for an example of a vuetify 3.4/ vue 3.3 radiogroup with validation rules. Ideally using the composition api. This is a shorted version based of the playground ...
Bob Ramsey's user avatar
0 votes
0 answers
20 views

Setting SASS variables for Vuetify 3 components

I following the guide from the official documentation, using [email protected] and [email protected] My configuration: resources/vuetify/settings.scss @forward "vuetify/settings" ...
Roman Kopka's user avatar
0 votes
0 answers
65 views

Vue project throws error while running the project

I created a Vue project with the Vuetify framework but it is throwing the bellow error after running the project. Command: npm create vuetify Node version: 18.15.0 System: Windows 11 Project run ...
Prajesh Kapadiya's user avatar
0 votes
1 answer
46 views

Vuetify 3 V-Stepper Slot Header

There are two ways essentially to create a v-stepper in vuetify 3. You either use the properties or the template/slots. I can't use the properties method as for some reason the transition is messed up,...
supremesector's user avatar
0 votes
0 answers
37 views

vuetify expanding table not working as expected with nuxt 3

Can anyone tell me why my expand includes the whole row please. I am pretty new to this so any advise would be very much appreciated. I know it works differently in the example on vuetify but i would ...
Paul 's user avatar
  • 595
0 votes
0 answers
42 views

Vue.js Component is not reactive

I have a front-end and back-end environment I separated the request files into different folders, after I did this my components stopped being reactive to the user this.router.push Example: Whenever I ...
Tássio Montenegro's user avatar
0 votes
1 answer
56 views

Time format 1899-12-30T02:46:50.000Z to hh:mm

I'm trying to edit this CRUD Web Application that use Google Sheet as database, Google Apps Script and Vuetify i got from this youtube page TechLever this is the spreadsheet of my project i added ...
LucΔ's user avatar
  • 1
0 votes
0 answers
36 views

Vuetify 3 gives a dark background on buttons, v-menu, v-select and other components on click or on hover

I'm using Vue ^3.2.13 and Vuetify ^3.3.17. Whenever i use the v-btn or v-menu or v-select, there is a dark background on the item selected. Like this This is my vuetify.ts file: import { createVuetify,...
Coder Being's user avatar
0 votes
1 answer
20 views

Vuetify badges not fully visible on Snackbar

I'm not sure why this is happening, and hope there is a css wizard out here who can point me in the right direction. I created a control in a Vue (3.3.4) app with Vuetify (3.3.21) that uses a Snackbar ...
JuanitoCROM's user avatar
0 votes
1 answer
63 views

How can I properly setup a Loading screen in Vue3 and Vite?

I want to setup a Loading screen on App loading. I am currently using a Loading component and setting up its time interval to 2 seconds. However, that is not the proper way to set up a Loading screen. ...
artistAhmed's user avatar
0 votes
1 answer
21 views

Event in v-data-table's template fires for every item?

<v-data-table :items="eventData" item-key="myID" ...> ... <template v-slot:item="{ item, index }"> ... <v-checkbox v-model="item....
Corey Ogburn's user avatar
  • 24.2k
0 votes
0 answers
28 views

How to use vuetify 3 data table sort

I'm on Vuetify 3 and i have a v-data-table with some data inside and I'd like to be able to add a custom sort on some columns. I've tried to add it in the header by putting a function in "sort&...
tazertazer's user avatar
0 votes
1 answer
42 views

Vuetify - How to automatically pick the first element in a AutoComplete component

I want the first element of all the AutoComplete components in my page to be selected automatically. This is the HTML in Vue <template v-slot:[item.classes]="{ item }"> <v-...
Yassir Habek's user avatar
0 votes
1 answer
36 views

Components do not appear back when Loading component is set to false in App.vue?

I have an app bar in my App.vue This app bar covers the entire application coming on top of each and every component. I wanted to ensure that loading screen appears on every component that has the ...
artistAhmed's user avatar
1 vote
0 answers
26 views

Vuetify form submit from keyboard is causing click in a different element instead

I am working on a two-step login form (similar to the design of Google's login form) - the user enters their email address on the first screen, and their password on the second screen. (This is to ...
Moshe Katz's user avatar
  • 16.4k
0 votes
1 answer
35 views

Nuxt vuetify not recognised in Nuxt.config.ts

new error for me, trying to install Nuxt vuetify Install with npm install --save-dev @invictus.codes/nuxt-vuetify npm install Then I add the module to Nuxt.config.ts export default ...
Paul 's user avatar
  • 595
1 vote
1 answer
83 views

vuejs Invalid prop: type check failed for prop "modelValue"

I'm encountering a type mismatch error with the v-file-input component in my Laravel, Vue.js, and Vuetify application. I'm attempting to update an image, but the component expects an array of File ...
MD. ABDUL ALIM's user avatar
0 votes
1 answer
19 views

Iterate properties of a data item in Vuetify v-data-table

Suppose I have a table like this: <template> <v-data-table :headers="headers" :items="items"> <template v-slot:item.red="{ item }"> <v-...
Nikolai Koudelia's user avatar
0 votes
1 answer
38 views

VueJs/Vuetify Barcode Reader How to emit scanned value to currently focused input

I want to emit the scanned value to the currently focused input field. The Scanner is placed inside of a component, that is placed in the App.vue next to the router-view so i can always access the ...
LiiVion's user avatar
  • 304
0 votes
0 answers
24 views

Vuetify VSelect children are not displayed

I'm trying to create Vuetify VSelect for category tree where category object has children array as prop. <VSelect v-model="selectedCategory" :label="label" outlined ...
radek wilo's user avatar
1 vote
1 answer
33 views

Change all vuetify component text and background colors

Guys do you know how can i change all Vuetify component text and background colors? i used custom theme but is not fixed. :) const myCustomLightTheme = { dark: false, colors: { ...
Matin Farzamnia's user avatar
1 vote
1 answer
33 views

Missing some css classes in VueJS3+Vuetify

We have old VueJS+Vuetify application which we are converting to VueJS3. We have some classes defined in the template which is not available in the new version. There are classes like xs12 (which ...
Nilesh's user avatar
  • 20.8k
0 votes
1 answer
40 views

Chatbot with RAG project usaing Django REST API + VUE

I'm in the planning stages of developing a chatbot that leverages Retriever-Augmented Generation (RAG) using my own business data. The chatbot is aimed at providing dynamic responses based on the ...
Lorenzo Simonassi's user avatar
0 votes
0 answers
25 views

How to use item-text and item-value in Vuetify v-combobox?

My Problem with Vuetify's v-combobox Description I am having a problem. In the v-combobox the options are labeled [object Object] instead of the University's name... I really would like to use the v-...
MrMxffin's user avatar
0 votes
1 answer
49 views

How to print "v-card"s and "v-app-bar"s simultaneously

Suppose you have many "v-card" with different heights using Vuetify. The v-app-bar and v-cards are displayed as expected on screen, but the v-cards at the top of all pages are overlaid by ...
sogak's user avatar
  • 1
0 votes
0 answers
38 views

Problem with the Vuetify Playground not rendering v-app-bar correctly

I have another problem that I wanted to ask, so I decided to replicate it in the Vuetify Playground, and it seems like the Playground is having an interesting issue where v-app-bars don't obey the ...
T Smith's user avatar
0 votes
1 answer
25 views

VueJS and Vutify uses some classes which I cant find

New to VueJS. I have some old VueJS application and we are upgrading it to use Vue3. There is use of Vutify and Stylus for CSS in old code. I didnt install stylus in the latest code. There are some ...
Nilesh's user avatar
  • 20.8k
0 votes
0 answers
25 views

dynamic value in vuetify3 table

Opponent1 and Opponent2 are object properties with dynamic values like "horse", "dog", or what you insert in an input field var a = { Rating_Area:1, Opponent1: 0, Opponent2: ...
Ninso AT's user avatar
0 votes
1 answer
50 views

Vuetify 3 tabs switching transition works only in one direction

For some reason, the animation of tabs switching (slider moving) works incorrectly. It moves with transition to the left but without transition to the right. I have a Vue 3 project created using CLI ...
Maxim Lukyanovich's user avatar
1 vote
2 answers
64 views

v-img not showing image from folder

So the last two images are not displaying on my site, the images are located locally in the src/assets/images folder. What am I missing? <template> <section id="projects" class=&...
thefonso's user avatar
  • 3,318
0 votes
1 answer
28 views

Vuetify 3 primary-lighten no longer changes

In Vuetify 2, I used to be able to set custom primary and secondary colors, and then be able to change what degree I want them by. Like "primary darken-2" or "secondary darken-3". ...
Ayman's user avatar
  • 11
0 votes
0 answers
29 views

Error when working on a Typescript RPC library in Vue but works in React

I am working on a typescript RPC library in Vite/Vue 3. The library I am trying to work on is as follows: "verusd-rpc-ts-client": "git+https://github.com/VerusCoin/verusd-rpc-ts-client....
artistAhmed's user avatar
1 vote
0 answers
26 views

How to prevent closing expansion panel from vuetify 3

How do I prevent to close the expansion panel when the user click on erase button inside the v-slot:actions="{ expanded }" tag? <v-expansion-panels> <v-expansion-panel&...
tsiPlus's user avatar
  • 153
2 votes
2 answers
139 views

Extracting Props from Vuetify Component in vue 3

I am trying to write my own wrapper for vuetify components, so I don't have to define the same props in every component. E.g. I want to create my own TextField, that has defaultProps, but can also ...
lub's user avatar
  • 81
0 votes
1 answer
27 views

Image not showing in v-navigation-drawer background in Vue.js/Vuetify

I am currently working on a project using Vue.js and Vuetify, and I am facing an issue with the v-navigation-drawer component when trying to set a local image as the background. Here is the code that ...
unknown123's user avatar
1 vote
1 answer
36 views

Vuetify: Global configuration doesn't apply to buttons inside card actions area

The example given at https://vuetifyjs.com/en/features/global-configuration/ createVuetify({ defaults: { VCard: { VBtn: { variant: 'outlined' }, }, }, }) Seems to only apply to v-...
Erin H's user avatar
  • 13
1 vote
1 answer
17 views

Vutify - how to reduce size of tab headers?

I am using v-tabs in my app but when running on mobile they take up too much space. If I could reduce the padding around the text, all the tabs would fit without using the arrows. I have tried all ...
quilkin's user avatar
  • 1,121
1 vote
1 answer
46 views

How to set height of v-select component - vuetify 3

How to properly set the height of the "v-select" component in vuetify version 3? In the second version, prop height was used for this purpose: <v-select :items="..." height=&...
Korzan Adrian's user avatar
0 votes
1 answer
41 views

Scrollbar shown by default using Vuetify 3

I am trying to use Vuetify (3.4.7) in my Vue 3 project, but for some reason, when I start the server, I am getting an empty scrollbar on the screen that I can not manage to make disappear. Below, you ...
tmoyses's user avatar
0 votes
2 answers
74 views

Fixed table header widths break if there is at least one table header row above them

I'm using the table component from the Vuetify framework. I'm building a dynamic table, based on a configuration, so I don't know how many columns there will be. The fixed table headers are dynamic ( ...
baitendbidz's user avatar
0 votes
1 answer
71 views

Vue 3 Options -> Composition Vuetify

Why isn't the "startDate" reflected within the v-text field of my v-date-picker after mounting when after setting startDate with the response from the getApplication function? My child ...
supremesector's user avatar
0 votes
0 answers
22 views

vuetify form field rules on touched fields in composition api

I'm using vue 3 and vuetify 3 with the composition api. I have 2 v-text-fields and a v-select and I'm running rules on all 3. Something like: <v-text-field ref="a" :rules=[checkMe(a, ...
Bob Ramsey's user avatar
0 votes
0 answers
21 views

Add CSP security headers dynamically in Spring Scala with Vue app

I have this Spring http rules set on the server // 'self' 'light-theme-hash' '?' 'dark-theme-hash' private val CssStyleCspPolicy = "'self' 'sha256-ELeESfcV3Z1sMrVQ47+...
Andrei Maieras's user avatar
0 votes
0 answers
28 views

Scroll snapping too fast

Yo guys , i have added scroll snapping in my veutify project by use normal CSS , scroll-snap-type & scroll-snap-align. But there is too fast to scroll to another page , it almost is jumped to ...
Alden Ling's user avatar
0 votes
1 answer
43 views

How to change the date format of v-text-field

I'm working on a Vue.js project using Vuetify, and I'm encountering an issue with the default date format of the v-text-field with the type "date." Currently, the format is mm/dd/yyyy, but I ...
Chiran Jeewantha's user avatar

1
2 3 4 5
181