9,278 questions
0
votes
0
answers
9
views
How to use primary/secondary Vuetify colors in a SCSS gradient?
I wanted to create a linear gradient from primary color to fully transparent color to accent an element. I'm using SCSS in Vue 3 single-file components.
I tried, as guides suggest:
background: linear-...
- 19.9k
0
votes
0
answers
25
views
How to load vuetify/lib from CDN to achieve minimal sized app
I'm serving a website from a $1 ESP32 which has very little free flash so I need to make it as tiny as possible. Loading all of my packages from a CDN is the best way to achieve this. My site is also ...
- 377
1
vote
0
answers
12
views
TypeScript Error: "Return type of exported function has or is using name 'LoaderSlotProps' from external module" in Vuetify Drawer Component
I’m encountering the following TypeScript error in my Vue 3 + Vuetify project:
Return type of exported function has or is using name 'LoaderSlotProps' from external module "node_modules/vuetify/...
0
votes
1
answer
16
views
Props not available in Vue3 component
I have this in a Twig template:
<div
class="multiSelect"
id="{{ id }}"
data-options="{{ options|json_encode }}"
data-field="{{ handle }}"
>...
- 1,713
0
votes
1
answer
41
views
How can I position a button at the bottom right corner of its scrollable container? (wrapper div cannot be used)
I have following code
<v-card-text
style="min-height: 700px"
class="px-6 py-4"
>
<v-row no-gutters>
<v-col>
<div
v-for="(log, i) ...
- 363
0
votes
1
answer
22
views
Change vuetify v-field label font size
Im trying to customize the font size of the label of a v-text-field. The problem im encountering is that when the field is clicked, the label normally transitions to the top of the field and becomes ...
- 25
0
votes
0
answers
35
views
How to remove the white space on the edges of an image (Vuetify)?
I've been trying for hours to make an image stretch across the full width of the screen but there's always white space either on both sides or just the left side. Right now it's on both sides
This is ...
- 1
1
vote
0
answers
18
views
How to properly update reactive array items for the changes to reflect in UI in Vue 3?
I'm relatively new to VUE JS.
I have a menu, opening onclick of a button inside a component - SelectionMatrix.vue
Inside the menu, I have
one select box at the top which has options of 5 different ...
- 103
0
votes
0
answers
23
views
Change language in a <v-naigation-drawer>. It renders only once
I am using vue-i18n t(text-tag) to change language in my application. I have it working for all the pages except the navigation-drawer because the nav-drawer does not re-render.
<v-navigation-...
0
votes
1
answer
26
views
how to prevent Vuetify's v-date-picker `type` from changing date format
I have a datepicker and I'm trying to restrict the selections between 'month' and date but when I switch the v-date-picker's type from 'date' to 'month', the date format changes from 2024-01-01 to ...
0
votes
0
answers
21
views
npm when installing vuetify Report an error
I installed the option Nuxt Recommended (Everything from Default. Enables auto importing & layouts) according to the process of vuetify official website, but an Error was reported: ENOENT: no such ...
- 11
0
votes
2
answers
67
views
How to place a v-tooltip inside a label in a v-text-field?
I am trying to put a v-tooltip inside a persistent label in a v-text-field but it is not functioning. The tooltip shows up next to the label but nothing happens when I hover my mouse over it, it ...
- 1,846
0
votes
0
answers
25
views
How to validate v-select using vee-validate?
I'm trying to validate a select field in Vue. Currently using Vuetify2 and Vee-validate 3. It works for text field but v-select is not getting validated.
<ValidationProvider name="Sources" ...
- 210
0
votes
0
answers
12
views
Custom Vuetify Build: Minimizing Bundle Size with v-form Only
I'm aiming to optimize my Vue application's bundle size by using only the v-form component from Vuetify. Is it feasible to create a custom Vuetify build that includes solely the v-form component and ...
0
votes
2
answers
36
views
Changing v-text-field default error color through SASS variables doesn't work
I'm trying to change v-text-field default error color. By looking at the documentation it should be possible by changing $field-error-color SASS variable. It will change all inputs default error color,...
- 363
1
vote
1
answer
59
views
Breakpoints related SASS variables doesn't seem to be taken into account when container related SASS variables are defined
I'm trying to override Vuetify $container-max-widths. This is what Vuetify does
$container-max-widths: () !default;
$container-max-widths: map-deep-merge(
(
'xs': null,
'sm': null,
'md': ...
- 363
-1
votes
0
answers
19
views
Vuetify v-carousel responsivness and loading problem
<v-row>
<v-col cols="12" xs="12" md="7" sm="12" class="p-1">
<v-card class="bg-grey-lighten-4 ...
- 47
0
votes
1
answer
39
views
How do I create a 404-NotFound error page in Vuetify3?
I'm new to VueJS and Vuetify as well.
I'm trying to create a 404-page within the pages folder, but it doesn't work from ways I know.
In NextJS for example there are predefined Routes in order to do ...
- 173
0
votes
0
answers
25
views
Large Production Build File Size in Laravel 6 (Mix) with Vue.js 2
I'm using Laravel 6 (Mix) and Vue.js 2 for my project. When I run the yarn prod command on the server, it generates a large production file, which significantly increases the load time of the website.
...
- 217
0
votes
1
answer
19
views
Initiate a function with v-checkbox when the item is clicked by the user
I have a v-checkbox in my vuetify app that is preloaded with some data from the database on load. However, the user can change the model value of this to true or false manually overwriting the data ...
- 1,653
0
votes
1
answer
68
views
Vuetify cannot find useGroup injection when mounting a custom component in a test
Background:
Vue3 app, using Vuetify, vitest, and vue-testing-library.
Problem:
I have a custom component whose template looks something like this:
<template>
<v-expansion-panel>
... ...
- 141
1
vote
0
answers
35
views
How to incorporate draggable feature into vue-chartjs?
I created a BarChart using vue-chartjs and have marked the threshold values using arrows
Here's the code
<template>
<Bar :data="data" :options="options" />
</...
- 103
0
votes
0
answers
15
views
I can't synchronize data from v-treeview
In my Nuxt 3.13.0 project I have a v-treeview. I want the data from the node selected by the user to be synchronised to "activeNodes":
<template>
<v-col v-if="treePopulated&...
0
votes
0
answers
25
views
VExpansionPanel useGroup injection error after upgrading
We use Vue 3 app (Vite) with Vuetify. After upgrading the package to the latest version, we get the following error:
The code looks as following:
<v-col md3>
<v-expansion-panel class=&...
- 4,043
2
votes
1
answer
30
views
I want to disable previous months of selected month in multi-calendars in https://vue3datepicker.com/
I want to disable previous months of selected month in multi-calendars. If in first calendar suppose I've selected May month and when I open another calendar, month menu then it should show Jan, Feb, ...
- 21
0
votes
1
answer
37
views
How to change year text value date-picker in vuetify 3?
I would like to know if there is a way to edit the text value
of the years in v-date-picker in vuetify 3?
I would like to add 'test' string beside the year value.
So instead of only '2021' it would be ...
0
votes
1
answer
36
views
Is it possible to completely control v-menu state from model-value?
I have following code
<template>
<v-menu>
<template #activator="{ props }">
<v-text-field v-bind="props" label="Choose an animal"></...
- 363
0
votes
0
answers
21
views
How to display a custom message in green under a autocomplete box after change
I have an autocomplete box that live updates the database with the selected entry when the user clicks off using blur. I am trying to add a "Updated" with a check icon next to it. I am ...
- 1,653
1
vote
0
answers
81
views
Vuetify 3, using a combobox in a v-for sends warning
I'm using Vuetify 3.5.14. I have a v-for for levels. On each level i have few spells represented by a combobox
When i select the value of a combobox, it works fine, but when i try to search inside the ...
- 520
-1
votes
2
answers
51
views
Other content get covered by background gradient
I'm trying to have a div with a moving background (you can find what I wrote so far here).
The main issue is that the moving background is covering up the other content on the page.
<!-- App.vue --&...
- 363
1
vote
1
answer
73
views
Vuetify 3 autocomplete not closing the dropdown when selecting an option
I am building an autocomplete with Vue3, TS and Vuetify 3. I have a custom-made dropdown with options, and I am able to select the options, navigate to the selected option when clicked, and to show in ...
- 11
0
votes
0
answers
39
views
Vuetify v-data-table search/sort nested object when used for items prop
I have a v-data-table that fills nicely from a axios request and is bound to an interface. I also use this same interface for updating my API so I would prefer to keep my data in this form. However, I ...
- 1,653
0
votes
1
answer
21
views
Vuetify isFocused slotProp doesn't work when used on v-if
So, I have a code like this
<template>
<v-autocomplete :items="items" v-model="selectedItems">
<template #prepend-inner="{ isFocused }">
<...
- 2,836
0
votes
1
answer
43
views
Can’t override the color of a button
Can’t override the color of the Vutify button
<template>
<v-app-bar app>
<v-toolbar-title>Найти репетитора</v-toolbar-title>
<v-spacer></v-spacer>
<v-...
0
votes
1
answer
60
views
How to solve argument is not assignable to parameter of type 'never'?
Main.ts
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
const vuetify = createVuetify({
components,
...
- 131
0
votes
1
answer
47
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-...
0
votes
1
answer
50
views
How can I achieve absolute positioning on a flex element? [duplicate]
I created following component
<!-- AppBar.vue -->
<template>
<v-row>
<v-spacer></v-spacer>
<v-btn text="Our plans"></v-btn>
</v-row&...
- 363
1
vote
2
answers
141
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 ...
- 363
0
votes
0
answers
31
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 ...
- 115
1
vote
2
answers
75
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-...
- 363
0
votes
1
answer
26
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 ...
- 71
0
votes
1
answer
79
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': ...
- 363
1
vote
1
answer
101
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 ...
- 574
0
votes
1
answer
26
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 ...
- 220
0
votes
1
answer
87
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 ...
- 3
0
votes
2
answers
330
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. ...
- 11k
0
votes
1
answer
19
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 ...
- 1
0
votes
1
answer
27
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 ...
- 45
0
votes
1
answer
162
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:...
- 15
0
votes
1
answer
34
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 ...
