Vuecs 📦

A Vue 3 component library providing reusable UI components with TypeScript support, CSS extraction, and composable theming via presets.

Table of Contents

• Packages
• Contributing
• License

Packages

@vuecs/core

Theme resolution system, utilities, and component infrastructure. Provides installThemeManager, useComponentTheme, extend(), and preset composition.

npm install @vuecs/core

import vuecs, { extend } from '@vuecs/core';
import bootstrapV5 from '@vuecs/preset-bootstrap-v5';
import fontAwesome from '@vuecs/preset-font-awesome';

app.use(vuecs, {
    themes: [bootstrapV5(), fontAwesome()],
    overrides: {
        elements: { listItem: { classes: { root: extend('border-bottom') } } },
    },
});

Full documentation

@vuecs/list-controls

List display components with loading, empty state, and item event handling (created/updated/deleted).

npm install @vuecs/list-controls

<VCList :data="items" :busy="loading" :total="total">
    <template #item="{ data, deleted }">
        <span>{{ data.name }}</span>
        <button @click="deleted(data)">Remove</button>
    </template>
</VCList>

Full documentation

@vuecs/form-controls

Form input components with validation support: input, checkbox, select, textarea, submit, searchable select, and range slider.

npm install @vuecs/form-controls

<VCFormGroup label-content="Email" :validation-messages="errors">
    <VCFormInput v-model="form.email" type="email" />
</VCFormGroup>

Full documentation

@vuecs/pagination

Pagination component with page calculation utilities and icon support via presets.

npm install @vuecs/pagination

<VCPagination :total="100" :limit="10" :offset="0" @load="onPageChange" />

Full documentation

@vuecs/navigation

Multi-level navigation with NavigationManager, path-based matching, and vue-router integration.

npm install @vuecs/navigation

Full documentation

@vuecs/countdown

Countdown timer component with auto-start, visibility handling, and scoped slot for custom display.

npm install @vuecs/countdown

Full documentation

@vuecs/gravatar

Gravatar avatar component.

npm install @vuecs/gravatar

Full documentation

@vuecs/link

Router-aware link component with automatic detection of vue-router or Nuxt.

npm install @vuecs/link

Full documentation

@vuecs/timeago

Relative time display component with locale support and auto-update.

npm install @vuecs/timeago

Full documentation

Contributing

npm ci
npm run build
npm run test
npm run lint

License

Made with 💚

Published under MIT License.