Create documentation easily using NuxtJS VueJS content plugin

If you are trying to create a documentation site then NuxtJS is a very easy way to go. If you haven't tried NuxtJS then it wouldn’t be a problem as it is a powerful framework of VueJS making web development simple and powerful.
Even if you are new to VueJS then you will enjoy the power of VueJS.

1. It has blazing fast hot reload in development
2. You can write in a content directory and fetch your Markdown, JSON, YAML, XML, and CSV files through a MongoDB like API, acting as a Git-based Headless CMS
3. It provides a default template for the documentation site which makes the work much easier and fast
4. Even Vue components are supported in markdown
5. Support static site generation with nuxt generate command
6. Syntax highlighting to code blocks in markdown files using PrismJS
7. Automatic Table of contents generation
8. Multilingual Support in the docs theme
9. The theme has light and dark mode

I will try to include all the processes and steps to make you guys create a documentation site easily using NuxtJS. NuxtJS has a content plugin that we are going to use and this content plugin also a readymade theme called Docs.

*If you haven’t installed yarn or npm then you can get started installing yarn from this link: https://classic.yarnpkg.com/en/docs/install/
Or if you want to install npm then follow this link: https://www.npmjs.com/get-npm
I personally prefer yarn over npm as the performance of yarn is much faster than npm.

Now, to install the docs theme of NUXTJS, follow the following steps:

For yarn users:

yarn create nuxt-content-docs <project-name>

For npm users:

npm init nuxt-content-docs <project-name>

Replace <project-name> with your project name, Example: documentation

It will ask you for some details like below and you will need to provide the details.

Image for post
Image for post

When it completes the installation, please follow the following steps:

For yarn users:

cd <project-name>
yarn dev

For npm users:

cd <project-name>
npm run dev

Replace <project-name> with your project name, Example: documentation

Congratulations! You have now successfully installed the NUXTJS content theme. You can access the site using: localhost:3000

Image for post
Image for post

Now, you can start working on the content for your documentation. I prefer writing markdown files inside content/en directory and check the sample from there.
To know more about the NuxtJS content, please see this link for details: https://content.nuxtjs.org/

Written by

Tech Enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store