Auto Import

vael-ui/resolver is a resolver for unplugin-vue-components — register it once and every vael-ui component becomes usable in a template with no manual import at all.

npm install -D unplugin-vue-components

Setup

Add the resolver wherever unplugin-vue-components is already configured:

// vite.config.ts
import Components from 'unplugin-vue-components/vite'
import { VaelUiResolver } from 'vael-ui/resolver'

export default {
  plugins: [
    Components({ resolvers: [VaelUiResolver()] }),
    // ...your other plugins, vue() included
  ],
}

That's it — write the tag, the import gets inserted at build time:

<template>
  <Button variant="primary">Save</Button>
</template>

<script setup lang="ts">
// no import — unplugin-vue-components inserts it at build time
</script>

Vapor

vael-ui ships two builds from the same source: the regular VDOM build and a Vapor build (vael-ui/vapor). By default the resolver imports from the VDOM build; pass variant: 'vapor' to resolve from the Vapor build instead. Pick whichever your app actually renders with — mixing the two in one app isn't supported.

VaelUiResolver({ variant: 'vapor' })

One shared import, no /vapor subpath

If your editor's auto-import keeps suggesting vael-ui instead of vael-ui/vapor — a known TypeScript limitation when a package exports the same name from two entry points — set a vapor export condition instead of importing from the subpath. Every import … from 'vael-ui' then resolves to the Vapor build project-wide, components and composables alike, and there's nothing left for auto-import to pick wrong.

// vite.config.ts
export default {
  resolve: { conditions: ['vapor'] },
}

// tsconfig.json
{
  "compilerOptions": {
    "customConditions": ["vapor"]
  }
}

CSS

No extra wiring needed here. Every vael-ui component already imports its own CSS internally, so resolving the component import pulls its styles in for free — unlike most unplugin-vue-components resolvers, which need a separate sideEffects entry to also import a component's stylesheet.

Bundlers

unplugin-vue-components supports Vite, Webpack, Rollup, esbuild, and Rspack. The resolver itself is just a plain function — it works identically regardless of which one you use.