Ocelot-Social/packages/ui

@ocelot-social/ui

Vue component library for ocelot.social - works with Vue 2.7+ and Vue 3.

Installation

npm install @ocelot-social/ui

Usage

Option 1: Individual Imports (recommended)

Import only the components you need. This enables tree-shaking for smaller bundle sizes.

import { OsButton, OsCard } from '@ocelot-social/ui'

<template>
  <OsButton variant="primary">Click me</OsButton>
</template>

<script setup>
import { OsButton } from '@ocelot-social/ui'
</script>

Option 2: Global Registration

Register all components globally via the Vue plugin. No tree-shaking - all components are included in the bundle.

// main.ts
import { createApp } from 'vue'
import { OcelotUI } from '@ocelot-social/ui'
import App from './App.vue'

const app = createApp(App)
app.use(OcelotUI)
app.mount('#app')

Components are then available globally without imports:

<template>
  <OsButton variant="primary">Click me</OsButton>
</template>

Vue 2.7 Support

This library uses vue-demi for Vue 2/3 compatibility.

// Vue 2.7
import Vue from 'vue'
import { OcelotUI } from '@ocelot-social/ui'

Vue.use(OcelotUI)