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.
Top comments (1)
but this is code don't work for a table