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
[!NOTE]
Oruga for Vue 2.x deprecated
Due to EOL for Vue 2.x at the end of the year, from now on Oruga for Vue 2 is deprecated. Further enhancements will only be developed for Oruga-next. See #496.
Oruga is a lightweight UI components library for Vue.js without any dependency. It offers a set of easily customisable components and doesn't depend on any specific style or CSS framework (like Bootstrap, Bulma, TailwindCSS, etc...). Therefore, it doesn't provide a grid system or CSS utilities, but you can integrate any CSS framework you like. Oruga provides you with a set of functional components, so you can focus only on the UI/UX aspects of your application and can be entirely flexible for future changes without having to touch a line of JavaScript.
- 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
If you need a component library and want to easily apply your custom styles, Oruga is the library for you! 🐛
In addition, if you don't want to style everything yourself, we've created several themes to provide you with a variety of ready-to-use styles. 🦋
Browse online documentation here.
💅 For more info about components customization, read carefully the "customization" section in the documentation.
🕹 To see Oruga in action, go to the Example section in the documentation.
Note: the documentation source code is in the docs
directory, it serves as the demo as well.
🐛 Oruga is available for Vue.js version 3.x
- Install Oruga.
npm install @oruga-ui/oruga-next
- Import the components:
-
To get started quickly, use
Oruga
to register all components:import { createApp } from 'vue' import Oruga from '@oruga-ui/oruga-next'; createApp(...).use(Oruga);
-
To use tree shaking, either register component manually:
import { createApp } from 'vue' import { OField, OInput } from '@oruga-ui/oruga' createApp(...) .use(OField) .use(OInput)
Oruga's superpower is its configurability and its CSS framework agnostic approach. Each component can be individually customised and configured by defining specific classes using a class-mapping approach. Therefore, Oruga comes without any styling by default. However, there are several official predefined configurations called themes, which you can include and extend to give your application a individual look and feel. And all components came with predefined classes by default.
Please read the "customization" section in Oruga documentation.
If you want to see an example with a fully customized registration form using Tailwind
, Bulma
, Bootstrap
or Material
CSS framework have a look at the official Oruga multiframework example (source code available here) or if you're more familiar with TailwindCSS 2 give our official TailwindCSS Demo a try (source code here)
Oruga doesn't provide a Nuxt.js module at the moment.
You can use Nuxt.js plugins system adding a file (e.g. oruga.js
) in your plugins
folder containing:
import Oruga from '@oruga-ui/oruga-next';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(Oruga);
});
To make this plugin available in your app, add this file to the plugins
array in your nuxt.config.js
plugins: [{ src: '~plugins/oruga.js' }]
To understand how the plugins work with Nuxt.js, take a look at the NuxtJS plugin documentation.
Take a look at the official NuxtJS + Oruga example.
Please see the contributing guidelines.
Oruga uses Semantic Versioning 2.0.0 for package versions.
While it's still in beta, versions will follow this pattern: v0.Y.Z, where:
- Y: Major (breaking changes)
- Z: Minor or patch
Walter Tommasi |
Andrea Stagi |
Marcel Moravek |
Thank you to everyone involved for improving this project, day by day 💚
Oruga logo designed by Matteo Guadagnini
Oruga svg images for Checkbox and Radio components and Holidays assets created by Fabrizio Masini
Code released under MIT license.