Installation

Source-distributed Vue 3 kit. Tailwind has to scan the shipped components.

Install

The package is source, not a prebuilt bundle. A compiled dist would strip the Tailwind utilities that live inside the .vue files.


        
          
          
          pnpm add @aezakmiproject/hesoyam
        

          
          
          pnpm add vue tailwindcss reka-ui @lucide/vue

The second line is the peer set. If Vue and Tailwind are already in the app, add only reka-ui and @lucide/vue.

Nuxt

The module auto-imports components, injects the theme into the Tailwind entry stylesheet, and keeps the package out of Vite pre-bundling.

nuxt.config.ts


        
          1
          
          export default defineNuxtConfig({
        

          2
          
            modules: ['@aezakmiproject/hesoyam/nuxt'],
        

          3
          
          })

app.vue


        
          1
          
          <template>
        

          2
          
            <Button size="small">Deploy</Button>
        

          3
          
          </template>

Module options

Defaults are empty prefix, auto-import on, theme on.

nuxt.config.ts


        
          1
          
          export default defineNuxtConfig({
        

          2
          
            modules: ['@aezakmiproject/hesoyam/nuxt'],
        

          3
          
            hesoyam: {
        

          4
          
              prefix: '',
        

          5
          
              components: true,
        

          6
          
              theme: true,
        

          7
          
            },
        

          8
          
          })

prefix: 'Hesoyam' exposes <HesoyamButton> instead of Button.
components: auto-import. Set false to import by hand.
theme: inject @aezakmiproject/hesoyam/theme.css after the Tailwind import. If that file already imports the theme, the module leaves it alone.

Vue + Vite

Import the theme from the same stylesheet as Tailwind. Tell Vite not to pre-bundle the package — esbuild cannot process the .vue files it ships.

main.css


        
          1
          
          @import "tailwindcss";
        

          2
          
          @import "@aezakmiproject/hesoyam/theme.css";

vite.config.ts


        
          1
          
          export default defineConfig({
        

          2
          
            plugins: [vue(), tailwindcss()],
        

          3
          
            optimizeDeps: { exclude: ['@aezakmiproject/hesoyam'] },
        

          4
          
          })

ButtonRow.vue


        
          1
          
          <script setup lang="ts">
        

          2
          
          import { Button } from '@aezakmiproject/hesoyam'
        

          3
          
          </script>
        

          4
          
           
        

          5
          
          <template>
        

          6
          
            <Button size="small">Deploy</Button>
        

          7
          
          </template>

Register everything

A Vue plugin if you want every component on the app instance.

main.ts


        
          1
          
          import Hesoyam from '@aezakmiproject/hesoyam'
        

          2
          
           
        

          3
          
          app.use(Hesoyam)
        

          4
          
          // or app.use(Hesoyam, { prefix: 'Hesoyam' })

Auto-import in Vite

unplugin-vue-components with the Hesoyam resolver.

vite.config.ts


        
          1
          
          import { HesoyamResolver } from '@aezakmiproject/hesoyam/resolver'
        

          2
          
          import Components from 'unplugin-vue-components/vite'
        

          3
          
           
        

          4
          
          export default defineConfig({
        

          5
          
            plugins: [
        

          6
          
              vue(),
        

          7
          
              Components({ resolvers: [HesoyamResolver()] }),
        

          8
          
            ],
        

          9
          
          })

Theme

theme.css defines the --ds-* scales, type, radius, and the @source rules that let Tailwind see the components. Override tokens after the import.

main.css


        
          1
          
          @import "tailwindcss";
        

          2
          
          @import "@aezakmiproject/hesoyam/theme.css";
        

          3
          
           
        

          4
          
          :root {
        

          5
          
            --ds-focus: #7c3aed;
        

          6
          
          }

index.html


        
          1
          
          <html class="dark">

Typography expects Geologica (--font-sans) and Geist Mono (--font-mono). Both fall back to system fonts if you do not load them.

Imports

Named exports from the barrel, or a folder if you prefer not to go through the index.

app.ts


        
          1
          
          import { Button, Modal, toast } from '@aezakmiproject/hesoyam'
        

          2
          
          import { Button } from '@aezakmiproject/hesoyam/components/button'

Practices

Never pre-bundle the package. The Nuxt module already adds optimizeDeps.exclude. Vite apps must set it by hand.
Import the theme from the stylesheet that imports Tailwind. A second CSS file will not scan the components.
Dark mode is a dark class on a parent, usually html. The dark palette is the reference; light is the adaptation.
Typecheck with vue-tsc or Volar. Plain tsc cannot type .vue source.
Node 20.19 or newer. Nuxt 3.13+ or Vue 3.5+.