Henrik Posts - Answer Overflow

Henrik

•Created by Henrik on 3/30/2024 in #❓・help

useRoute() causing hydration mismatches

I am using useRoute() to conditionally render classes and elements. All works well on dev but when deployed as SSG I get very strange results and "Hydration completed but contains mismatches" in the console. In a child component a prop which value is determined by useRoute().query is used for both v-f and conditional styles and classes. The v-if is working as expected but the class and style bindings are not. https://stackblitz.com/edit/nuxt-starter-umaxer Note that you have to run npx nuxt generate and npx nuxt start or deploy as SSG. Adding ?box=second to the url renders the second box with "inactive" styles and classes but the v-if is rendered as active. "Hydration completed but contains mismatches" is logged in the console. I am really at a loss here, any input would be really helpful! app.vue

<template>
  <div style="display: flex; gap: 16px">
    <Box :active="box === 'first'"> First </Box>
    <Box :active="box === 'second'"> Second </Box>
  </div>
</template>
<script setup lang="ts">
const routeQuery = useRoute().query;

const box = ref(routeQuery.box || "first");
</script>

<template>
  <div style="display: flex; gap: 16px">
    <Box :active="box === 'first'"> First </Box>
    <Box :active="box === 'second'"> Second </Box>
  </div>
</template>
<script setup lang="ts">
const routeQuery = useRoute().query;

const box = ref(routeQuery.box || "first");
</script>

` box.vue

<template>
  <button
    style="padding: 16px"
    :class="[active ? 'active' : 'inactive']"
    :style="[active ? 'color:red' : 'color:black']"
  >
    <slot />
    <span v-if="active">Active</span>
    <span v-else>Inactive</span>
  </button>
</template>
<script setup lang="ts">
defineProps({
  active: {
    type: Boolean,
    default: false,
  },
});
</script>

<template>
  <button
    style="padding: 16px"
    :class="[active ? 'active' : 'inactive']"
    :style="[active ? 'color:red' : 'color:black']"
  >
    <slot />
    <span v-if="active">Active</span>
    <span v-else>Inactive</span>
  </button>
</template>
<script setup lang="ts">
defineProps({
  active: {
    type: Boolean,
    default: false,
  },
});
</script>

3 replies

NNuxt

•Created by Henrik on 6/8/2023 in #❓・help

Force useAsyncStoryblok to refetch data

I am trying to get the visual editor in Storyblok to work properly using Nuxt 3 and SSG and need to force useAsyncStoryblok to refetch it's data. In Nuxt 2 it was very simple using enablePreview() in a plugin but there seem to be no way to achieve this in Nuxt 3. refreshNuxtData() should be the solution but it has no effect on useAsyncStoryblok. Is there any known issues with refreshNuxtData() or is there any other obvious solution that I'm missing?

1 replies

NNuxt

•Created by Henrik on 5/22/2023 in #❓・help

404 does not load error.vue

I'm using dynamic routes and when trying to access a non-existing page the app throws a 404. This however does not trigger loading error.vue placed in the root folder, instead the normal layout is rendered (without content). Am I missing something obvious here? This used to work flawlessly in Nuxt 2 (with error.vue in the template folder) but in Nuxt 3 I cannot find a way to display the error page.

10 replies

NNuxt

•Created by Henrik on 4/28/2023 in #❓・help

useElementVisibility in custom directive always returns false

I'm building a custom directive with useElementVisibility but it always returns false for every element regardless if it is in the viewport or not. It kind of worked with @vueuse/core and @vueuse/nuxt in version 9 but after upgrading to 10 it stopped working completely. The problem in version 9 was that it return correct state on page load but after route change it always returned true. Has anyone tried this and know how to work with useElementVisibility in a custom directive?

<template>
  <div v-visibility/>
</template>

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('visibility', {
    mounted(el) {
      if (useElementVisibility(el).value) {
        el.classList.add('visible');
      );
    }
  });
});

<template>
  <div v-visibility/>
</template>

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('visibility', {
    mounted(el) {
      if (useElementVisibility(el).value) {
        el.classList.add('visible');
      );
    }
  });
});

8 replies

Gaming

Programming