I have a really weird issue in my Nuxt/Buefy project. I have a component, site-header, which loads a child component, user-location for client-side only use, like so:
components/site-header.vue
<template>
<div class=header-wrapper>
<div class=container>
<b-navbar centered class=navbar>
<template #end>
<nav-link v-for='(obj, token) in $store.state.siteNav' :navItemObj=obj :key=token :id=token />
<client-only>
<user-location usage=siteHeader />
</client-only>
</template>
</b-navbar>
</div>
</div>
</template>
The problem I've got is user-location shows momentarily on hot reload, but never shows when I load/refresh the page.
However, if I move it outside of b-navbar, it shows every time.
<template>
<div class=header-wrapper>
<div class=container>
<nav-link v-for='(obj, token) in $store.state.siteNav' :navItemObj=obj :key=token :id=token />
<client-only>
<user-location usage=siteHeader />
</client-only>
</div>
</div>
</template>
What could account for this? One thing which may or may not be related: this was working fine until I deleted my node_modules dir to reinstall everything.
Comments
Post a Comment