Nuxt•2y ago•

2 replies

useRoute() causing hydration mismatches

I am using

useRoute()

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

useRoute().query

is used for both

v-f

v-f

and conditional styles and classes. The

v-if

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

npx nuxt generate

and

npx nuxt start

npx nuxt start

or deploy as SSG.

Adding

?box=second

?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>

StackBlitzHenrik Hansson

useRoute.query reactivity - StackBlitz

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

Nuxt•2y ago•

2 replies

Henrik

useRoute() causing hydration mismatches

I am using

useRoute()

useRoute()

useRoute().query

useRoute().query

is used for both

v-f

v-f

and conditional styles and classes. The

v-if

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

npx nuxt generate

and

npx nuxt start

npx nuxt start

or deploy as SSG.

Adding

?box=second

?box=second

<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>

StackBlitzHenrik Hansson

useRoute.query reactivity - StackBlitz

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

useRoute() causing hydration mismatches

useRoute() causing hydration mismatches

Similar Threads

Similar Threads

Similar Threads