change vue version in nuxt 3 | Nuxt | Page 1

gentle shuttle Feb 4, 2024, 7:53 PM

#

there have been some new bugs introduced by either Nuxt, Vue or VueUse - I need to modify the version of Vue (possibly Nuxt) to test what's going on

tldr: vueuse's breakpoints don't work in SSR good anymore, whatever changed I gotta understand it before turning off SSR completely, because few weeks ago everything worked normally.

I had user interface state listed in a Pinia store (could be Pinia's fault too ofc...) and had good bit of logic to be used throughout the app - now it's broken, help out

obtuse tiger Feb 4, 2024, 7:54 PM

#

use NPM overrides 🙂

drowsy dirge Feb 4, 2024, 8:14 PM

#

Be aware that breakpoints are a tricky problem to solve if you're using it for layout. During SSR the server doesn't know whether it should render desktop or mobile. I have a plugin that solves this by reading headers and guessing whether the client is desktop or mobile. I can post it here tomorrow.

gentle shuttle Feb 4, 2024, 8:18 PM

#

I can deduce that it's not pinia's fault, I just used composition API in the store, and used onMounted lifecycles when needed (i.e. actually reading if it's mobile via some regexp script)

#

I can post my code here, I tried downgrading to vueuse/nuxt 10.5.0 , but still having the same bug, so I guess it's not even vueuse's fault either... (because on my colleague's branch there is no bug, he's using ^10.5.0; mind the caret symbol which I removed to have it precisely that version)

#

so my only guess is that vue is the problem here (or nuxt)

#

by the way, if it helps, I also rewrote the entire store logic to provide/inject and then I do get the sidebar appeared BUT it's still not 100% fixed, some element still misses out, so I am really losing my mind here how can they introduce a new bug under the auspices of fixing something 😛

this way I also get some hydration error (elements on server are missing classes because I used breakpoints from vueuse to assign some classes..., while client should've had these classes as the warning suggests, which is correct)

gentle shuttle Feb 4, 2024, 8:36 PM

#

I am still inside a nuxt 3 module playground, I tried assigning overrides for vue to 3.3.13 and nuxt to 3.8.2, but I get this error now:

npm ERR! Override for nuxt@^3.10.0 conflicts with direct dependency

#

OK I also changed the dependencies to specifically be these version (alongside the overrides) and now it works

#change vue version in nuxt 3