Minimal Functional UI Components Library For Vue.js – Oruga

Oruga is a lightweight yet functional UI components library for Vue.js 2 and 3 developers.

Components Included:

  • Autocomplete
  • Button
  • Checkbox
  • Collapse
  • Dropdown
  • Field
  • Icon
  • Input
  • Loading
  • Modal
  • Pagination
  • Radio
  • Select
  • Sidebar
  • Skeleton
  • Slider
  • Steps
  • Switch
  • Table
  • Tabs
  • Tooltip
  • Upload

Import:

// Vue.js 2
import Vue from 'vue';
import Oruga from '@oruga-ui/oruga';
import '@oruga-ui/oruga/dist/oruga.css';
Vue.use(Oruga);

// Vue.js 3
import { createApp } from 'vue'
import Oruga from '@oruga-ui/oruga-next';
import '@oruga-ui/oruga-next/dist/oruga.css';
createApp(...).use(Oruga);

Previews:

Oruga Tooltip

Tooltip

Oruga Skeleton

Skeleton

Oruga Modal

Modal

Oruga Form Fields

Form Fields

Oruga Buttons

Buttons

Changelog:

v0.8.5 (02/26/2024)

  • bugfixes

v0.8.4 (02/25/2024)

  • expose setFocus function for all input components
  • pagination: add button tag property
  • tabs|steps: add animation and animateInitially prop
  • theme: adjustments for bulma theme integration
  • theme: add autogenerate component theme type
  • bugfixes

v0.8.3 (02/06/2024)

  • enhance a11y
  • useInputHandler: add input not given warning
  • bugfix

v0.8.2 (12/21/2023)

  • feat(input|select): add disabledClass
  • feat(types): add volar.d.ts generation
  • bugfixes

v0.8.1 (12/10/2023)

  • bugfixes

v0.8.0 (12/06/2023)

  • refactor all components from Option-API to Composition-API (script setup)
  • removed default theme from build output (use theme-oruga instead)
  • add component types to build output
  • add OrugaOptions type definition (usefull for themes)
  • change appendToBody to teleport feature
  • rename component inputitems to taginput
  • change programmatic usage to useOruga()
  • adjust component properties (see detailed component changes)
  • drop vue 2.x support
  • Bug Fixes

v0.7.0 (09/20/2023)

  • add a way to style step dividers
  • add component to tag prop types
  • add the clearIcon prop to input and autocomplete
  • label: add several label props
  • pagination: add itemClass prop
  • table: add checkbox-variant prop
  • bugfix

v0.6.0 (04/25/2023)

  • add loading implentation for button in vue 2
  • add loading props for button
  • add typescript support and testing
  • allow to set background color on outlined button
  • make controls respond to the invalid event
  • table: add paginationSize prop
  • table: add slot preheader
  • bugfixes

v0.5.10 (12/22/2022)

  • bugfix

v0.5.9 (11/14/2022)

  • bugfix
  • feat(sidebar): add hidden/visible classes

v0.5.8 (10/31/2022)

  • bugfix

v0.5.7 (10/31/2022)

  • feat: add Menu component
  • feat(steps): add active event on step-item
  • feat(tooltip): add ‘auto’ position
  • feat(input): watch type prop
  • feat(dropdown): add trigger-tabindex
  • feat(modal): remove custom prop and add scrollClipClasss + noScrollClass
  • bugfix

v0.5.6 (09/07/2022)

  • feat(checkbox): add v-bind to native input
  • feat: export individual components
  • feat: close all programmatic components
  • bugfix

v0.5.5 (03/24/2022)

  • feat(tooltip): emit ‘close’ and ‘open’ events
  • feat(tabs): improve a11y
  • feat(dropdown): improve a11y
  • feat(collapse): improve a11y
  • feat(table): improve rendering
  • feat: return promise when loading and notification programmatic
  • feat(modal): add a promise return to the programmatic modal
  • bugfixes

v0.5.4 (02/21/2022)

  • feat(datepicker): add selectListClasses prop
  • feat(dropdown): add itemTag and menuTag props to autocomplete menu tag
  • bugs fixed

v0.5.3 (01/28/2022)

  • feat(table): add draggable-column prop
  • add support to Nuxt 3
  • bugfixes

v0.5.2 (01/10/2022)

  • Bugfixes

v0.5.1 (01/08/2022)

  • fix: change configuration and defaults in Notification
  • fix: carousel config

Download Details:

Author: oruga-ui

Live Demo: https://oruga.io/documentation/

Download Link: https://github.com/oruga-ui/oruga/archive/develop.zip

Official Website: https://github.com/oruga-ui/oruga

Install & Download:

// Vue.js 2
npm install @oruga-ui/oruga

// Vue.js 3
npm install @oruga-ui/oruga-next

Add Comment