@arrowster/shared-ui

@arrowster/shared-ui

Shared Vue 3 component library for Arrowster projects. Built with Vite in library mode; works in plain Vue 3 apps and Nuxt 3 (Nuxt is Vue 3 under the hood).

Requirements

• Node >=24.15.0 (see .nvmrc — run nvm use)
• npm (this repo uses npm; package-lock.json is the committed lockfile)

Install (in a consuming app)

npm install @arrowster/shared-ui

vue (^3.5) is a peer dependency — your app already provides it.

Vue 3

// main.ts
import '@arrowster/shared-ui/style.css'

<script setup lang="ts">
import { BaseButton } from '@arrowster/shared-ui'
</script>

<template>
  <BaseButton variant="primary">Hi</BaseButton>
</template>

Nuxt 3

// nuxt.config.ts
export default defineNuxtConfig({
  css: ['@arrowster/shared-ui/style.css'],
})

<script setup lang="ts">
import { BaseButton } from '@arrowster/shared-ui'
</script>

Dashboard layout

BaseDashboardLayout owns the sidebar and topbar. Pass the menu as an items array and bind the active item with v-model. Anything you leave out shows a labelled placeholder.

<script setup lang="ts">
import { ref } from 'vue'
import { BaseDashboardLayout, type NavItem } from '@arrowster/shared-ui'
import { HomeIcon, UsersIcon } from './icons' // any Vue components

const active = ref('dashboard')
const items: NavItem[] = [
  { value: 'dashboard', label: 'Dashboard', icon: HomeIcon },
  { value: 'students', label: 'Active Students', icon: UsersIcon, badge: 128 },
  { value: 'archive', label: 'Archived', disabled: true },
]
</script>

<template>
  <BaseDashboardLayout v-model="active" brand="Arrowster" :items="items">
    <template #topbar>…</template>
    <!-- page content -->
  </BaseDashboardLayout>
</template>

Local development

nvm use          # match Node version
npm install      # install deps
npm run dev      # Vite playground (index.html + src/App.vue)

Other scripts:

Project structure

src/
  index.ts               # published entry (re-exports components + imports CSS)
  style.css              # Tailwind entry, compiled to dist/style.css
  components/
    index.ts             # component barrel (public exports)
    ui/                  # UI primitives
      BaseButton.vue
      BaseButton.spec.ts # colocated tests — every component ships one
  App.vue                # playground only (not published)
  main.ts                # playground only (not published)

Adding a component

1. Create src/components/ui/YourComponent.vue.
2. Add a colocated src/components/ui/YourComponent.spec.ts.
3. Export it from src/components/index.ts.
4. Drop it into src/App.vue and npm run dev to view it.
5. npm run build — it's in the package automatically.

Publishing

npm version patch   # or minor / major
npm publish

prepublishOnly runs the full build (typecheck + lint + test + bundle) first, so dist/ is always fresh and verified. Only dist/ + README.md are published (see files in package.json).