My first blog post on this site

This is a blog post which is my first on this site.

Posted on: February 3, 2022

vuejs

nuxt

PhysicistSouravDas

Owner of this site

Since many days, I am learning Vuejs, Vuex and Nuxt. I came to know about Git-based headless CMS, which is very easy to integrate with Nuxt projects. It is amazing!

## This is a heading

This is some more info

### This is a sub heading

This is some more info

### This is another sub heading

This is some more info

## This is another heading

This is some more info

Now, a code block of HTML

<template>
  <div>
    <v-alert
      color="red darken-4"
      rounded=""
      elevation="24"
      dismissible
      max-width="700"
      class="mx-auto"
    >
      Month-Year: {{ $route.params.month_year }} Slug: {{ $route.params.slug }}
      Path: {{ $route.path }}
    </v-alert>
    <v-card max-width="700" class="mx-auto pa-4">
      <h1>{{ blogpost.title }}</h1>
      <p>{{ blogpost.description }}</p>
      <p>Posted on: {{ formatDate(blogpost.createdAt) }}</p>
      <p v-show=" blogpost.createdAt  !== blogpost.updatedAt">
        Updated on: {{ formatDate(blogpost.updatedAt) }}
      </p>
      <nuxt-content :document="blogpost"></nuxt-content>
    </v-card>
    <nuxt-link to="/blog">Back to Blog Home</nuxt-link>
  </div>
</template>

Now, why leave out JavaScript 🔥🔥🔥

export default {
  async asyncData({ $content, params }) {
    const blogpost = await $content(
      'blog',
      params.month_year,
      params.slug
    ).fetch()

    return { blogpost }
  },
  methods: {
    formatDate(date) {
      const options = { year: 'numeric', month: 'long', day: 'numeric' }
      return new Date(date).toLocaleDateString('en', options)
    },
  },
  created() {
    console.log(this.$route)
  },
}

Back to Blog Home