Get started

I intend to run through through what I've created so you can start writing your own pastel themed documentation.

Quick start

For more information about layers I suggest you checkout this page — Authoring Nuxt Layers

Follow the steps below to have the base setup for your pastel themed documentation:

• Create a new project — obviously.
• Add the following to the nuxt.config.ts

export default defineNuxtConfig({
  extends: [["github:oyedejioyewole/nuxt-pastel-docs", { install: true }]],
});

Info: This command adds nuxt-pastel-docs as a remote layer and its installs dependencies.

• Install @nuxt/content as a dependency

Info: Apparently, if you don't install @nuxt/content it wouldn't be recognized in your project.

• Create a content.config.ts with the following content:

import { defineContentConfig, defineCollection, z } from "@nuxt/content";

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: "page",
      source: "**/*.md",
      schema: z.object({
        rawbody: z.string(),
      }),
    }),
  },
});

Info: This defines a schema where rawbody contains the raw Markdown content for each page.

Perfect, now you can enjoy writing your documentation.

Configuration

Now for the fun part, customization ✨

Create an app.config.ts

Through the pastelDocs object, you can customize properties like the features list, the themeColor, the headline, the iconMap, and the footer iconLinks.

I overrode the type inference for defineAppConfig and useAppConfig to include the pastelDocs object, so you can get type hints and auto-completion in your IDE.

To view the full list of properties you can customize, check out the types/config.d.ts file.

Extending theme styles

In cases you don't want to completely override components, you extend the existing styles with your own CSS classes or custom properties. This is where the locally registered theme module comes in handy.

The layer automatically registers a Nuxt module that creates a CSS template accessible via the #nuxt-pastel-docs alias.

Usage

• Import the base theme styles in your own CSS file:

@import "#nuxt-pastel-docs";

• Register your CSS in your nuxt.config.ts

export default defineNuxtConfig({
  css: ["~/assets/css/main.css"],
});

Overriding components

If you really don't like my design choices (kind of defeats the entire purpose of using this project) — you can decide to roll out your own components and battle with keeping everything in balance.

The structure of the components directory is given below: