Getting started with NuxtJS / Content module
Tags: nuxt, vue, node, tutorial
Published: 2021-01-12 23:51:09

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](https://content.nuxtjs.org/) 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](https://cleavr.io) 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](https://content.nuxtjs.org/themes/docs) 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](https://docs.cleavr.io) 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. 🙃 

--- 

{% youtube OvtgcS6RL2Y %}

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](https://docstemplate.cleavr.cloud/)

## Create new Nuxt project

{% youtube za8barBHyCE %}

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

```bash
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. 

```bash
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. 

```bash
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. 

```javascript
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. 

### Add a header Vue component

{% youtube w0X3ipg1NLk %}

### Add a sidebar Vue component

{% youtube 0qSaeYnSbKk %}

### Make the header and sidebar mobile friendly. 

{% youtube MSK4W0MZZ9w %}

Using TailwindCSS makes it pretty simple to show or hide elements based on screen width. 

---
Following along? View the [GitHub Repo - phase 1](https://github.com/cleavr/docs-template/tree/phase-1) to view the code for this tutorial. 

You can also view the full video [tutorial series playlist](https://youtube.com/playlist?list=PLApnZzwJN4G5jU3NzBPWpHWJiXTEO9esd) on YouTube. 

Looking for a tool to manage your VPS servers and app deployments? Check us out at [cleavr.io](https://cleavr.io)

--- 
Full tutorial series on creating a documentation site using Vue/Nuxt, Tailwind, and Algolia. 

{% link https://dev.to/armiedema/getting-started-with-nuxtjs-content-module-3l5o %}

{% link https://dev.to/armiedema/make-a-mobile-menu-display-and-hide-with-nuxt-vue-54mc %}

{% link https://dev.to/armiedema/pull-in-markdown-to-vue-with-nuxt-content-and-style-with-tailwind-typography-2em6 %}

{% link https://dev.to/armiedema/responsive-youtube-embeds-with-tailwindcss-4635 %}

{% link https://dev.to/armiedema/create-a-keyboard-navigable-site-search-with-nuxt-content-and-aloglia-vue-instantsearch-2d6o %}