9,276
questions
0
votes
0
answers
10
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
36
views
How can I achieve absolute positioning on a flex element?
I created following component
<!-- AppBar.vue -->
<template>
<v-row>
<v-spacer></v-spacer>
<v-btn text="Our plans"></v-btn>
</v-row&...
0
votes
1
answer
33
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 ...
0
votes
0
answers
22
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 ...
1
vote
1
answer
45
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-...
0
votes
1
answer
22
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 ...
0
votes
1
answer
52
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': ...
1
vote
1
answer
53
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 ...
0
votes
1
answer
21
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 ...
0
votes
1
answer
37
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 ...
0
votes
2
answers
158
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. ...
0
votes
1
answer
18
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 ...
0
votes
1
answer
23
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 ...
0
votes
0
answers
50
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:...
0
votes
0
answers
20
views
v-data-table-server pagination not working
`I have 3 components for a table. In my employees table, when i click the next button in the bottom of the table, it sends two request, one with the next page url, and simultaneously it sends the ...
0
votes
1
answer
25
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 ...
0
votes
0
answers
52
views
Vuetify error findComponentParent prevents my app to load correctly
After upgrading my project, I run into the following error with [email protected].
It completely prevents my app from loading correctly but I would say it's hard to debug. I've tried to rollback Vuetify ...
0
votes
0
answers
22
views
Vuetify V-calendar don't show some events and replaces them with (1 more) label even there isn't other events in that day
I'm displaying a whole year using different v-calendars, but for some reason in some months the event is not displayed right.
As you can see, the events are not displayed even though the data ...
0
votes
0
answers
34
views
Vuetify tooltip text always visible on mobile after touch
I'm using vuetify tooltip on v-icon. The tooltip text is supposed to be visible on hover, which works as expected for desktop. On mobile (or any touch screen device), it should not at all be visible. ...
0
votes
0
answers
28
views
For nested menu's attach the inner menu it's own button
Good day everyone,
I needed some nested menu in my app so I created. You may see the reproduction. Also see the code below:
<v-app>
<v-container class="d-flex justify-end">
...
0
votes
1
answer
69
views
How can I read and save the content of a slot in Vue.js at runtime?
I'm currently working on a project with Vue.js and have a problem with using slots.
I have two components: PageView.vue and SlotComponentView.vue In SlotComponentView.vue, there is a slot named ...
0
votes
1
answer
16
views
Vuetify form fails validation but the fields are correct
I have a nuxt (latest) application and I have this this login form so I can log into the back end api. The problem is the validation fails because the form stays invalid. Here is the code for the form:...
0
votes
0
answers
27
views
Vuetify steppers + Vuelidate nested components dynamic scope
Trying to setup form validation for Vuetify steppers with Vuelidate.
I'm making use of nested components with each component it's own validation.
<template>
<VStepper v-model="page&...
0
votes
0
answers
38
views
Vue3 & Vuetify Basic Layout Issue
I am trying out Vuetify and seem to be having some issues around the layout system. I am following the Application layout docs:
https://vuetifyjs.com/en/features/application-layout/
I want a simple ...
0
votes
0
answers
36
views
Vuetify flex wrap order
I'm working with a flex container that has four items. The third item has a variable width based on dynamic content. When the container runs out of space, I want the third item to wrap to a new line, ...
1
vote
1
answer
43
views
vuetify2 to vuetify3 transition-group no longer working
So I'm currently working on my transition from Vue2 Vuetify2 to Vue3 Vuetify3 and it's been quite the challenge honestly. It seems my code needs to rely less and less on Vuetify since things like the ...
0
votes
0
answers
24
views
How to change vuetify expansion panel animation
I'm currently using Vuetify with chart.js I tried to implement a chart.js inside a v-expansion-panel :
<v-expansion-panels class="my-4" variant="popout">
...
0
votes
0
answers
100
views
Adding vuetify to new clean nuxt installation gives me an error when running nuxt
I am new to nuxt and vuetify and I did a new fresh clean installation of nuxt. Then I followed the instructions on the the nuxt vuetify website to install vuetify-nuxt-module https://nuxt.vuetifyjs....
0
votes
0
answers
83
views
Vuetify, v-data-table-virtual nested scroll bug
I'm trying to implement a virtual data table where when a row is clicked, it shows another embedded data table. However, with the row expanded, when you attempt to scroll the outer table, it gets ...
0
votes
0
answers
44
views
Datetime picker in vuetify vuejs
We are using vuetify for our vuejs website.
We are able to integrate TimePicker and DatePicker in our project.
User has to click twice to choose datetime. Is there any way to choose both in a single ...
1
vote
1
answer
50
views
How to change style or add over component on headers of v-data-table on vuetify3
I want to add some specific changes on the header of v-data-table like this:
DATE | Libelle <v-chip>(No count)</v-chip> |TYPE
Anyone does have any ideas how to do that?
const headers = [
...
-1
votes
0
answers
24
views
Never managed to make RTL work in Vuetify
I am using Vuetify to do a simple project so my problem is that the project is fully in Arabic so everything should be RTL everything was great until I used v-select and v-text-field I have never ...
0
votes
1
answer
121
views
v-autocomplete/v-select width changes depending on item length (Vue/Vuetify 3)
The selection menu of the autocomplete/select changes according to the text length of the item. For example, when the items are about 5 characters long, the menu's length is the same as the dropdown, ...
1
vote
2
answers
67
views
How to prevent the selected state from being released when an already selected element in v-list of vuetify3
How to prevent the selected state from being released when an already selected element is reselected.
using vue3, vuetify3
v-list consists of v-list-item, v-list-group and children of v-list-group.
I ...
0
votes
2
answers
82
views
How to keep the reactivity of data when passing it into a function?
Suppose my component looks like this:
<script setup lang="ts">
interface FileMetadata {
owner: string,
location: string,
size: number,
// And around 50 mores...
}
interface ...
1
vote
0
answers
37
views
Using Vuetify with JSX
Could you please help? In my project, I'm using Vue 3 + TypeScript + TSX + Vuetify.
When I try to use Vuetify components, such as v-btn, I encounter a TypeScript error when listening to the onClick ...
1
vote
0
answers
37
views
Why does removing <v-app-bar> make the program work properly
I created a new vuetify project, but after I used <v-app-bar>, everything on my page disappeared.
As you can see from F12, there is nothing in <div id="app">:
<body>
&...
0
votes
1
answer
39
views
How to use FontAwesome in Vue 3 without using modules?
I'm migrating a project from Vue 2 to Vue 3. This project uses the global Vue object. There's no imports or modules. Every tutorial looks the same, from https://vuetifyjs.com/en/features/icon-fonts/#...
0
votes
1
answer
43
views
How to create a cumulative v-file-input in vuetify
I have a v-file-input that I assign some docs in . If a user wants to add some files to it and click to select the files it clears the previous values. I would prefer to allow the v-file-input to ...
0
votes
2
answers
35
views
In vuetify combobox how to transform into uppercase each character typed by the user
Can someone know in vuetify combobox on how to transform each character or letter into uppercase that being typed by user. Thanks
I tried these events change, input and update:search-input to get the ...
0
votes
0
answers
31
views
How to make a dynamic color pack in Vuetify based on the theme?
How can I configure Vuetify to use a dynamic color pack that switches between light and dark themes based on the current theme? Is there a specific way to set this up in the Vuetify scss configuration?...
0
votes
0
answers
30
views
Container element not found when rendering from slot in parent
I am passing a slot from a parent to multiple children. In one of the child components, the div-id is not found, possibly because the slot is not being rendered fast enough and the id is not found ...
0
votes
0
answers
91
views
vue and vuetify in shopify app theme extension
I tried Vue and Vuetify CDN to load a v-btn in a .liquid file for shopify app extension but I'm facing an error Blocked script execution in 'https://online-store-web.shopifyapps.com/themes?embedded=......
0
votes
1
answer
37
views
Auto-complete custom style of the list in vuetify
I want to customize the dropdown list,
with class of vuetify or with custom class.
How can I do it?
This is the image of list
I tried to check with F12 and see what the class of the list is, but every ...
0
votes
0
answers
26
views
Vuetify Combobox text highlighting when using item slot
When using the item slot in the Vuetify Combobox, we lose the default search text highlighting.
Example
In Vue2 there was a way to pull that functionality from the parent as seen in this answer
Is ...
0
votes
0
answers
39
views
Incorrect display of default layout and main context in Nuxt 3 + Vuetify 3 app
In my Nuxt 3 + Vuetify 3 app there are two layouts: default and auth.
app.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
layout/default.vue
&...
0
votes
1
answer
23
views
Relation of v-select and v-checkbox on two others components
i need help for my application in Vuejs , vuetify ,
i have two components :
1- MyTableFirst.vue
2- FirstCall.vue
I want to do this :
if i check checkbox on the MyTableFirst.vue , the v-select it will ...
3
votes
0
answers
34
views
how to reuse a selection event as a slot inside v-select [duplicate]
I have a reusable set of components that I use throughout the entire app. The problem is events like template(v-slot:item="{ props, item }") are not being rendered when passed as a slot from ...
1
vote
0
answers
45
views
Vuetify component not loading completely in vue 3 webpack
I have a legacy vue project built with Webpack, which recently migrated to vue 3. I'm trying to add Vuetify to it following the official documentation. But only a few components are working and most ...
1
vote
1
answer
49
views
Default option in v-select not clearing/deselecting
I've a survey page in Vue JS which there is a dropdown which contains multiple options. There must be an answer selected by default whose answerid is stored in the api response as DefaultAnswerId. The ...