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

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)
})

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>

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',
    ],
})

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

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

...
build: {
        transpile: [/oruga/]
    }
...

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.

Comments

[NarekMeliksetyan]

but this is code don't work for a table