TheLazy.Dev
Portfolio GitHub

Blog

oruga |nuxt3 |nuxt

How to use Oruga with Nuxt 3

themodernpk

Pradeep Kumar

Posted on December 31, 2021

How to use Oruga with Nuxt 3

This is for those who would like to use oruga-next with nuxt 3.

Step 1: Install oruga-next in your nuxt 3 project:

npm i @oruga-ui/oruga-next --save
Enter fullscreen mode Exit fullscreen mode

Step 2: Create plugins/oruga.js files with following code:

import { defineNuxtPlugin } from '#app';
import Oruga from '@oruga-ui/oruga-next';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(Oruga)
})
Enter fullscreen mode Exit fullscreen mode

Step 3: Remove app.vue from the root and create a page at pages/index.vue with following code to test oruga button components:

<template>
  <div>
    <o-button variant="primary">Primary</o-button>
    <o-button variant="success">Success</o-button>
    <o-button variant="danger">Danger</o-button>
    <o-button variant="warning">Warning</o-button>
    <o-button variant="info">Info</o-button>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

Step 4: Import scss in nuxt.config.ts:

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
    css: [
        // SCSS file in the project
        '@oruga-ui/oruga-next/src/scss/oruga-full-vars.scss',
    ],
})
Enter fullscreen mode Exit fullscreen mode

Step 5: Restart npm run dev

Now, you're good to go.

[Bug] [Tested on 2022-02-04]

When you build your Nuxt application using npm run build and then nuxi preview, it is show following error:

Invalid value used as weak map key
Enter fullscreen mode Exit fullscreen mode

To fix this issue you need to add following code to your nuxt.config.ts file:

...
build: {
        transpile: [/oruga/]
    }
...
Enter fullscreen mode Exit fullscreen mode

Then run npm run build and nuxi preview. Now, oruga will work fine.

But this will affect npm run dev, so during development you should remove the transpile.

💖 💪 🙅 🚩
themodernpk
Pradeep Kumar

Posted on December 31, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to use Oruga with Nuxt 3
oruga How to use Oruga with Nuxt 3

December 31, 2021