Configure Oruga UI in Vue 3

- Andrés Cruz

En español
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)
Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.