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)
- Andrés Cruz
![Andrés Cruz Andrés Cruz](/public/images/perfil.jpg)
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter