Configurar Oruga UI en Vue 3

Oruga es una biblioteca liviana de componentes de interfaz de usuario para Vue.js sin dependencia de CSS; al no depender de ningún estilo específico o framework CSS (como Bootstrap, Bulma, TailwindCSS, etc.) no proporciona ningún sistema de cuadrícula o utilidad CSS, solo ofrece un conjunto de componentes fáciles de personalizar con las hojas de estilos usando un framework CSS, un estilo personalizado o el estilo opcional de Oruga UI.

Ya hablamos cómo crear un proyecto en Vue 3 en Laravel, ahora, vamos a integrar Oruga UI:

Instalamos Oruga en el proyecto en Vue con:

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

Configuramos el 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")

En el paso anterior, recordemos que un proyecto en Vue 3 luce como:

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

Y lo único que hacemos es incluir los componentes de Oruga:

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

un estilo mínimo de Oruga:

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

Y el estilo opcional de Oruga:

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

Luego, instalamos el plugin en Vue:

createApp(App).use(Oruga)