Within the project I am working on, there exists a scrollable inventory of items. Each item possesses a menu that is triggered open when the respective activator button is hovered over. By default, v-menu components are connected to the v-app element, ser ...
Can the <v-toolbar-title> be fixed within a <v-navigation-drawer>? <v-card class="d-inline-block elevation-12"> <v-navigation-drawer hide-overlay permanent stateless height="440" value="true"> <v-toolbar color="whi ...
Is there a way to prevent users from typing inside the vuetify combobox? Below is my current implementation of the combobox: <v-combobox :loading="isSurveyBeingPopulated" class="static--inputs" color="red" box :items="folders" :rules="[rules.required] ...
I have several toggle buttons that should be selected based on the values present in the response obtained through the created() method. <li> <input v-on:click="toggleCheckbox($event)" ...
I am struggling with this basic HTML/Vue/Vuetify code snippet below, and I can't seem to get it functioning as intended. const { createApp, computed, ref, reactive } = Vue; const { createVuetify } = Vuetify; const ...
Figuring out how to incorporate a v-text-area with an added button (icon) that only appears when the text within the text area is edited, and disappears once it is clicked on, has proven to be quite challenging. Below is a simplified version of my code to ...
Is there a way to change the hover color of a specific line in v-data-table from light grey to orange? The table is currently styled with dark grey, but I want the hover effect to be different. <v-data-table :loading="enableLoadingCircle" ...
This is the code I am currently working with: <v-container height="0"> <v-row align="center" justify="center"> <v-hover v-slot:default="{ hover }" v-for="(option, index) in options" ...
In my Vue.js app with Vuetify library, I am facing an issue with displaying v-cards titles of varying lengths. The problem is that the title breaks off and shows "...", instead of wrapping to multiple lines as needed. How can I change this? Template: < ...
I am creating an input element with an icon to show/hide the password. How can I emit an event in the v-icon to notify the parent component when the icon is clicked? Here is my child component BaseInputPassword: <div class="label"> ...
While exploring the Vuetify documentation, I came across an example for "Tooltip" that caught my attention: <v-tooltip left> <template v-slot:activator="{ on, attrs }"> <v-btn color="primary" dark ...
I'm having trouble displaying the property of an associative object array in my code. I attempted to utilize a v-for loop and wanted to showcase the property information within the td elements of a tbody. I am aware that v-data-table components have a ...
I am currently working on integrating an image into my Firebase's Firestore and Storage, and then displaying it on a v-card component. Here is the code for my v-card: <v-row> <v-col cols="3" v-for="massage in massages" ...
Looking to customize font sizes based on viewports? <v-card-text style="font-size:5em"> Some Heading Here </v-card-text> If you want to change the font size to 3em on XS view, without duplicating code, consider using CSS only. Avoid dupli ...
Is there a way to completely remove the elevation of a v-dialog so that it has no shadow at all? The elevation property in the v-dialog itself and using the class as Class = "elevation-0" have not worked for me. Here is the link to the component ...
I'm encountering an issue with getting all styles from my Vue app. I have tried the code provided in this answer: https://stackoverflow.com/questions/52343006/how-to-print-a-part-of-a-vue-component-without-losing-the-style While it works fine on localhos ...
Vue Router's recent versions support opening links in new tabs, like the example below: <router-link :to="{ name: 'fooRoute'}" target="_blank"> Link Text </router-link> This code correctly creates a link with <a target ...
I am new to using VueJS and Vuetify. I have noticed that with v-select outlined, the label is not directly on the border of the field. Instead, I have to click in the field first before it appears. Can anyone explain why this is happening? Here is my code ...
When considering an Icon library, I decided to go with Vuetify not only for its ability to include icons but also for the other design advantages it offers. After npm installing @mdi/js and Vuetify in my existing project, here is the code snippet from my ...
I am attempting to pass an image url dynamically to my Vue application, but it doesn't seem to be working. I'm starting to question if this is even achievable in Vue / Vuetify. Please confirm if this functionality is possible. <v-img class="whi ...
As I work with JSON data, my current task involves formatting it using Vuetify's Data Tables. The official documentation provides guidance on defining table headers as shown below: import data from './data.json' export default { data ...
I've been working on creating a new app, but I keep running into an issue. Unidentified Reference Error: Vue is not recognized. <template> <v-app> <div id="example-1"> <v-btn v-on:click="counter += 1">Add 1</v-btn&g ...
I am having trouble displaying a confirmation component every time a button in the header is clicked. Currently, it only opens when clicking elements outside of the dropdown using v-menu. App.vue <template> {{isConfirmDialogVisible}} <div cla ...
This unique Vuetify demo on CodePen showcases a two-column layout. The first column contains a <v-list> enclosed in a green <v-alert>. By clicking the "toggle text" button, you can switch the title of the first list item between short and long ...
I am relatively new to working with Vue.js and currently facing an issue involving radio buttons. In my form, I collect various inputs and upon submitting the form, I generate a JSON file containing all the answers: However, instead of the current output ...
Whenever I attempt to choose a node in the Vuetify tree-view while in leaf mode, only the leaf nodes are showing up in the v-model. Is there a way to include all the child nodes along with the selected parent node? Vuetify Version: 2.2.18 Link to the cod ...
I'm exploring Vue/Vuetify for the first time and I am currently working on implementing a select option feature on a website. Instead of using text labels, I would like to use icons as labels, similar to the image provided below. I am unsure if this i ...
Trying to dynamically change the append-icon based on group status (open/close) isn't working as expected: v-list-group( color="success" @click:append="this.marker = !this.marker" :append-icon="marker ? 'add ...
I'm currently developing an app using nuxt, vuetify 2, and typescript. Within the app, I have radio buttons (referred to as b1 and b2) and text fields (referred to as t1, t2, t3). When a user clicks on b1, it displays t1 and t3. On the other hand, w ...
Lately, I've been working on developing an app using Rails 6 with a mix of Vue and Vuetify for the front end. Everything runs smoothly on my local machine. However, as soon as I attempt to deploy it on Heroku, I encounter this error in the debug console: ...
Currently utilizing Nuxt 3 and aiming to incorporate Vuetify into my project. Successfully integrated Vuetify, enabling the use of its components without issue. However, a warning message has surfaced and troubleshooting measures are unclear. Vuetify was ...
I am currently implementing a project with Vuetify 3 and I am attempting to customize the look of the <v-pagination> component. My main goal is to modify the color of the icons used for the previous and next buttons. <v-pagination v-model= ...
I am looking for a way to dynamically adjust the height value of a style applied to an element based on certain conditions. Specifically, when scrolling to the bottom, I want the height to be 77.5%, when the footer is not visible at all, it should be 100%, ...
Here is the code snippet from my component.vue file: <template> <v-text-field name="Foo" :label="$t('foo')" type="text" hint="This is a hint" persistent-hint ></v-text ...
I'm having trouble getting the v-btn to download an XML file instead of opening it in the browser. <v-btn :disabled="!exportUrl" block x-large height="100" color="primary" :href="exportUrl" download> ...
Currently, I am working with 2 Vuetify data tables that do not have pagination enabled. Each row in the second table corresponds to exactly one parent in the first table. My goal is to be able to click on an entry in the second table and have it automati ...
My experience with Vuetify's v-date-picker revealed an issue where the last week of the month is not displayed on Android devices. The same problem occurred when using Google Chrome on a computer and zooming in. I attempted to replicate the issue, how ...
Text fields in Vuetify come with a feature called rules, which can be used to add functions that return either true or an error message. Is it possible to make these rules asynchronous, allowing for server-side validation using XHR? For example: <v-te ...
I have recently started a vuetify project using Vue CLI3. It seems that the styling of my body fonts is being overridden by a mysterious class called .application. Despite my efforts, I cannot locate this class anywhere in the framework code. In additio ...
I am working on developing an electron application with a customizable width, allowing users to adjust the size of the app according to their preference. The width of the app should determine how many "items" are visible in the navigation bar. If there a ...
I am utilizing the navigation drawer to display my data list in a dialog box. Everything works fine when I initially open it, however, upon reopening the dialog, the entire navigation drawer vanishes. The data GET operation is functioning correctly with no ...
Seeking guidance on upgrading from Vuetify/Vue 2 to 3. As a non front-end developer tasked with updating legacy code, I'm facing challenges due to the migration guide assuming CSS knowledge and lacking examples for resolving removed features. The gui ...
I am currently working on a Vue component called calculator.vue and I have included the necessary code for the plugin in my main.js file as shown below: import App from './App.vue' import vuetify from './plugins/vuetify' import "./plugins/vuetify-mo ...
In my current project, I am developing a Single Page Application (SPA) using vuejs with vuetify and integrating authentication via a laravel/passport API. The challenge I'm facing is related to conditional rendering of navigation icons based on user authen ...
My php script was working fine with vuetify data, but now every page is showing the error message: Your search for "{{ search }}" found no results. It seems like this issue occurs when the script cannot fetch data from the database. Here is my d ...
Below you will find the child and parent components. I am struggling to pass data from the child component to the parent component. Can you help me pinpoint where the issue may be? Child Component <template> <div> <v-btn class="r ...
I am encountering an issue with vue.js2. After submitting a form, I need to refresh the image src. When the form is submitted, a new image containing a chart is generated in the backend. The new chart image replaces the old one, but the URL remains the s ...
Here's a CSS query I have: If I have the code below, does the styling apply to the contents of v-container but not v-container itself? <v-app id="inspire"> <v-container justify-center style="max-width: 1200px"> <v-layout row ...
I'm facing an issue with my Vue component that contains a treeview. Upon selecting a node, the goal is to update an array and display the checkbox as selected. However, I'm encountering a problem where if I select elements from one folder in the ...
My front end utilizes vuetify in this manner : validate: async function () { let tokenCaptcha await this.$recaptcha('login').then((token) => { tokenCaptcha = token }) if (this.$refs.form.validate() && tokenC ...
I'm facing a problem with the delete button on my expansion panel. Instead of just triggering a dialogue, clicking on the delete button also expands the panel. How can I prevent this from happening? https://i.stack.imgur.com/cc4G0.gif <v-expansion-pane ...
I am currently trying to incorporate the V-Calendar library into my Vuetify application. Up until now, the app was working fine, but I seem to have hit a roadblock with the correct installation of the V-Calendar library. Although no error messages are bei ...
Question: I'm currently trying to incorporate Vuetify into my Laravel 9 project with Vite. Despite following the guidelines provided in the Vuetify documentation, I am facing issues with the styles not being applied. app.js import App from "./A ...
How can I solve the issue of displaying "No data available" in the user list data table on my userDirectory page? I have created a userDirectory page with a subheader and a data table from Vuetify, but it seems to have no data available. <template> ...
I am in the process of organizing a set of cards, all of which need to be the same size. Check out an example I have created here: https://codepen.io/creativiousa/pen/BErpPb I attempted to modify my code using <v-card height='100%'> </v-card> ...
Here's a question that might seem simple at first glance: Is it possible to create a Vuetify DataTable with an Array of Strings? I prefer not to use a basic DataTable since I need the selection feature. One solution could be using "v-for" to create custom ...
I want to create a form with i18n translation. I've attempted it, but it's not functioning properly: <div id="form" align="center" justify="center"> <v-col sm="4" align="center" ...
Currently, I am developing a wizard that involves triggering navigation when a radio button is selected. Users should also be able to go back and change their previous choices. However, one issue I have encountered is the difficulty in detecting a re-selec ...
Is there a way to adjust the size of the icon/step circle in v-stepper? ...
Currently, I am using the Vue framework in combination with Vuetify library to develop a web page. The main issue I am facing is related to card alignment on the page. When there are only a few cards displayed, the alignment looks perfect but if the number ...
Recently, I attempted to integrate the GrapesJS editor into my Vue.js project, but encountered some difficulties. The editor was not visible in the browser, and the designated tag for the editor appeared empty. Here is my editor configuration: <template ...
The vuetify v-data-table component includes a feature called "show-select" which adds a checkbox to each list item. I am facing an issue where I need to check elements in the table for a Cypress test, but so far, it has not been successful. I assigned an i ...
Currently utilizing the v-autocomplete component from Vuetify, and I am interested in incorporating a custom element into its dropdown menu. You can see the specific part I want to add highlighted with a red arrow in this screenshot: This is the current s ...
I have created a popup form with modularity using Vuetify. However, I encountered an issue where clicking on the email input field, deselecting it to trigger an "empty" error, and then switching over to the register tab caused a similar error for the name ...
I have created a special button in my tree view that has the ability to toggle open and close all nodes within it. The button code: <v-btn @click="toggleTreeview" /> Here is my v-tree markup: <v-treeview :value="x" @inpu ...
Below is a drop-down menu with two rows of v-list items: <v-menu class="dropdown" open-on-hover offset-y > <template v-slot:activator="{ on, attrs }"> <v-btn class="rounded-xl green darken-3 text-ca ...
When using Vuetify with Nuxt.js, I am facing an issue where some material design icons are not displaying properly. For example, <v-icon>mdi-cog</v-icon> appears as blank. However, other icons are working fine. nuxt.config.js buildModules: ...
After receiving a response from the server via a REST request in HTML format, I have saved it in a data:[] variable. When I log this data on the console, it appears as raw HTML code. This reply is currently stored as a String, and my challenge now is to co ...
I have recently developed a Vuetify application that manages card items. To ensure security and accessibility, I have added a feature where the actions/buttons are displayed based on the User's permissions. In case of missing permissions, these button ...
Hello! I am currently navigating the world of Nuxt.js and Vuetify, and I have a question about adding URL links to image tags. Essentially, I want users to be able to click on an image and be directed to another page via a designated link. About My Page L ...
I'm facing an issue with the <v-flex> element in my code, specifically with the offset property not responding as expected. Despite following the recommended layout from the vuetify docs, I can't seem to get it right. Below you can see the code snipp ...
After receiving an array of objects from an API call: "data": [ { "heading_one_of_the_table": 14, "total": 8 }, { "heading_one_of_the_table": 1, "total": 7 }, { "heading_one_of_the_table": 6, "total": 7 } ] I want to ...
When using Vuetify's v-list-item directive, I encountered an issue where the active prop cannot be removed once an item has been selected. Here is my approach so far: <v-list-item-group pb-6 color="primary" class="pb-3 text-left"> ...
I am facing an issue with the height of a vuetify textfield in my codepen example with version 1.5.x: https://codepen.io/handy29/pen/yLLwjGg. The height of the textfield does not match my design as shown here: https://i.stack.imgur.com/qfrTw.png. I have tr ...
I am in the process of animating the data on a Vuetify data table. My objective is to make the current data slide out to the right when Next is clicked, and then have the new data slide in from the left. The current result I am getting can be viewed here: ...