oruga: A Vue repository from tcitworld

Oruga UI is like a caterpillar, minimal and yet functional. It's in your hands turning it into a butterfly

(🐛) => 🦋

Oruga is a lightweight library of UI components for Vue.js without CSS framework dependency

Next

Features

CSS framework agnostic: No dependency on a specific CSS framework/library but you can easily integrate the components with one of them because they are fully customizable in different ways
Components with steroids: most of the components aren't a simple wrapper of native elements but they add new and custom features
Lightweight: no other internal dependency and import only components that you need

Documentation

The documentation is in the docs directory, it serves as the demo as well.

Browse online documentation here.

Quick start

You need Vue.js version 2.6+ or version 3.x.

1 Install via npm

Vue 2

npm install @oruga-ui/oruga

Vue 3

npm install @oruga-ui/oruga-next

2 Import and use Oruga

Vue 2

Bundle

import Vue from 'vue';
import Oruga from '@oruga-ui/oruga';
import '@oruga-ui/oruga/dist/oruga.css';

Vue.use(Oruga);

or Individual Components (tree shaking)

import Vue from 'vue';
import { Field, Input } from '@oruga-ui/oruga';
import '@oruga-ui/oruga/dist/oruga.css';

Vue.use(Field);
Vue.use(Input);

Vue 3

Bundle

import { createApp } from 'vue'
import Oruga from '@oruga-ui/oruga-next';
import '@oruga-ui/oruga-next/dist/oruga.css';

createApp(...).use(Oruga);

or Individual Components (tree shaking)

import Vue from 'vue'
import { Field, Input } from '@oruga-ui/oruga'
import '@oruga-ui/oruga/dist/oruga.css'

createApp(...)
  .use(Field)
  .use(Input)