Blog using Nuxt3 and Vue3

Previously this blog was created with Gridsome library based on VueJs version 2.

Unfortunately, Gridsome did not seem to be under active development and had not received any updates for months.

Vue version 3 was now being supported by Nuxt 3.

I decided to re-implement the blog website in Nuxt 3 with Content 2 module for Markdown file support.

This is the third time I have re-created the blog, first being in ReactJS based Gatsby, second being Gridsome and now third being Nuxt 3.

I got to learn about the Composition API approach of Vue3. I mostly replied on learning from official documentation.

Some things about Content's documentation seemed frustrating and it took a while to figure out how to implement certain changes. Content provides a MongoDB like syntax for querying markdown files. For example, I had used <ContentList> which worked fine with dynamic queries in dev mode but broke after generating static site. I had to remove <ContentList> and use plain queryContent with only and transform.

<script setup>
  import { reactive } from 'vue';
  const posts = reactive({data: []});
 
  await useAsyncData('getPosts', async() => {
    const res = await queryContent('/')
      .sort({date: -1})
      .only(['_path', 'title', 'date', 'tags', 'version']).find();
    return res
  }, {transform: (data) => {
    posts.data = data;
  }});
  .
  .
  .
  </script>

More Blogs :