Cannot read properties of undefined (reading 'format') with NuxtJs

Question

I all I have this problem with momentjs and NuxtJS

I have created the composable with the javascript inside to get the current time in different place in the world.

Than I have crated a components to use in different page.

When I am try to us the composalbe inside the components I got error undefined reding format.

that is my composable:

import moment from 'moment-timezone';

export function useOrologio(paese) {
  
  const citta = ref(moment())
  setInterval(() => { citta.value = moment().tz(paese).format('H:mm:s dddd MMM D')},1000);
  const utc = ref(moment().tz(paese).format('Z')) 
  const local = ref( moment().tz(paese).format('z'))

 moment.updateLocale('it', {
   weekdays : [
       "Lunedì", "Martedì", "Marcoledì","giovedì", "Venerdì", "Sabato", "Domenica"
   ]})

   return {citta , utc , local}
}

and this is my components

<template>
    <div class="flex flex-row p-5 font-[Kenit] font-[600] text-slate-800">
       <div class="text-3xl border-slate-900 rounded-2xl p-5 bg-slate-200 w-4/12 flex flex-col">

        <p>{{ title }}</p>
   
       <p>{{ citta }}</p>
       <div class="text-base">
       <p>Ore rispetto a Greenwich {{ utc }}</p>
        </div>
   </div>
   </div>
   </template>
   
<script setup>
import { useOrologio } from '~/composable/orologio';

const {citta} = useOrologio()

const { props } = defineProps([
'title'
])

</script>

Answer 1

Your composable is fine. You just forgot to pass an argument to useOrologio in your component. For example:

const { citta, utc } = useOrologio('America/Los_Angeles')

Your new component should look like this:

    <template>
  <div class="flex flex-row p-5 font-[Kenit] font-[600] text-slate-800">
    <div class="text-3xl border-slate-900 rounded-2xl p-5 bg-slate-200 w-4/12 flex flex-col">
      <p>{{ title }}</p>

      <p>{{ citta }}</p>
      <div class="text-base">
        <p>Ore rispetto a Greenwich {{ utc }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useOrologio } from './composable/orologio'

const { citta, utc } = useOrologio('America/Los_Angeles')

const { props } = defineProps(['title'])
</script>