Comments (7)
kevinmarrec
commented on June 5, 2024
@theomjones Indeed there isa bug, but I don't have clues for now about what's going on.
I'm investigating and yes I think there are different references.
It's Vuetify that register $vuetify on Vue instances, so it may be Vuetify issue.
Gonna keep investigating and see with Vuetify team if can find a solution.
from vuetify-module.
kevinmarrec
commented on June 5, 2024
@theomjones Found the issue, in spa mode it gets overriden by default theme cause of some behavior that should not do Vuetify when Nuxt is in spa mode.
You can check the <head> styles tags with vuetify-theme-stylesheet ids between universal and spa.
If you change node_modules/vuetify/dist/vuetify.js look for initNuxt method call and comment it. Rebuild and tell me if it fixes the issue (if fixed from me, but I don't know if it can leads to issues when moving to other pages in the app). this initNuxt should only probably be called only in universal (SSR) mode.
In Nuxt SPA mode there are unfortunately 2 Vuetify stylesheets in DOM, the first one is the right one and the one to be updated when dynamically change theme in Vue. But the second one is always the same and added by
initNuxtaround Vuetify code. And as it comes in second as style tag in DOM order, it always overrides the right theme above, leading in no visible changes.
from vuetify-module.
KaelWD
commented on June 5, 2024
For some reason we aren't using Vue reactivity for the theme, there's a setTheme method instead.
from vuetify-module.
kevinmarrec
commented on June 5, 2024
setTheme may only be a workaround for now, we just need to fix Vuetify initialization that is not currently correctly handled for Nuxt projects not using SSR i.e spa mode.
@theomjones Just letting you know I'm working on a solution around Vuetify source code, I'll keep this thread updated when solution will be found, when PR will be merged, and when Vuetify will release the fix. (It should lands in Vuetify 2.0.2 or 2.0.3)
from vuetify-module.
johnleider
commented on June 5, 2024
@KaelWD https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/services/theme/index.ts#L216
from vuetify-module.
kevinmarrec
commented on June 5, 2024
@KaelWD FYI theme reactivity works in Nuxt SPA, css is just overriden by a duplicate css that never change, so there is no visible change :l, more detailed info in my PR fix on Vuetify repo :)
from vuetify-module.
kevinmarrec
commented on June 5, 2024
Reopening the issue as the Vuetify change that was making this issue fixed led to more important issues, so the change was reverted in vuetifyjs/vuetify#8234.
from vuetify-module.
Related Issues (20)
- Object literal may only specify known properties, and 'vuetify' does not exist in type 'NuxtConfig'. HOT 2
- How can I use nuxt vuetify-module in specific layout and its pages?
- null model for v-tabs-items causes different output in SSR and client
- [BUG] Long load time in Chrome, hang in Firefox due to long icon loading HOT 8
- [BUG] The contents of v-card children are duplicated when an anchor tag is added HOT 3
- Installing problem on cpanel/nodevenv
- v-virtual-scroll component is missing HOT 1
- How to locally install material icons?
- Vue 2.7 compatibility HOT 3
- nuxt-bridge not being rendered on server side
- Cannot read properties of undefined (reading 'resolveAlias') with Nuxt3 HOT 2
- A v-form nested inside another v-form is a production silent bomb.
- Vuetify 3 release HOT 7
- vuetify not initialized HOT 1
- nuxtjs/vuetify (1.12.3) - Not working due to sass loader issue HOT 1
- Breadcrumbs component: clicking on the breadcrumb causes the site to rerender
- Module cases "JavaScript heap out of memory"
- Syntactically wrong css generation due to very old sass version
- Nuxt 3 Support HOT 8
- Need way to move vuetify-theme-stylesheet from top of head section to any position
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vuetify-module.