9,309 questions
1
vote
1
answer
71
views
HTML img element (or v-img) will not load SVG, request has status 200 but empty response in Dev Tools > Network, No CORS issue and no error in console [duplicate]
I am trying to load an SVG image in a Veutify/Vue web app without embedding the SVG in the project build bundle. I want to loaded the image dynamically at runtime. When referencing the image via the ...
- 7,545
1
vote
1
answer
52
views
Fill v-combobox value with an API response
I'm trying to fill a v-combobox values with an array of Object filled by an API call.
I tried to fill this v-combobox with :items=myArrayOfObject but it doesn't work and in my console I see "type ...
- 11
1
vote
1
answer
51
views
Button takes space for empty text although it should only render icon button
Given a dynamic Vuetify LinkButton component based on a configuration file ( there are more props but I think this example is sufficient for troubleshooting )
<v-btn
:prepend-icon="`mdi-...
0
votes
0
answers
48
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
74
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
56
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
49
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
41
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
-1
votes
1
answer
191
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
31
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,383
-3
votes
1
answer
70
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
41
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
54
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
50
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
105
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,007
0
votes
0
answers
36
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
39
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
212
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
98
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
40
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
111
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
68
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,787
1
vote
1
answer
62
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 ...
- 349
0
votes
1
answer
61
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
225
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
47
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
30
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
44
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
72
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
80
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
177
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
35
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
244
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
99
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
112
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
77
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
61
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
51
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
67
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
50
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 ...
