Installation (Standalone)
Vite Setup
import { defineConfig } from "vite"
import { WitchcraftUiResolver } from "@witchcraft/ui/build/WitchcraftUiResolver"
import IconsResolver from "unplugin-icons/resolver"
import Icons from "unplugin-icons/vite"
import Components from "unplugin-vue-components/vite"
import { unpluginIconViteOptions } from "@witchcraft/ui/build/unpluginIconViteOptions"
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [
IconsResolver(),
WitchcraftUiResolver({
prefix: "W",
filter: (name) => name !== "..." // optionally filter components
})
],
dts: "./types/components.d.ts"
}),
Icons(unpluginIconViteOptions)
]
})
See @witchcraft/editor/vite.config.dev.ts for a complete example.
Tailwind CSS
Import the required styles:
@import "@witchcraft/ui/utils.css";
@import "@witchcraft/ui/base.css";
@import "@witchcraft/ui/animations.css";
@source "/path/to/node_modules/@witchcraft/ui/src/runtime/components";
Base contains animation keyframes, basic styles for Vue animations, and some basic global styles.
tailwind-merge
The library provides a customized twMerge instance at @witchcraft/ui/utils/twMerge.js. You will need to use it or import the options it extends and customize your own twMerge instance.
Icons
This library uses unplugin-icons to provide icons. It installs @iconify/json as a dependency.
Types
While components should be correctly typed, the library internally extends Vue's interfaces to allow data-* attributes and some missing ARIA attributes (like aria-description).
You may need to add the following in a global .d.ts:
import { GlobalComponentTypes } from "@witchcraft/ui"
declare module "@vue/runtime-core" {
interface GlobalComponents extends GlobalComponentTypes {}
}
declare module "vue" {
interface HTMLAttributes {
// ...
}
interface AriaAttributes {
// ...
}
interface ComponentCustomProps {
// ...
}
}
export {}
Note that using the strictTemplates compiler option can cause weird issues with fallthrough props.