# @ocelot-social/ui | Ocelot.Social Documentation
Ocelot.Social Documentation

Skip to main content

- Introduction
- Neo4J

- Backend

  - GraphQL
  - neo4j-graphql-js

- Webapp (Frontend)

  - Components
  - HTML
  - SCSS
  - Vue

- Testing Guide

  - End-to-end Tests
  - Webapp (Frontend) Tests
  - Backend Tests
- Deployment
- Contributing
- Feature Specification
- Code of Conduct
- Documentation
- License

# @ocelot-social/ui

April 5, 2026
Less than 1 minute

On This Page

- Installation
- Usage
- - Option 1: Individual Imports (recommended)
  - Option 2: Global Registration
- Vue 2.7 Support

# @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 } 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)