How to configure oruga-next with Nuxt 3?

[themodernpk]

How to configure oruga-next with Nuxt 3?

[themodernpk]

@jtommy 👍 looking forward!

[k0mar12]

1. npm install @oruga-ui/oruga-next --save
2. Create /plugins/oruga.js

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

export default defineNuxtPlugin(({ vueApp }) => {
    vueApp.use(Oruga);
});

[themodernpk]

@k0mar12 I am getting the following error by using your code (I am using fresh install of Nuxt 3):

[Vue warn]: Failed to resolve component: o-button
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

 ERROR  [worker] Invalid value used as weak map key                                                                                                                 01:52:22

  at WeakMap.set (<anonymous>)
  at normalizePropsOptions (node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:2694:11)
  at createComponentInstance (node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:6150:23)
  at renderComponentVNode (node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:197:22)
  at Module.ssrRenderComponent (node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:623:12)
  at _sfc_ssrRender (/I:/xampp8013/htdocs/test/nuxt3/.nuxt/dist/server/server.mjs:2149:31)
  at renderComponentSubTree (node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:263:13)
  at renderComponentVNode (node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:214:16)
  at renderVNode (node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:304:22)
  at renderVNode (node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:310:17)


 ERROR  [proxy] connect ENOENT \\.\pipe\nitro\worker-31444-1.sock                                                                                                   01:52:22

  at PipeConnectWrap.afterConnect [as oncomplete] (node:net:1161:16)

[k0mar12]

@themodernpk ERROR happens, i belive, coz ur are not using <ClientOnly> in nuxt, so while it trying to rendering on server side you get exception.

Failed to resolve component: o-button - The problem on the Oruga side

[jtommy]

@k0mar12 Oruga side? Oruga works well on Nuxt 2 and the next version is really similar to it.

[themodernpk]

@jtommy & @k0mar12 I am trying to use oruga-next in nuxt 3.

Plugin code plugins/oruga.client.js:

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

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(Oruga)
})

Page code paegs/index.vue:

<template>
  <div>
    <ClientOnly>
      <o-button variant="primary">Primary</o-button>
    </ClientOnly>
  </div>
</template>

Getting the following results:

[Vue warn]: Failed to resolve component: o-button
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

[k0mar12]

@k0mar12 Oruga side? Oruga works well on Nuxt 2 and the next version is really similar to it.

confused mistakes, sry, not this error problem on oruga side, vue warn will probably on oruga side, which asking next @themodernpk

[k0mar12]

@themodernpk @jtommy

I got it. Im sry, the problem could be in nuxt 3 :)

@themodernpk U should run Oruga on both side in Nuxt 3.

I mean, remove .client.js from file name and dont use <ClientOnly> and it will works fine

P.S.: Edited my first answear, check it

[themodernpk]

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

Step 1: 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 2: Remove app.vue from the root and create a page at pages/index.vue with following code:

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

Now, you're good to go.