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.
Add a header Vue component
Add a sidebar Vue component
Make the header and sidebar mobile friendly.
Using TailwindCSS makes it pretty simple to show or hide elements based on screen width.
Following along? View the GitHub Repo - phase 1 to view the code for this tutorial.
You can also view the full video tutorial series playlist on YouTube.
Looking for a tool to manage your VPS servers and app deployments? Check us out at cleavr.io
Full tutorial series on creating a documentation site using Vue/Nuxt, Tailwind, and Algolia.
Top comments (0)