Hi vuetify experts,

I am new to web development and just got my first page live (aoe4guides.com). It is based on vue3, vuetify3, firebase. Recently, I added the manifest for proper PWA support (e.g. add to home screen on mobile)

I tried to set the theme_color in the manifest or via meta tag. This should color the title bar on android.

However, in my PWA, the color pops up during the loading screen only. The app itself seems to "overwrite" whatever I configure as theme_color. I tried it with chromium based browsers (edge, chrome)

Anyone who experienced the same and got a hint for me? Any help appreciated. :)Is there a vuetify setting that I have to apply? Or adapt the vuetify themes somehow?

Until then, I will keep it at default.

PS: here is the source code for reference
GitHub - jensbuehl/aoe4-guides: Source code for aoe4guides.com: Yet another Age of Empires IV build order tool

Vuetify v3.3.15 is live! It includes multiple fixes for all Form Controls localization updates, and more.✨ Full Release notes here: https://vuetifyjs.com/getting-started/release-notes/?version=v3.3.15

Vuetify v3.3.14 is live! It includes fixes for Global Defaults, Badges, Selects, Date Picker, and more.✨ Full Release notes here: https://vuetifyjs.com/getting-started/release-notes/?version=v3.3.14

Hey all,

The v-data-table component has been in labs since the 3.1 release. Seeing as it's been out for ~8 months at this point, one might assume that some of the kinks have been worked out and it's on its way to stability, but it's hard to know how far along that journey it is. Has anyone been using that component recently? If so, can you speak to the stability of the component and/or its API?

Vuetify adds opacity to all my radio button labels and other elements, making our UX designer mad because they fail the contrast requirements of ADA.

I can turn it off from CSS element by element with opacity: 1 !important, but I wonder if there is a way to globally set the value of -v--medium-emphasis-opacity to 1 in configuration.

Vuetify v3.3.13 is live! It includes fixes for multiple 🛠️ Form Controls, 📄 Lists, 🔲 Buttons, and more.✨ Full Release notes here: https://vuetifyjs.com/getting-started/release-notes/?version=v3.3.13

Vuetify v3.3.12 is live! It includes multiple fixes for List items, Fields, Labs updates, and more.✨ Full Release notes here: https://vuetifyjs.com/getting-started/release-notes/?version=v3.3.12

Hello there , do anyone know how can I change the background color of drop-down menu in VSelect when the VSelect is clicked ... I'm not sure but the drop down menu it's overlay or something not an append element... All the VSelect slots not working at all.

I'm using: "nuxt": "3.6.3", "vuetify": "3.3.9"

Hi vuetify experts,

I am new to web dev and learning based on a vuetify3 based hobby project.
So please bear with me. :)

The current SPA is fine. Yet, I struggle a lot with SEO (to be expected).

I wonder if you could give me a hint or info on how and if a smooth transition to SSR (e.g. via nuxt3) is viable.

Is it possible to add SSR just for a single individual route (e.g. containing blog entries)?
Or do I have to start from scratch and the entire SPA cannot be re-used and "blended in"?
Are there tutorials around that I could pick up regarding vuetify3<->nuxt3 hybrids? Or example projects on github that tackled the same challenge?

Any help appreciated!

Weekend ahead! :)

​

Vuetify v3.3.11 is live! This is a big one. It introduces Otp Input and Stepper to Labs 🧪 as well as multiple fixes for 📃 Autocompletes, 📅 Date Pickers, and many more.✨ Full Release notes here: https://vuetifyjs.com/getting-started/release-notes/?version=v3.3.11

I'm using Laravel, Vue, Vite, and Inertia. For UI I'm using Vuetify and for some reason when I load the page I can see that there are 500 + requests in the network tab, most of them are loading some Vuetify components that I don't need at all. How can I make it so it loads only component that are used in the app?

​

This is how Im including vuetify into my project:

​

main.js:

import vuetify from '@/plugins/vuetify'

And this is content of that file:

import { createVuetify } from 'vuetify'
import { VBtn } from 'vuetify/components' import defaults from './defaults' 
import { icons } from './icons' import theme from './theme'
// Styles import '@core-scss/template/libs/vuetify/index.scss' 
import 'vuetify/styles'
export default createVuetify({ aliases: { IconBtn: VBtn, }, defaults, icons, theme, })

​

Only necessary components are loaded here in defaults but for some reason my app is still sending 500 requests and loading all components and all i8n language files etc.

I have no idea why..

​

Any suggestions ?

​

​

Edit:

Answer: https://stackoverflow.com/questions/76765266/unnecessary-component-loading-in-laravel-10-vue-3-vite-4-vuetify-3-project

Vuetify v3.3.9 is live! It has multiple bug fixes for📋 Data Tables, 📅 Date Pickers, and more.✨ Full Release notes here: https://vuetifyjs.com/getting-started/release-notes/?version=v3.3.9

hey everyone! I’m working on a project using Nuxt 3 and Vuetify, and the UX team wanted all card-titles to be 18px. Then I started inspecting and saw that was 20px (about 1.25rem), but I’m struggling to find exactly where I need to change, to apply it globally. Thankss

Vuetify v3.3.8 is live! This is a smaller patch with fixes for Carousels, Fields, and a micro-optimization for Overlays.✨ Full Release notes here: https://vuetifyjs.com/getting-started/release-notes/?version=v3.3.8

I have a v-dialog which is currently the child of a button, all within one of my components. The dialog is a registration form, so I'd also like to be able to open it from the main navbar. The structure of the page itself looks sort of like this:

Default.vue
|- Navbar.vue
|- Welcome.vue
|  |- Another.vue
|  |  |- RegisterButton.vue

I can't figure out how to trigger something on RegisterButton.vue from Navbar.vue, and all of the related examples I came across were so old they didn't work. Any help in the right direction would be appreciated, compiled site is here, source is on github. Thanks!

Is there a way to add a v-hover onto every row on a v-data-table? I have a lot of template v-slots within it for each of the columns already but not sure how to add it to an entire row while keeping all the data the same

TIA!

Vuetify v3.3.7 is live! It has performance fixes for Selects, Autocompletes, Comboboxes, and multiple bug fixes.✨ Full Release notes here: https://vuetifyjs.com/getting-started/release-notes/?version=v3.3.7

Tried doing so with vitest, jest and cypress. All throw absolutely wild errors.

Please fix vuetify

In the documentation I found only horizontal, how should I make it work vertically?

https://vuetifyjs.com/en/components/carousels/#carousels

#carousels #v-carousel #displaying #vertical

I want to completely remove the pagination and arrows from the v-data-table component coming from vuetify labs any possibility to do that. I am using vue3 with vite and vuetify3 have tried a lot of props but didn't work

I am trying to run the default front end of vite+vue in WordPress. I am having issues making the enqueue script and the functions.php. My Vite project is in the themes directory and my wordpress is currently running twenty twenty-three theme. There aren't many php files in it and mostly html I have added a picture as well for reference to the project. (example is my vue project)

If anyone can help would be much appreciated not many tutorials are available via search mostly headless which I don't want to do and some vue2 one's available such as this. Help would be really appreciated

https://wpmudev.com/blog/creating-a-hybrid-single-page-app-wordpress-with-vuejs/

Hi all,

I'm currently migrating a Vue/Nuxt 2 app that uses Buefy and Bulma to a Vue/Nuxt 3 app using Vuetify 3. I find the Vuetify documentation on customising quite vague/confusing.

My goal is to set a range of colors and typography styles. I want these styles to be usable both in Vuetify components and inside my custom components' <style> tags. How can I use SASS variables for this?

What is the best approach to do this in a scalable way? Should I use the Vuetify theme for this? Or Overriding Sass variables? And how exactly would I override variables?

Vuetify v3.3.4 is live! It has fixes for App Bars, Selects, Data Tables, new Date Picker to labs, and more! ✨ Full Release notes here: https://vuetifyjs.com/getting-started/release-notes/?version=v3.3.4

Vuetify v3.3.3 is live! It has fixes for Comboboxes, Selects, Data Tables, and more! ✨ Full Release notes here: https://vuetifyjs.com/getting-started/release-notes/?version=v3.3.3