Configure Oruga UI in Vue 3

Oruga is a lightweight UI component library for Vue.js with no CSS dependency; not depending on any specific style or CSS framework (such as Bootstrap, Bulma, TailwindCSS, etc.) it does not provide any grid system or CSS utility, it only offers a set of components that are easy to customize with style sheets using a CSS framework, a custom style or the optional Oruga UI style.

We already talked about how to create a project in Vue 3 in Laravel, now, we are going to integrate Oruga UI:

We install Oruga in the project in Vue with:

npm install @oruga-ui/oruga-next --save

We configure the main.js:

import { createApp } from "vue";
import Oruga from '@oruga-ui/oruga-next'
import '@oruga-ui/oruga-next/dist/oruga.css'
import '@oruga-ui/oruga-next/dist/oruga-full.css'
import App from "./App.vue"
const app = createApp(App).use(Oruga)
app.mount("#app")

In the previous step, let's remember that a project in Vue 3 looks like:

import { createApp } from "vue";
import App from "./App.vue"
app.mount("#app")

And all we do is include the Oruga components:

import Oruga from '@oruga-ui/oruga-next'

A minimal style of Caterpillar:

import '@oruga-ui/oruga-next/dist/oruga.css'

And the optional style of Oruga:

import '@oruga-ui/oruga-next/dist/oruga-full.css'

Then, we install the plugin in Vue:

createApp(App).use(Oruga)

07-08-2023 - Andrés Cruz

En español

• Category
• /
• Vue
• /
• Configure Oruga UI in Vue 3