Customizing

Everything the layer renders is a component, and a component in your app replaces the layer’s component of the same name. Change the parts you need and the rest keeps following the layer.

Components

Create a component with the name of the one you replace. This one adds a mark before the wordmark in the header and the navigation drawer.

<template>
  <span class="flex items-center gap-2">
    <img src="/logo.svg" alt="" class="size-6" />
    <span class="docs-wordmark">{{ docs.title }}</span>
  </span>
</template>

<script setup lang="ts">
const { docs } = useAppConfig()
</script>

Three components exist to be replaced. The two footers render nothing until you do.

Replace a page the same way: app/pages/index.vue takes over the landing page.

Themes

The layer loads the application, breakpoint and dark mode tokens. Add a theme by loading its tokens and setting data-theme on the document.

export default defineNuxtConfig({
  extends: ['@maas/docs'],
  css: [
    '~~/.maas/tokens/css/theme/brand/light/application.css',
    '~~/.maas/tokens/css/theme/brand/dark/application.css',
  ],
  app: {
    head: {
      htmlAttrs: { 'data-theme': 'brand' },
    },
  },
})

Tokens

The layer ships the tokens Mirror builds from its own token set. To use yours, run mirror tokens && mirror css in your project and set docs.tokens to the directory they write to.

export default defineNuxtConfig({
  extends: ['@maas/docs'],
  docs: {
    tokens: '.maas',
  },
})

Layout

The shell measures itself with CSS variables. Override them on :root in a stylesheet of your own.