Usage

Components

Components are auto-imported when using the Nuxt module. For standalone usage, they are auto-imported via unplugin-vue-components with the WitchcraftUiResolver.

<template>
    <WButton>Click me</WButton>
</template>

Props

Most components accept standard HTML attributes via fallthrough props which are sent to the element that most "embodies" the component, e.g. $attrs goes to the checkbox root not it's wrapper (this is documented per component). Some components also accept typed props for specific parts or to override reka's props (e.g. root-props):

<WCheckbox wrapper-attrs="{ class: 'my-wrapper-class' }" />

Icons

The module installs unplugin-icons/nuxt and configures it with custom styles. Use icons with the WIcon component:

<WIcon><i-lucide-check/></WIcon>

WIcon is a simple wrapper that applies inline-block display to the icon in its slot.

Helpers

Some helpers are not auto-imported. Import them from #witchcraft-ui-helpers:

import { someHelper } from "#witchcraft-ui-helpers"

Anything else can be imported from #witchcraft-ui.