DEV Community

Pradeep Kumar
Pradeep Kumar

Posted on • Edited on

How to use Oruga with Nuxt 3

#oruga #nuxt3 #nuxt

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.

Top comments (1)

Collapse
 
narekmeliksetyan profile image
NarekMeliksetyan •

but this is code don't work for a table