Vue Guide

Install

Install the shared styles package, Tailwind CSS v4, animation helpers, Vue, and the Vue component package.

pnpm add tailwindcss tw-animate-css @line/abc-def-styles
pnpm add @line/abc-def-vue vue

Add the Vue package output to your Tailwind source list and keep a source rule for your application files.

@source "../node_modules/@line/abc-def-vue/dist/**/*.{js,cjs}";
@source "../**/*.{ts,vue}";

Import components

The Vue package intentionally has no root component export. Import each component from its public subpath.

<script setup lang="ts">
import { Button } from "@line/abc-def-vue/button";
</script>

<template>
  <Button variant="outline">Button</Button>
</template>

// Unsupported
import { Button } from "@line/abc-def-vue";

Composition

Compound Vue components are grouped by component slug. For example, `@line/abc-def-vue/dropdown-menu` exports the root, trigger, content, item, group, separator, and submenu pieces.

Examples

Component pages include Vue imports and basic snippets. The repository also keeps a local Vite consumer under `examples/vue-vite`.