Henrik
Henrik
PostsComments
NNuxt
Created by Henrik on 3/30/2024 in #❓・help
useRoute() causing hydration mismatches
I have looked further into this and it seems like useRoute is causing the hydration mismatches. The problem occurs even in this very minimal example when deployed as SSG or npx nuxt generate & npx nuxt start. Is useRoutebroken? Edit: solved! Wrapping in client-only solved the problem, needed when using query parameters in SSG. app.vue 
<template>
  <client-only>
    ...
  </client-only>
</template>
<script setup lang="ts">
const route = useRoute();
const active = ref(route.query.box || false);
</script>
<template>
  <client-only>
    ...
  </client-only>
</template>
<script setup lang="ts">
const route = useRoute();
const active = ref(route.query.box || false);
</script>
3 replies
NNuxt
Created by Henrik on 5/22/2023 in #❓・help
404 does not load error.vue
Thank you @xibman that did the trick!
10 replies
NNuxt
Created by Henrik on 5/22/2023 in #❓・help
404 does not load error.vue
Is it working in production or locally? For me locally all good but Netlify refuses to load error.vue
10 replies
NNuxt
Created by Henrik on 5/22/2023 in #❓・help
404 does not load error.vue
I just tried to trigger a 404 with throw createError({ statusCode: 404, statusMessage: 'Page Not Found' });in [...slug].vue and the error page does not load. This seems to be an issue with Netlify, it's working locally.
10 replies
NNuxt
Created by Henrik on 4/28/2023 in #❓・help
useElementVisibility in custom directive always returns false
Adding a small timeout fixes the issue in my use case. It is not optimal since it has to be matched with timing of page transitions but even without a page transition a small delay is necessary to get an accurate value. 
<template>
  <div v-visibility/>
</template>

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('visibility', {
    mounted(el) {

      setTimeout(() => {
        if (useElementVisibility(el).value) {
            el.classList.add('visible');
        }
      }, 250);

    }
  });
});
<template>
  <div v-visibility/>
</template>

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('visibility', {
    mounted(el) {

      setTimeout(() => {
        if (useElementVisibility(el).value) {
            el.classList.add('visible');
        }
      }, 250);

    }
  });
});
js
8 replies
NNuxt
Created by Henrik on 4/28/2023 in #❓・help
useElementVisibility in custom directive always returns false
Wonderful, will give that a go. Thank you!
8 replies
NNuxt
Created by Henrik on 4/28/2023 in #❓・help
useElementVisibility in custom directive always returns false
Both packages are on 10.1.0
8 replies