Building my blog

I have been thinking about redoing my site for a while I was waiting for the stable version of Nuxt 3 to be released which was towards the end of last year alongside with v2 of the nuxt content module which is what I am using to write/display these blog posts.

I started trying to display these posts with a blog.vue in the pages without success by realising I was querying things incorrectly. I was trying to use post.slug which is incorrect so I said a query on a test page:

<script setup>
const { data } = await useAsyncData('blogPosts', () =>
  queryContent('/blog').find()
)
</script>

I have so far added the main navigation including social links which I have added in their own component which took a bit of trial and error to fix the styling as wanted and I have also added the option to switch between light and dark mode. This was easier than I expected as I used a combination of nuxt-icon and vueuse modules to do this:

<script setup>
import {(useDark, useToggle)} from '@vueuse/core'
const isDark = useDark()
const toggleDark = useToggle(isDark);
</script>

<template>
  <button @click="toggleDark()">
    <div v-if="isDark">
      <Icon name="material-symbols:dark-mode-outline" />
    </div>
    <div v-else>
      <Icon name="ic:outline-light-mode" />
    </div>
  </button>
</template>

Then I realised I needed to render it different I deleted this blog.vue file, created a blog folder with an index.vue file to display a list of my blog posts and a slug.vue to render the individual posts using <ContentDoc/> to display the markdown content on the page.

I will try and write this up in more detail so I have something more depth to refer to later should I wish to use the nuxt/content module for other projects which is highly likely...

But so far so good now just to add some content to the homepage.

I have made a couple of minor updates I have used useHead() composable to update the title of my pages and import google fonts in my app.vue file:

<script setup>
useHead({
  htmlAttrs: {
    lang: 'en',
  },
  link: [
    {
      rel: 'preconnect',
      href: 'https://fonts.googleapis.com',
    },
    {
      rel: 'stylesheet',
      href: 'https://fonts.googleapis.com/css2?family=Open+Sans&display=swap',
      crossorigin: '',
    },
  ],
})
</script>