Getting started with NuxtJS / Content module

If you're looking to create a documentation site for your product or service, or even a blog, then may I suggest using NuxtJS and their Content module?

Why use Nuxt/Content?

If you love VueJS, then Nuxt is the obvious choice to keep your website SEO friendly
You have the option to deploy as a static / JAMstack site
Nuxt/Content wraps HTML tags around your markdown files
You can add Vue components into your markdown and Nuxt/Content will activate them! 🔥🔥🔥
Content management is easy - basically, acting as a very basic flat file CMS
Simple to customize and extend
Good community support and helpful sample code you can drop right in

We really fell in love with Nuxt at Cleavr and when I was looking to switch out our rusty ol' Zendesk documentation site for a new and improved documentation site, I knew that I really wanted to use Nuxt in some way, shape, or form.

As I was poking around Google and several Nuxt resources looking for a starter template, I came across Nuxt/Content. The more I learned about it, the more I loved it.

For me, the real clincher was that I can drop Vue components directly into markdown files and have the Vue components actually work. Sold! 💰

Nuxt/Content also has their own starter template that you can quickly get started on. However, I wanted to customize it a bit more for my needs.

From beginning-to-end, I created our new documentation site in a just a single weekend. And. I have to tell you. Nuxt/Content surpassed my expectations and was a joy to use!

Such a joy, in fact, that I wanted to create this tutorial series partly just so I had an excuse to continue to use it. 🙃

In this tutorial series, we'll create a documentation site template using NuxtJS/VueJs, Nuxt/Content, TailwindCSS, Algolia, and some other handy libraries that will all come together to make a pretty bad ace docs site.

Curious what the end result will look like? Take a look at the live preview

Create new Nuxt project

On your local machine, open up your terminal and run the command to create a new Nuxt project.

yarn create nuxt-app my-docs

You can switch out my-docs with whatever you'd like to name your project.

This will then put you through a setup mode where you'll be asked how you want to configure your project.

Be sure to select JavaScript for programming language, TailwindCSS for the UI framework, Universal for rendering mode, and Static for deployment target.

Once installation is complete, cd into your new project and then run the project.

cd my-docs
yarn dev

Your project will run and then be available on localhost:3000.

You'll see the default Nuxt splash page when you view the site on local host.

Install Nuxt/Content module

Back in the terminal under your project's root directory, run the following command to install the Nuxt/Content module.

yarn add @nuxt/content

Now, open up your project in whatever editor your prefer to use, and open the nuxt.config.js file.

Here, we'll add @nuxt/content as a module.

modules: [
   '@nuxt/content'
],

Add some structure

I'm not going to go too deep into this, as this is really to add some layout structure to the existing Nuxt splash page and is mainly just styling with TailwindCSS.

If you're interested, watch the following videos as we'll add a site header and left navigation.