Skip to main content
Browse docs

Marwes documentation

Get started with Vue

Install Marwes for Vue and render your first accessible component.

1. Install with the official CLI

The CLI installs @marwes-ui/vue, wires the provider for supported Vite layouts, and runs diagnostics.

pnpm dlx @marwes-ui/cli init --adapter vue

2. Render a public component

This is the same canonical fixture that the repository typechecks for Vue.

<script setup lang="ts">
import { ref } from "vue"
import {
  Button,
  ButtonVariant,
  CheckboxField,
  EmailField,
  MarwesProvider,
  SubmitButton,
} from "@marwes-ui/vue"

const email = ref("")
const subscribed = ref(false)
</script>

<template>
  <MarwesProvider>
    <EmailField
      v-model="email"
      label="Email"
      :input="{ placeholder: 'you@example.com' }"
    />
    <CheckboxField
      v-model="subscribed"
      label="Send me product updates"
      :checkbox="{}"
    />
    <Button :variant="ButtonVariant.secondary">Preview</Button>
    <SubmitButton>Save</SubmitButton>
  </MarwesProvider>
</template>

3. Verify the app

A successful doctor run confirms the adapter import, rendered provider, and production build.

pnpm dlx @marwes-ui/cli doctor --run-build