npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@oruga-ui/oruga-next

v0.9.3

Published

UI components for Vue.js and CSS framework agnostic

Downloads

24,212

Readme

Features

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. 🦋

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 source code of the documentation examples can be found in the examples directories for each component, it serves as the demo as well.

Quick start

🐛 Oruga is available for Vue.js version 3.x

Setup Oruga

  1. Install Oruga.
npm install @oruga-ui/oruga-next
  1. 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)
  • or import them in your SFC.

Customization

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, Material or any other 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 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.

Contributing

Please see the contributing guidelines.

Contact us 👾

→ Join the Oruga Discord server.

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

Core Team

Contributors

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

Complete list.

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.