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.)
vuetify.js
9,241
questions
1
vote
0
answers
11
views
i use Vuexy template that is build on vite vue3 and vuetify and i use pinia store, i want to add SSR to my project
the problem is that i get errors in localStorage and window being undefined in all my pages like themes, plugins and etc
and my project is considered as a middle-large sized one so i can't update my ...
- 11
0
votes
0
answers
11
views
How to style a iframe scrollbar in vue when utilziing a reactive variable for contents
I am loading an email template in to my application using the following code:
<v-col class="px-10">
<div v-if="selectedEmailLoading" class="h-100 w-100 d-flex ...
- 1,423
0
votes
1
answer
31
views
Changing v-btn hover effects in vuetify 3
I am having trouble removing the background hover effect, well, manually changing the hover effects of the Vuetify v-btn component.
I have attempted solutions from this github thread(https://github....
0
votes
1
answer
32
views
Loading an email template into a vuetify app
I am displaying email from an outlook email using MS Graph API. The content of the body is in html format so I am trying to add it via the v-html prop such as:
<div v-html="emailContent"&...
- 1,423
0
votes
0
answers
31
views
Vue memory leaks in table using dynamic components
In our Vue/Vuetify 3 project we have generic table component which conditionally renders different components as table cells.
Unfortunately, tables are causing big memory leaks.
It is a big component, ...
1
vote
0
answers
31
views
Vuetify tabs system bug
I have a problem with the tab system in my project. When I want to have tabs in a dialog from Vuetify and I want to have inputs and things that should be there and how it's supposed to work correctly ...
0
votes
1
answer
18
views
How to disable animation of label in v-text-field
How can I disable animation of the label in v-text-field. Seems that's 2 different <label> animated with style so no
.v-input *{
transition: none !important;
animation: none !important;
}
...
- 19.3k
1
vote
0
answers
26
views
how to change data-v-date in vuetify datepicker?
I am using DayjsAdapter in my vuetify datepicker and my issue is that
as you can seee data-v-date is no ISO string local time but on default adapter it has a generic one like '2024-02-04' I am ...
0
votes
2
answers
31
views
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-...
- 3,385
1
vote
1
answer
42
views
how to change v-calendar default color using vue.js 3
<template>
<v-row>
<v-col>
<v-sheet>
<v-calendar class="custom"></v-calendar>
</v-sheet>
</v-col>
</v-row&...
0
votes
1
answer
15
views
Which directive from Vuetify allows to implement scroll tracking in the same way as it is done through IntersectionObserver?
I added scroll tracking functionality so that the user can click Accept only after scrolling to the end of the dialog window. But after the code review I was told that I need to use an existing ...
1
vote
0
answers
29
views
Vuetify v-form Form Validation Not Working in Vitest
I'm currently writing tests for a Vue3 + Vuetify website with Vitest.
The website uses Vuetify components and one of the components I'm testing includes a v-form component. Here is the component code:
...
- 11
0
votes
1
answer
50
views
Why is my Vuetify v-select sending [object Object] instead of the selected value in Vue 3?
I'm working on a Vue 3 project using Vuetify, and I'm having trouble with a v-select component. The selected value is being sent as [object Object] instead of the actual value.
Here is a simplified ...
- 1
0
votes
1
answer
24
views
Vuetify stepper change color and thickness of lines between steps
I have created a stepper using Vuetify stepper. I am wondering how can I change the thickness and color of the lines connecting the steps?
As you can see in my example I am already changing the ...
- 13
0
votes
0
answers
31
views
Vuetify change steps Icon shape
I need to change the shape of Vuetify's step icon. Is there any way to do it? I need large rectangles with rounded corners. I also need to change the text inside the steps. This is my current ...
- 422
0
votes
0
answers
60
views
I'm trying to use Vuetify 3 with Vue 3 and it's not working very well
I'm studying Vue for a personal project and I'm not able to use Vuetify 3. When I created the project I used Vue Cli, I have Vue 3 and now I'm trying to use Vuetify.
It turns out that after including ...
0
votes
0
answers
58
views
Vuetify make stepper scroll
I am using vuetify stepper. I have 14 steps which would be too large to fit in, so I decided to wrap it within a div and force it's width to make sure it overflows in the x direction. I also created a ...
- 13
0
votes
1
answer
51
views
Vue 3 + Vuetify + VTU: How to programmatically set input of v-text-field
I'm trying to write a unit test to check if my form validation works.
for that I've created a Component "Login.vue":
<script setup lang="ts">
import {ref} from "vue"...
- 1
0
votes
0
answers
10
views
Vuetify Sparkline label size cannot be less than 1
Why can't I make the label-size less than 1? If I do, they disappear. I can make them 1.0 or 1.5 but not 0.5.
https://play.vuetifyjs.com/#eNpVUNtugzAM/RUr2kMrcd0o3SJaad9R+pCVdERLSQSBdkP8+5xQKM2D49g+...
- 131
1
vote
1
answer
33
views
Vuetify 3.x replacement for v-list-item-action-text
I've just upgraded to Vuetify 3.x and just realized that they removed v-list-item-action-text with no mention of it in the documentation. Does anybody have a working replacement for this? For ...
0
votes
1
answer
40
views
How to use Vuetify`s <v-dialog> with activator="parent" inside of <v-icon>
I`ve encountered this problem many times now...
Whenever putting a <v-dialog> with activator="parent" into a <v-icon> component - the dialog does not open when clicking the icon.'...
- 1,645
0
votes
0
answers
18
views
Styles not applying correctly when printing in Vue.js/Vuetify app in production
I'm experiencing an issue with my Vue.js/Vuetify application where the print styles are not being applied correctly in the production environment, but they work fine in localhost. Both Firefox and ...
1
vote
1
answer
46
views
Vuetify v-text-field v-menu width issue
When I use prepend-inner-icon,append-inner-icon, or both with a v-text-field, the v-menu width is not full. However, if I don't use these icons, the v-menu width fits perfectly. I want the width to be ...
- 11
1
vote
1
answer
50
views
Adding a new "finish" button in Vuetify v-stepper-actions
I want to add a FINISH option in the last steps of the v-stepper process.
v-stepper-actions documentation does not help much.
<v-stepper v-model="step">
<!-- Stepper Header -->
...
- 29
0
votes
2
answers
37
views
Vuetify v-slider doesnt show thumb and track line while printing page
When printing a page in the browser, the thumb and track of the Vuetify v-slider disappear. I tried changing the background of the slider container with CSS, but that didn't work either. I suspect the ...
- 229
0
votes
0
answers
28
views
Vuetify v-overlay location-strategy="static", how make content to the bottom?
I want make v-card to the bottom of overlay, but prop 'location' dosen't change anything. (It's should be strategt="static" i think, i need menu in the same place from the bottom of screen.)
...
- 1
0
votes
1
answer
32
views
Vuetify Sparkline with long x-axis but keep height the same
Vuetify 2. I am trying to make a Sparkline with a very long x-axis, so I want it to have a horizontal scrollbar (otherwise the labels are unreadable). I also want it to be inside a Sheet (so that I ...
- 131
0
votes
2
answers
68
views
Vuetify 3 v-select not printing all options
EDIT: Here is an example: Vuetify Playground
I recently made a migration from Vue 2 to Vue 3 and fixing errors with the included Vuetify upgrade. I have a v-select which should show all the countries ...
- 1,761
1
vote
2
answers
24
views
Getting unique values from components generated by a script loop
In a VueJS/Vuetify project, there's the following initial data:
export default {
data: () => ({
dirCheckLoading: false,
projects: '',
selectedFeatures: [],
projectOptions: [
...
- 2,222
-2
votes
0
answers
31
views
AppDateTimePicker from vue vuetify
<VCol cols="2">
<AppDateTimePicker
v-model="plantStart"
label="Plan Start"
density="compact"
:rules="[requiredValidator]"
...
- 1
1
vote
1
answer
44
views
Go to previous/next step programmatically
The idea is as follows: there is a V-Stepper component, it contains few steps. I'd like to trigger the action of sliding to the next step when a validateDirectory method completes successfully (i.e. ...
- 2,222
0
votes
1
answer
80
views
Vue2 and Vue3 on the same web page
For a very niche and specific reason I need both major versions of VueJS (2 & 3) to run concurrently on the same web page and each run their own plugins independently of each other. This will all ...
- 3,856
0
votes
1
answer
58
views
Adding a custom style to vuetify table header
I am trying to apply a custom style to v-data header through the use of a fixHeader method.
The CSS basically tries to fix the header in place, even if you scroll to the right.
The problem is that the ...
- 1
0
votes
0
answers
26
views
Issue using vuetify's v-toolbar component in native dialogs
I maintain a vuejs2 / vuetify 2 project that can't be updated for current versions due to large codebase, and also I'm slowly migrating this project's dialogs for a native HTML implementation, I feel ...
- 599
0
votes
1
answer
65
views
Vuetify Grid v-col, fill-height not reaching all rows
This image shows what is going on... Box Five has extra text, and I am using fill-height on all v-cards to make matching heights for all cards..but this is only applied per row, not to all rows inside ...
- 147
0
votes
0
answers
53
views
ref is null inside onmounted() in vue 3 script setup
trying to get parent element of router-view, and show some background animation. but ref is null inside onmounted(), used nextTick() still ref is null. if i use watch with fogElement.value is not null,...
- 697
0
votes
0
answers
22
views
Why is there a difference in autofocus in vuetify 2 and vuetify 3?
I have a problem that needs explaining regarding the difference in autofocus in Vuetify 2 and Vuetify 3. Does anyone know why there is a difference ?
Thank you !
Click to see image of autofocus ...
0
votes
1
answer
41
views
How to use an array of promises with v-data-table
I have a v-data-table that is used in a table component I am building out. I pass data as a prop, which then I do a few things to clean up, then also run an async function which grabs some data from ...
- 1,423
0
votes
1
answer
42
views
vuetify v-form passes validation when it shouldn't
I'm currently making a sign up form that should only submit when all input fields pass the validation. I've written rules to validate the fields and they are working as intended. The problem lies in ...
- 69
0
votes
0
answers
37
views
vue-router scroll doesn't work properly based on user action
I created following page:
<template>
<div>
<v-row>
<v-col>
<div id="c1">
<h2>Chapter 1</h2>
<div><!-...
- 235
0
votes
2
answers
64
views
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 ...
- 7,978
1
vote
2
answers
55
views
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 ...
- 1,423
1
vote
1
answer
41
views
How to select PM in Vuetify VTimePicker component
I want to use the vuetify vTimePicker in my project.
However, when experimenting with the VTimePicker component at https://vuetifyjs.com/en/components/time-pickers/#usage, I am unable to choose PM. ...
- 2,323
0
votes
1
answer
26
views
Setting height of v-footer
I'm trying to reduce the height of the v-footer component and the documentation says I can use the height prop. However, no matter if I try height="100px" or height="50%", the ...
- 69
0
votes
0
answers
58
views
Vue 3 onMounted not loading data in Vuetify data table server
I have created this page with Vue 3 + Vuetify called demo.vue in my project which receives data from an API server.
The problem that I'm facing is that I set up the data inside an onMounted function, ...
- 1
0
votes
1
answer
30
views
Adaptive v-container size
I'm trying to make an adaptive v-container size so that it changes depending on the screen resolution.
I use the Composition API
<template>
<v-container class="bg-surface-variant&...
- 13
0
votes
1
answer
43
views
@update:pagination in Vuetify3?
<template>
<v-app>
<v-container>
<div class="search-section">
<div class="search-fields">
<v-text-field v-model="...
- 5
0
votes
0
answers
54
views
Vuetify3 icons not showing after dev/build
Im bulding my app with Vue and Vuetify, after build/dev ("dev": "vue-cli-service build --dest=../static/ --mode=development --watch") command my generated files goes to static dir
...
- 5
0
votes
0
answers
48
views
Vue application doesn't build. No errors
I have a Vue app. I updated the versions of Vue and Vuetify and all packages but I have a problem, I can't build the app and it doesn't show any errors, just finishes transformed files and not build!
...
- 1
0
votes
1
answer
58
views
Useing v-data-table with 'how-select' and 'return-object' dosen't work correctly
Im trying to use Vue3, Vuetify v-data-table component.Without 'return-object' all works fine, im getting id, but i want to get user objects. So the problem is when i click on select all checkbox first ...
- 1