Repository files navigation

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 forVue.js without CSS framework dependency

Oruga Next version for Vue 3.x

• 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

Oruga doesn't depend on any specific style or CSS framework (like Bootstrap, Bulma, TailwindCSS etc...) and it doesn't provide any grid system or CSS utility, it just offer a set of components easy to customize. Oruga wants you to focus only on UI/UX aspects of your application and be totally flexible to future changes without having to touch a line of JavaScript.

Browseonline documentation here.

💅 For more info about components customization,read carefully the "customization" section in the documentation.

🕹 To see Oruga in action, go to theExample section in the documentation.

Note: the documentation source code is in thedocs directory, it serves as the demo as well.

🌎 Oruga has been tested in all major browsers

Latest ✔	Latest ✔	10+ ✔	Latest ✔	6.1+ ✔	IE 11 ✔

🐛 Oruga is available forVue.jsversion 2.6+ orversion 3.x

Install Oruga

npm install @oruga-ui/oruga

Then import the full bundle

importVuefrom'vue';importOrugafrom'@oruga-ui/oruga';import'@oruga-ui/oruga/dist/oruga.css';Vue.use(Oruga);

or individual components (tree shaking)

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

Install Oruga

npm install @oruga-ui/oruga-next

Then import the full bundle

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

or individual components (tree shaking)

importVuefrom'vue'import{Field,Input}from'@oruga-ui/oruga'import'@oruga-ui/oruga/dist/oruga.css'createApp(...).use(Field).use(Input)

Pleaseread carefully the "customization" section in Oruga documentation.

If you want to see an example with a fully customized registration form usingTailwind,Bulma,Bootstrap orMaterial CSS framework have a look at the officialOruga multiframework example(source code availablehere) or if you're more familiar with TailwindCSS 2 give our officialTailwindCSS Demo a try (source codehere)

Oruga provides aNuxt.js module to easily integrate the library in your Nuxt.js app.

Add@oruga-ui/oruga/nuxt tomodules section of yournuxt.config.js file.

module.exports={modules:['@oruga-ui/oruga/nuxt']}

You can also extend and/or override classes in this section (see how toadd new classes oroverride existing classes in Oruga)

module.exports={modules:[['@oruga-ui/oruga/nuxt',{button:{override:true}}]]}

Alternatively you can use Nuxt.js plugins system adding a file (e.g.oruga.js) in yourplugins folder containing

importVuefrom'vue'importOrugafrom'@oruga-ui/oruga'import'@oruga-ui/oruga/dist/oruga.css'Vue.use(Oruga)

To make this plugin available in your app, add this file to theplugins array in yournuxt.config.js

plugins:[{src:'~plugins/oruga.js'}]

To understand how the plugins work with Nuxt.js, take a look at theNuxtJS plugin documentation.

Take a look at theofficial NuxtJS + Oruga example.

Please see thecontributing guidelines.

Oruga usesSemantic 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

• v1

Walter Tommasi

Andrea Stagi

Thank you to everyone involved for improving this project, day by day 💚

Oruga logo designed byMatteo Guadagnini

Oruga svg images for Checkbox and Radio components and Holidays assets created byFabrizio Masini

Code released underMIT license.