Nuxt.js date time format - vue.js

Question

I have this html:
<template>
<div>
<div class="card text-center">
<h2><strong>Title: </strong>{{story.title}}</h2>
<p><strong>Score: </strong>{{story.score}}</p>
<p><strong>Author: </strong>{{story.by}}</p>
<p><strong>Date: </strong>{{ formatDate(story.time) }}</p>
<!--<p><strong>Date: </strong>{{ dateFormat(new Date(story.time*1000),v) }}</p> -->
<NuxtLink :to="`/${story.id}`">
<p class="btn my-4">View details</p> </NuxtLink>
</div>
</div>
</template>
and this scripts:
<script setup>
const { story } = defineProps(['story'])
export default {
data () {
return {
time: 0,
}
},
methods: {
formatDate(time) {
date = new Date(time).format("YYYY/MM/DD")
return date
}
}
}
</script>
I am not getting this kinda date format: "YYYY/MM/DD".
Please help how can I do that in Nuxt.js?

Answer 1

AFAIK, there isn't a single function call to achieve that. I would suggest you re-writing your formatDate using Date.toLocaleString to have full control of your format.
In addition, do not use export default in your <script setup>. It's not a valid syntax.
<script setup>
// Your other setup
function formatDate(time) {
const date = new Date(time);
// Get year, month, and day part from the date
const year = date.toLocaleString("default", { year: "numeric" });
const month = date.toLocaleString("default", { month: "2-digit" });
const day = date.toLocaleString("default", { day: "2-digit" });
return `${year}/${month}/${day}`;
}
</script>

Answer 2

You could use dayjs (tested with Nuxt 2.15)
yarn add #nuxtjs/dayjs
export default {
// ...
modules: [
'#nuxtjs/dayjs'
],
<template>
<div>
{{ $dayjs(new Date()).format('YYYY/MM/DD') }}
</div>
</template>