Displaying & Copying A Newly Created Access Token

Yeah, good catch! The locale difference can definitely cause some issues. The hydration mismatch comes into play because what is rendered on the server differs from the expected render on the client. So, when Vue attempts to hydrate it notices this and warns about the markup being different.

Use Server Time Until Mounted

The best option is to use the server provided time until your Vue component has mounted. I believe something like this should work, using the onMounted hook to display the server provided value until Vue is all set up.

<template>
  <div>
    The time is {{ displayDate }}
  </div>
</template>
<script setup>
import { onMounted, ref, computed } from 'vue'
import { DateTime } from 'luxon'

const props = defineProps<{ date: string }>()
const isMounted = ref(false)

const displayDate = computed(() => {
  if (isMounted.value) {
    return DateTime.fromISO(props.date).toLocaleString()
  }

  return props.date
})

onMounted(() => (isMounted.value = true))
</script>

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

This could be extracted into a Vue component for easy reuse!

Suppressed Warning (new in Vue 3.5+)

A newer option is to suppress the hydration mismatch warning. Its best to try and fix the mismatch, but this can come in handy as a last resort.

<template>
  <div data-allow-mismatch>
    The time is {{ displayDate }}
  </div>
</template>

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

Official Note from Vue Documentation

The Vue documentation touches on this slightly, providing that below to provide a complete picture!

The server and the client are in different time zones. Sometimes, we may want to convert a timestamp into the user's local time. However, the timezone during the server run and the timezone during the client run are not always the same, and we may not reliably know the user's timezone during the server run. In such cases, the local time conversion should also be performed as a client-only operation.