Nuxt•7mo ago

v-if child attribute and child merging

To forewarn, I'm a bit new to nuxt and the vue ecosystem as a whole, but in essence my problem can be summarized by the following: When I use a v-if on a reactive object, it's merging the attributes and children of both the element on which I placed the v-if, with the element that contains the v-else. For reference, I'm also using vueuse and don't believe that has anything to do with it, but am including it anyways. For reference: we can see this small example: https://stackblitz.com/edit/github-rcpk3p?file=app.vue

  <div v-if="lgAndLarger" id="a">LgandLarger is true!</div>
  <div v-else id="b">LgandLarger is false!</div>

  <div v-if="lgAndLarger" id="a">LgandLarger is true!</div>
  <div v-else id="b">LgandLarger is false!</div>

with the script setup component being as follows:

import { breakpointsTailwind } from '@vueuse/core';
const breakpoints = useBreakpoints(breakpointsTailwind);
const lgAndLarger = breakpoints.greaterOrEqual('lg');

import { breakpointsTailwind } from '@vueuse/core';
const breakpoints = useBreakpoints(breakpointsTailwind);
const lgAndLarger = breakpoints.greaterOrEqual('lg');

Here, when I first launch the page in full screen, lgAndLarger is set to true. However, when looking at the elements diplayed, the page displays LgandLarger is true! However, the id of the element is set to be b. I'm a bit unsure on how to resolve this as it's causing my page to show a weird amalgamation of my mobile and desktop views causing me more than a few issues 😅. Thanks in advance for any help!

farhan-habib

StackBlitz

Nuxt - Starter - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

13 Replies

CALIFORNIVSOP•7mo ago

I ended up solving the symptoms of the issue by ~~introducing a bunch of technical debt~~ just using tailwind responsive breakpoint based rendering properties, but I am quite interested in finding out how to fix the above hydration issue in case anyone knows a way to fix it

Cake•7mo ago

u can't afaik lgAndLarger is based on the client

CALIFORNIVSOP•7mo ago

Hmmm in that case do you know how other sites do this kind of responsive stuff? I was considering using v-show for my layout but then my slot content gets loaded twice

Cake•7mo ago

not sure what's you're to do exactly, but based on ur example you can just do it in css using media queries

Smef•7mo ago

Yeah, this should be a CSS solution, really. You probably don't want JS to handle window sizes. If you really need completely different components for different window sizes you can use class="hidden lg:block" on one component and class="lg:hidden on the other. That's a good way to handle significantly different UIs, like desktop vs mobile nav bars

CALIFORNIVSOP•7mo ago

I get this kind of thing, but what about cases when that's not really possible? for example when you'd need the slot to show up in two different containers depending on different sized layouts? It'd end up re-loading that part of the page twice and wouldn't be able to maintain any state but yeah thats about what I ended up doing 😭 just gonna be a pain if I need to make changes later haha thanks for the info!

Smef•7mo ago

You can use <slot/> multiple times in a single component, so that shouldn't be a problem!

CALIFORNIVSOP•7mo ago

I've used that before, but if one of them has an input component, when I shift from one size to another, it ends up removing that content do you know if there's a way to have multiple slots that are the same actual component, but just rendered twice?

Smef•7mo ago

Yeah, definitely You can use components multiple times, slots multiple times You can use the same component multiple times with different props or different slots if you want, or different attributes like classes or compute classes differently

JonathanDoerfler•7mo ago

Is useBreakpoints() reactive? At least your variables aren't?

CALIFORNIVSOP•7mo ago

yeah it is

CALIFORNIVSOP•7mo ago

https://vueuse.org/core/useBreakpoints/

VueUse

Collection of essential Vue Composition Utilities

CALIFORNIVSOP•7mo ago

I ended up making my thing work by just doing what they said and making it css based but i am still curious on this haha

Gaming

Programming

v-if child attribute and child merging