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