Initialize ref value from fetched data

nuxt4🍍state

nuxt3

I am getting hydration issues when initializing a ref value with fetched data. On server side I get "Not sharing" meaning it is a falsy value. On client side I get the truthy value rendered. I use the ref value as a v-model with <USwitch> which has dynamic description text based on if it is true or not. I also tried using useState but that did not seem to work... I wonder if I used it incorrectly. I also did find this thread on github https://github.com/nuxt/nuxt/issues/28984. Also did not seem to work for some reason.

Here is an example using regular ref.

<script lang="ts" setup>
const { data } = useFetch(`/api/property`);

const isShared = ref(property.value?.isShared);
<template>
  <USwitch
    v-model="isShared"
    label="Share property"
    :description="
      isShared
        ? 'You are sharing'
        : 'Not sharing'
    "
  />

<script lang="ts" setup>
const { data } = useFetch(`/api/property`);

const isShared = ref(property.value?.isShared);
<template>
  <USwitch
    v-model="isShared"
    label="Share property"
    :description="
      isShared
        ? 'You are sharing'
        : 'Not sharing'
    "
  />

Nuxt•4w ago•

15 replies

Donitron

Initialize ref value from fetched data

nuxt4🍍state

nuxt3

<script lang="ts" setup>
const { data } = useFetch(`/api/property`);

const isShared = ref(property.value?.isShared);
<template>
  <USwitch
    v-model="isShared"
    label="Share property"
    :description="
      isShared
        ? 'You are sharing'
        : 'Not sharing'
    "
  />

<script lang="ts" setup>
const { data } = useFetch(`/api/property`);

const isShared = ref(property.value?.isShared);
<template>
  <USwitch
    v-model="isShared"
    label="Share property"
    :description="
      isShared
        ? 'You are sharing'
        : 'Not sharing'
    "
  />

Initialize ref value from fetched data

Similar Threads

Initialize ref value from fetched data

Similar Threads

Similar Threads

Similar Threads