Getting Started

Everything you need to know to start using Mirror.

Overview

• Overview
• Installation
  • CLI
  • Tokens
  • Tailwind
• Usage
  • Vue
  • Nuxt
• Peer Dependencies
  • Auto Installation
  • Manual Installation

Installation

CLI

Add @maas/mirror to your dependencies.

pnpm

pnpm install @maas/vue-equipment

npm

npm install @maas/vue-equipment

bun

bun install @maas/vue-equipment

Tokens

Generate CSS variables and fully typed JS variables with the @maas/mirror CLI. The default output directory is .maas.

pnpm

pnpx @maas/mirror tokens

npm

npx @maas/mirror tokens

bun

bunx @maas/mirror tokens

Tailwind

Generate tailwind utility classes with the @maas/mirror CLI. The default output file is .maas/tailwind.preset.css.

pnpm

pnpx @maas/mirror tailwind

npm

npx @maas/mirror tailwind

bun

bunx @maas/mirror tailwind

Usage

Vue

If you are using Vue, import the component directly in your Vue app.

import { MButton, MBadge, MInput } from '@maas/mirror/vue'

Import the neccessary CSS variables seperately.

@import '.maas/tokens/css/component/button.css';
@import '.maas/tokens/css/component/badge.css';
@import '.maas/tokens/css/component/input.css';

Nuxt

Mirror comes with a Nuxt module. In your Nuxt config file add @maas/mirror/nuxt to your modules and configure it according to your needs. Import the neccessary CSS variables seperately.

export default defineNuxtConfig({
  modules: ['@maas/mirror/nuxt'],
  mirror: {
    component: ['button', 'badge', 'input'],
  },
  css: [
    '.maas/tokens/css/application.css',
    '.maas/tokens/css/component/button.css',
    '.maas/tokens/css/component/badge.css',
    '.maas/tokens/css/component/input.css',
  ],
})

Peer Dependencies

Mirror relies on various peer dependencies. Depending on your package manager as well as your project settings, you may need to add them manually.

Package
@clack/prompts
@maas/vue-primitive
@prettier/sync
c12
camelcase-keys
citty
colorjs.io
deepmerge
defu
giget
glob
lodash-es
multimatch
picocolors
reduce-css-calc
rimraf
scule
style-dictionary
Tailwind CSS

Auto Installation

Both npm (starting from version 7) and bun automatically install peer dependencies. For pnpm we recommend adding a .npmrc file to the root of your project.

auto-install-peers=true

Manual Installation

Alternatively, install them all with the following command.

pnpm

pnpm install @clack/prompts @maas/vue-primitive @prettier/sync c12 camelcase-keys citty colorjs.io deepmerge defu giget glob lodash-es multimatch picocolors reduce-css-calc rimraf scule style-dictionary tailwindcss

npm

npm install @clack/prompts @maas/vue-primitive @prettier/sync c12 camelcase-keys citty colorjs.io deepmerge defu giget glob lodash-es multimatch picocolors reduce-css-calc rimraf scule style-dictionary tailwindcss

bun

bun install @clack/prompts @maas/vue-primitive @prettier/sync c12 camelcase-keys citty colorjs.io deepmerge defu giget glob lodash-es multimatch picocolors reduce-css-calc rimraf scule style-dictionary tailwindcss