Playing with Nuxt JS and the new content module

Post created on: 7/5/2020 || Updated: 10/18/2020

I have spent most of the weekend playing with Nuxt and in particular the new content module which allows you to have full static generation of your site and through the use of a content/ folder write files in markdown and then fetch and display that content. You can even use Vue components through the addition of a global components folder.

I read the docs and watched the example videos at least half dozen posts as well as reading a couple of posts on dev.to of people who had created blogs using it (and I have seen discovered a post on the official blog about this which I read to se how they have suggested things up)

Depending on which version of Nuxt you are using you will have the option to add via the CLI during the initial scaffold of your app/site, but if you are using an older version you will need to install it either via npm or yarn:

yarn add @nuxt/content  // OR npm install @nuxt/content

and add to nuxt.config.js under the modules section:

modules: [
  '@nuxt/content'
]

I've also had a go with the color-mode module which is cool allowing you to switch between light, dark and sepia modes - there is a great post about it on the official blog

I've attempted to add light/dark mode toggle to my site before and failed miserably having seen how easy t was with that module I need to learn how to do it properly with CSS... something to add to the list.

I am going to have a go at creating a site with Nuxt as I have been debating over without to use Nuxt or use Gridsome and since this content module was released recently I am going to have at using it and see how I get on and if it doesn't work as I want it I'll probably switch back to using Gridsome.