Adding Docs to Your Project
Adding documentation helps developers work with your Vue Storefront integration. While you're welcome to use the docs tech stack of your choice, you may chose to use the Vue Storefront Docs theme to be consistent with the rest of the ecosystem. This is the Nuxt Layer used by all Vue Storefront maintained projects.
1
Initialize Your Nuxt Project
First, create a Nuxt 3 project inside of your project repo. From the root of your repo, run:
npx nuxi init docs
This creates a Nuxt 3 project inside a docs folder with the following structure:
├── README.md
├── app.vue
├── nuxt.config.ts
├── package.json
├── public
│ └── favicon.ico
├── server
│ └── tsconfig.json
├── tsconfig.json
└── yarn.lock
Since the Docs Theme takes care of most of the design, logic, and behavior of the site, you should delete the app.vue to allow the theme to use its own UI.
2
Install the theme
Our Base Docs Theme uses Nuxt Content, adds styles, and other default behaviors to create consistency throughout our docs.
# npm
npm install sf-docs-base
# yarn
yarn add sf-docs-base
# pnpm
pnpm install sf-docs-base
The Nuxt's extends property can be used in the nuxt.config.ts to tell the project to treat the docs base as its base layer.
export default defineNuxtConfig({
extends: ['sf-docs-base']
})
3
Creating Content
To add pages to your project, create a content/ folder inside of your docs application.
Now, any Markdown files placed here will be converted into pages. You can learn about all of the Markdown features of Nuxt Content as well as additional features added by our base layer.
For example, you can create a landing page by creating a /content/index.md file.
# Welcome!
Welcome to the Vue Storefront Docs Boilerplate! If you're creating a new Vue Storefront integration, this is the place to start.
This Nuxt project can help you preview your content locally and get it ready to be merged into the Vue Storefront docs.
## How It Works
It extends our [Base Layer](https://docs.vuestorefront.io/contributing/docs/base-layer) to give you all of the modules, components, and features available in the deployed Vue Storefront docs.
And if you run the docs project, our page is automatically created.
You can also use our documentation as a reference for how we create docs.