Resources

  • Built using the following Vue Mastery Lesson: Build a Blog with Nuxt 3 and Nuxt Content 2
  • Repo for this build: nuxtblog. I've put HTML comments in the code of some of the components, for Vue/Nuxt noobs that are still learning, like me. The comments mostly involve reactivity and working with reactive refs.
  • Deployed: Netlify App

Build notes

  • Inside of app.vue's script setup is the useHead() "macro" that was put there by Nuxt
    • Directs rendering to put meta items into the HTML head.
    • Incredibly powerful for scaling and updating of specific pages
  • The pages directory is automatically generated by Nuxt 3 for routing.
  • index.vue is the root page
  • Using Bulma CSS
  • Nuxt content is built to allow the ability to use local files to ingest data.
  • TS files are using normal javascript, typed files are used for our protection :)
  • Markdown for pages are using "frontmatter". A YAML-style syntax that looks like this. Properties are defined here for doing awesome things like definging meta-attributes, etc:
---
title: "This is amazing for blogging in Markdown"
author: "@eric"
date:
  published: "07-10-2023"
description: A short description
---
  • We can leverage components and markdown together, making all this super-powered!