9,308 questions
0
votes
0
answers
24
views
Vuetify v-data-table fixed-header: rows visible behind rounded header when scrolling vertically in Chrome
How can I clip table rows under a header with rounded corners when scrolling?
When the table scrolls, the rows slide under the rounded corners of the header. Since the rows have regular (non-rounded) ...
- 1
0
votes
2
answers
67
views
Highlighting selected v-list-item
I just started using Vue / Vuetify to build a frontend and I'm currently struggling with styling a navigation drawer, ie the list in it. The problem is that one an item is selected it's highlighted in ...
- 110
0
votes
0
answers
42
views
Is there a way to force exact pixel size and position of buttons in FlowFuse Dashboard / Node-Red Dashboard 2.0?
Warning: I am a beginner and likely in over my head.
I come from Audio/Visual control programming. One of my clients is using a system based on Node-Red that exposes the Dashboard for customization. I'...
- 9
0
votes
0
answers
47
views
v-data-table header.data-table-select not available in mobile mode
Using the v-data-table header.data-table-select slot allows me to create a special menu for selecting items in the table. It works beautifully.
<template v-slot:header.data-table-select="{ ...
0
votes
0
answers
39
views
Horizontal scrolling on v-calendar
my vue site is simple as hell I think
<template>
<v-calendar
type="category"
v-model="focus"
:categories="categories"
:events="events"...
- 1
0
votes
1
answer
130
views
Nuxt 4 build in production mode is trying to access public folder from .output/server/chunks/public instead of .output/public
I have a nuxt 4 app, with vuetify and sidebase nuxt auth. It runs normally during development, but when i build it and serve it using node .output/server/index.mjs, the page does not load, i can see ...
- 1
0
votes
1
answer
30
views
Vuetify 3: Custom breakpoints not working
I am trying to use custom breakpoints in Vuetify 3:
export default createVuetify({
display: {
thresholds: {
xs: /* custom */,
sm: /* custom */,
md: /* custom */,
lg: /* ...
- 7,373
-3
votes
1
answer
66
views
Display information box when hovering over Info icon [closed]
I'm working on a project where I need to display a little information box when I hover over the i icon (PhInfo). We currently use Vuejs and Vuetify for most styling. What's the best way to get this ...
- 69
0
votes
0
answers
34
views
driverjs not keeping scroll position in Vuetify v-dialog
I have a Vue 2 project where I’m using both Vuetify and Driver.js. On one page, a v-dialog opens and I use the scrollable attribute. Since the dialog content is very long, it becomes scrollable. ...
- 93
1
vote
1
answer
53
views
Background image with blur in not working in Vuetify x Ant
I'm trying to add a blurry background image in an Ant Card.
What I want to do is make the background image of a card blurry, but the problem is that the background image is not showing up.
I used the ...
- 2,888
1
vote
0
answers
49
views
How to make WebStorm auto-import Vuetify types from vuetify/framework instead of internal vuetify/lib/components/*
I’m working on a Vuetify 3 + Vite + TypeScript project in WebStorm.
When I auto-import Vuetify types (e.g. SortItem from the data table), WebStorm generates this import:
import type { SortItem } from &...
- 128
0
votes
1
answer
41
views
Is it possible to use vuetify theme color in component css? [closed]
I have a custom theme color I would like to use in my CSS. I want to change the text and icon color in an element based on whether the mouse is hovering over it and couldn't get v-hover to work ...
- 81
1
vote
3
answers
96
views
How to import Vuetify icons correctly?
Not all icons from vuetify are rendering in my jsonForms component
I'm creating Vue component, that render jsonForms with vuetifyRenderers from '@jsonforms/vue-vuetify' and this part is ok. But ...
0
votes
1
answer
41
views
What are the possible outcomes of the event value from update:modelValue of a Vuetify Datepicker?
So having a look at the documentation we see that when a Vuetify Datepicker component raises the update:modelValue event it passes a value of type [unknown].
My own component is working with Date | ...
- 1,009
0
votes
0
answers
35
views
CSS color variables are not being loaded initially in vuetify with vite and nuxt
I am having production app on nuxt, where I have used vite vuetify plugin to initilize and vuetify plugin to register theme and other things. I am facing issue with color variables which are not being ...
0
votes
0
answers
38
views
Devextreme Charts Vue 2 events not working
I have an app built with ASP.NET Core and Vue 2 and I'm using DevExtreme Charts. The charts are rendering fine, I have no errors inside the console, but I have issue with
Hovering over legend
...
- 153
0
votes
0
answers
64
views
Which is the recommended way to import Vuetify Types and Interfaces?
I have following code
<script setup lang="ts">
// Imports...
const btnProps = {
color: 'primary',
variant: 'outlined',
...
}
</script>
To avoid TS complaints I have to ...
- 457
2
votes
1
answer
202
views
Wrapping of a vuetify component in vue.js 3 type safely
The wrapper component pattern is quite difficult implement in vue.js with Typescript.
To begin with it's difficult to extract the typings for the props, the emits and the slots: especially with ...
- 401
0
votes
1
answer
91
views
Vuetify buttons have a tint to their background color for unknown reason
I have a nuxt3 app using vuetify and I'm running into this issue where some of my buttons have this tint that I can't seem to get rid of. I have an app bar at the top of the screen with buttons that ...
- 105
0
votes
1
answer
39
views
The name of vuetify VListGroup in Trame
I'm making a menu with submenus in Python Trame. Here is a working example:
from trame.app import get_server
from trame.ui.vuetify import SinglePageWithDrawerLayout
from trame.widgets import vuetify
...
- 39
1
vote
2
answers
106
views
Why is my menu item passing the wrong prop to my dialog?
I am constructing a demo to illustrate the ways you can invoke dialogs in Vuetify3 so that I can learn these techniques myself. (I'm thinking of publishing this to GitHub if it all works out so that ...
- 1,837
1
vote
0
answers
31
views
How to change vuetify widget params in Trame Python
I'm truing to make a simple GUI with Trame. And finally managed to make 'File' menu items.
from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
from trame.widgets import ...
- 39
0
votes
0
answers
67
views
How to display an image in a GUI using Trame, Vuetify
I am new to Trame and Vuetify. I need to show an image in the GUI. The GUI would run on a localhost. My MWE is given below:
from trame.app import get_server
from trame.widgets import html, vuetify, ...
- 5,777
1
vote
1
answer
53
views
Vuetify data table pagination icons don't appear
I'm using Vuetify for the first time and I have troubles using the data-table component. I've figured most of my issues out but the pagination icons still don't appear. The buttons are here and ...
- 351
0
votes
1
answer
60
views
v-data-table sorting, capture and control current sorting criteria
Vue 3.5.13, Vuetify 3.8.5
I display a data table, allowing the user to use multi-sorting, so that they can sort by various combinations of columns. Under some circumstances I want to show the data is ...
- 56.2k
0
votes
0
answers
219
views
Failed to resolve Vuetify component imports in Nuxt 3.17.2
I'm getting the following error when running my Nuxt application (version 3.16.0+):
[plugin:vite:import-analysis] Failed to resolve import "vuetify/lib/components/VExpansionPanel" from "...
- 236
0
votes
0
answers
46
views
How to speed up all Vuetify 3 transitions?
I have a Vue.js application using Vuetify 3.8 and am trying to figure out how to speed up all the transitions. I cut and pasted CSS from vuetify.css to override the durations but that doesn't seem to ...
- 9,704
0
votes
0
answers
29
views
Vuetify format date in v-date-table
I'm trying to format a date from 'YYYY/MM/DD' to 'DD/MM/YYYY' in a v-date-table using a template
<template v-slot:[`item.project_target_date`]="{ item }">
{{ item....
- 1
0
votes
0
answers
42
views
How can I load Material Design Icons font files inside a Shadow Root when using WXT’s cssInjectionMode: 'ui'?
I’m building a browser extension with WXT and Vuetify, and I need to render components inside a Shadow Root.
In my content script I’ve set up:
import '@mdi/font/css/materialdesignicons.css'
import '...
- 1
0
votes
1
answer
67
views
vuetify hint property not working with my VUE3 setup
I have quite a simple form in a VUE3 app. I'm using Vuetify and its working fine in all the pages and components I have written. But today I wanted to make use of the hint attribute on a v-text-...
- 39
0
votes
1
answer
74
views
Vue 3 & Vuetify | Trouble getting content of Vuetify tab to scroll when there is overflow
I'm trying to get the content of a Vuetify tab to scroll without statically sizing the parent control.
Here is a Vuetify playground that contains the structure of my project:
Vuetify Playground
You ...
- 83
0
votes
1
answer
161
views
Vuetify 3: Custom Key Filter on v-data-table
I have a list of data items to display on a Vuetify v-data-table. One of the members is an object itself. I want the search to peek inside that structure when deciding whether to include it. There is ...
0
votes
0
answers
47
views
Vuetify text-area scroll not working when placed inside slot of custom component
My project uses Vue 3 (w/ Composition API) and Vuetify. I'm trying to create a custom container component that essentially adds a title bar to its content. This is the custom component:
// ...
- 83
0
votes
0
answers
34
views
how to vuefity3 migration
I’m upgrading my Vue.js project from Vuetify 2 to Vuetify 3 (on Vue 3). Before, I had a global CSS file full of overrides targeting Vuetify 2 class names.
After switching to Vuetify 3, none of these ...
- 1
0
votes
1
answer
233
views
How to fix MDI icons appearing as weird characters (symbols) after deployment, using Vuetify and Vue 3?
I am having a render issue with mdi icons appearing as some symbols instead of actual icon usually after deployment (in production environment only) when the tab is opened for some time.
Problem ...
- 1
1
vote
1
answer
58
views
vuetify v-select not loading data from array
in VPlay I added this code:
<template>
<v-app>
<v-container>
<v-select
v-model="selectedState"
:items="...
- 43
1
vote
1
answer
93
views
How to make Vuetify v-carousel fill remaining height while using v-app-bar in v-layout
My project uses Vue 3 w/ the Composition API, Vue Router, Typescript, and Vuetify.I'm struggling to get a v-carousel component from Vuetify to fill the remaining height of a v-container object when ...
- 83
0
votes
0
answers
33
views
Pick image coordinate of image inside a container
I would like to accomplish the following in vuetify but I am struggling to get it to work
I need to pick a point inside an image and send it to some other service to process along with the image
But ...
- 89
0
votes
2
answers
109
views
Method Illuminate\Auth\RequestGuard:: does not exist
The logout button doesn't work, it returns “Method Illuminate\Auth\RequestGuard::logout does not exist.” I checked everything seems to be correct, but it doesn't work.
route:
Route::middleware(["...
0
votes
1
answer
73
views
How to make invisible (remove) some parts of Vuetify components in Vue 3 app by using CSS?
We use Vuetify components in our Vue 3 app and I'd like to make invisible (remove) some parts of them in "view" mode. Please, take a look at the folllowing screen shot.
You can see v-select ...
- 4,075
0
votes
1
answer
57
views
Vertically aligning Vuetify VTextField
I often need to put Vuetify text field (or select/autocomplete) inside various bars Vuetify has (VAppBar, VToolbar, etc). Of course, I'd like for those fields to be vertically centered inside the bars....
- 2,928
0
votes
0
answers
48
views
How to manage UI responsiveness in Vuejs/vuetify when there is windows scaling enabled
I have developed an application based off of my windows settings being scale set to 100% rather than the default 150%.Therefore in Chrome my application looks perfect at 100% however my users when I ...
- 1,843
0
votes
0
answers
65
views
i18n in Nuxt 3 with Vuetify 3 not working in v-data-table
I can't configure i18n in my Nuxt 3 + Vuetify 3 project.
I need to translate elements in v-data-table, but instead of the expected text, I see $vuetify.dataFooter.itemsPerPageText in the component.
...
- 47
0
votes
0
answers
47
views
Vuetify display parent div of image a bit larger using padding
I cannot seem to get this working in Vuetify. I have a default Nuxt JS project with Vuetify installed. But I do think this problem is framework agnostic. I cannot seem to get it to show as I want to ...
- 1,213
1
vote
0
answers
35
views
Vuetify v-select: Screen reader announces previous item first when focusing on the next element
I am using Vuetify's component in my Vue 3 project. However, I am facing an issue with screen readers (tested with NVDA and VoiceOver). When a user selects an option and then moves focus to the next ...
0
votes
1
answer
46
views
How to create a gradient background for a Vuetify control?
My project: Vue 3 w/ the Composition API, Typescript, and Vuetify.
I'm trying to set the background of a v-navigation-drawer control to a gradient, but whenever I set a custom class on the control, ...
- 83
0
votes
1
answer
48
views
Vuetify 3 component event propagation to parent
I have code where I'm using <v-tooltip> in slot of <v-select>. When I try to click on tooltip icon which is in prepent-inner slot. click is also applying on <v-select> and dropdown ...
1
vote
1
answer
70
views
Vuetify `v-data-table-virtual` not selecting all items
I want to use a v-data-table-virtual from Vuetify to show API scopes. The problem is that I have 643 scopes but when selecting all rows it only selects 611 scopes.
Here are the relevant parts of my ...
- 879
0
votes
1
answer
29
views
Vue v-show not working on v-btn as expected
I have a back and a continue button for my application. I want to hide the back button, but with the v-if the continue button becomes left aligned instead of right aligned. I'd like to keep the ...
- 11
0
votes
3
answers
368
views
Vue 3 with Typescript and Vuetify 3 Set Focus on Form Text Field Not Working
It seems I've tried every solution on the internet to manually set focus on a VTextField component in Vue with no luck, and I'm not sure what to try next.
What is suppose to happen is the form clears ...
- 83