Vue Storefront is now Alokai! Learn More
Adding Docs to Your Project

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.


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:

├── 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.


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']


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/ 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]( 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.

Home Page with the Markdown from the last code snippet.

You can also use our documentation as a reference for how we create docs.