@getweini/cli

Weini UI CLI

Add Vue UI components to your app, then edit their code to make them your own. Weini works with Vue 3 and Nuxt, using TypeScript and Tailwind CSS.

Browse components · Getting started

Add your first component

You need an existing Vue 3.5+ app built with Vite, or a Nuxt 3/4 app. Use Node.js 22+ or Bun 1.3+. Starting from scratch? Follow the Vue guide or Nuxt guide first.

Open a terminal in your app's folder (the one containing package.json), then run:

npx @getweini/cli@latest init
npx @getweini/cli@latest add button

With Bun, replace npx with bunx --bun.

Setup asks you to choose a theme, optional font, and form provider. Pick Vee Validate to use useForm with Zod, Yup, Kern, Valibot, ArkType, or another Standard Schema package. Pick Kern to use useKernForm with a Kern schema. The CLI installs the selected dependencies and editable Form source. Vee Validate 5 Standard Schema support currently uses 5.0.0-beta.1. The CLI uses your project's lockfile to choose npm, pnpm, Yarn or Bun.

The Button source file is copied into your app. The CLI prints the exact import path. For example, in a Vue app with src/App.vue:

<script setup lang="ts">
import Button from './components/ui/button/Button.vue'
</script>

<template>
  <Button>Hello, Weini!</Button>
</template>

You can now edit Button.vue to change its appearance. In Nuxt, the installer places the same editable source at app/components/ui/button/index.vue, so <UiButton> is auto-imported without an explicit import. Button's reusable prop types come from @getweini/vue; adding Button copies no separate style or type files.

Everyday commands

Run these from your app's folder. No global installation is needed.

For a non-interactive setup, run npx @getweini/cli@latest init --form vee --form-schema zod --yes or --form kern. Then call useForm({ initialValues, validationSchema }) or useKernForm({ initialValues, schema }) in the page that renders the installed Form. Give each control a name matching the schema and handle validated values with <Form @submit="save">. See the complete form examples. A control still works by itself with v-model outside Form.

Keep your changes safe

Component files belong to your app. Updates stop if you have edited a file, so your work is not silently replaced. The weini.json file tracks what was installed; keep it in version control.

To preview an update, including the shared Vue package:

npx @getweini/cli@latest update --foundation --dry-run

Then remove --dry-run to apply it. Existing incompatible dependencies are reported instead of silently upgraded. Setup preserves supported existing configuration; if a configuration is too dynamic to edit safely, it prints the changes for you to make manually.

See ownership and updates for troubleshooting, compatibility and how source updates differ from package updates.

Optional flags

• --cwd path: work in another app folder.
• --style default or --style custom: choose built-in or editable theme tokens.
• --font nebula or --font none: choose the optional font or keep your own.
• --form none, --form vee, or --form kern: choose form state support.
• --form-schema zod|yup|kern|valibot|arktype|custom: choose a Vee schema package.
• --dry-run: preview changes without writing files or installing packages.
• --yes: apply choices without interactive prompts; review them first.
• --registry URL: use a private or test component registry.

Documentation · Button examples · MIT license