[Vuejs]-Inertia.js + Vue 3 + SSR: Data redefined when rendering in the browser

by

-1👍

Try below:

<template>
  <div>
    <p>Data: {{ isServer ? 'data from server' : myData }}</p>
    <button v-if="!isServer" @click="partialReload">Partial Reload</button>
  </div>
</template>

<script setup>
  import { ref } from 'vue';

  const isServer = typeof window === 'undefined';
  const myData = ref(null);

  if (!isServer && myData.value === null) {
    myData.value = 'data is null';
  }

  function partialReload() {
    // Implement your partial reload logic here
    // For example, you can use location.reload() to reload the page partially
    location.reload();
  }
</script>

Leave a comment