plex
Reactivity on rendered elements?
I'm using Apollo to fetch an object from my API. The response is passed to a ref variable. Now I want a button to be rendered differently depending on the value of the ref. This does not work on SSR, as the element does not change after the initial render, although the ref value did.
Example:
After a reload, neither the button nor the div are rendered accordingly in this case, they stay at
i-mdi-heart-outline and bg-red, although the variable text of "liked" is displayed correctly.
I've tried different things, like using a computed property or setting the initial value to null but nothing helps.
Note that I don't want to use an async query in this case to avoid delays when loading the page.3 replies
Refetching and rerendering AsyncQueries from Apollo?
I'm using AsyncQuery to fetch content before the page is rendered:
const { data, refresh } = await useAsyncQuery()
<template>{{ data }}</template>
Now I thought calling refresh would re-fetch the data and render the new content, but this does not work. I've also tried refreshNuxtData(), but the updated content does not get rendered as well.
The only so far I've found to work is to execute the query again with useQuery, but this seems a bit redundant, using two different composables.
Is there something I'm missing?3 replies
Render child elements when parent's v-show is false?
I'm pretty sure I've read about a way to make this work before, but I can't find it anymore.
Basically what I want to achieve is that a menu is rendered inside a slideover - but only on mobile viewports.
My approach is this:
<Slideover v-show="isMobile">
<Menu />
</Slideover>
The Menu component should still be rendered if isMobile is false, just without the slideover surrounding it.
Is there a way to make this work?1 replies
Vercel: Cannot find module '/var/task/node_modules/tslib/modules/index.js'
After deploying to Vercel I always get this error.:
I have no idea at all how to fix this. It used to work a few months ago, but some of the module updates must have caused this error.
1 replies
NuxtLink inside computed text?
I have a text containing hashtags and use a RegEx-function to highlight these tags and make them clickable. I then render this text in my template using the v-html tag. However this does not work as NuxtLink is not rendered correctly. Is there a way to solve this?
4 replies
How to handle global notifications?
I'd like to show a notification component whenever an event (like an API response) is triggered on any page. Right now I have to include the component on each page separately because there doesn't seem to be a way to listen to events on the layout itself. I've found several solutions for Nuxt 2 (like $nuxt.$emit => $nuxt.$on) but none of them work with Nuxt 3. I've also tried implementing Mitt (https://github.com/developit/mitt) but Nuxt 3 doesn't like that one either.
Is there maybe some other way how to achieve this?
13 replies