Wondering what’s next for npm?Check out our public roadmap! »

    @oruga-ui/oruga
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.2 • Public • Published

    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

    Oruga Next version for Vue 3.x

    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

    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.

    Documentation

    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.

    Browser support

    🌎 Oruga has been tested in all major browsers

    Chrome Firefox IE Opera Safari Internet Explorer
    Latest Latest 10+ Latest 6.1+ IE 11

    Quick start

    🐛 Oruga is available for Vue.js version 2.6+ or version 3.x

    Setup Oruga

    Vue 2

    Install Oruga

    npm install @oruga-ui/oruga

    Then import the full 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

    Install Oruga

    npm install @oruga-ui/oruga-next

    Then import the full 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)

    Customization

    Please read carefully 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)

    Using Oruga with Nuxt

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

    Add @oruga-ui/oruga/nuxt to modules section of your nuxt.config.js file.

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

    You can also extend and/or override classes in this section (see how to add new classes or override 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 your plugins folder containing

    import Vue from 'vue'
    import Oruga from '@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 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.

    Contributing

    Please see the contributing guidelines.

    Versioning

    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

    Roadmap

    Core Team


    Walter Tommasi


    Andrea Stagi

    Contributors

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

    Credits

    Oruga logo designed by Matteo Guadagnini

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

    License

    Code released under MIT license.

    Install

    npm i @oruga-ui/oruga

    DownloadsWeekly Downloads

    383

    Version

    0.4.2

    License

    MIT

    Unpacked Size

    3.71 MB

    Total Files

    380

    Homepage

    oruga.io

    Last publish

    Collaborators

    • avatar
    • avatar