Nuxt3 integration

[nndnha]

Nuxt3 beta has now been released, just wandering if there are any plans to have a module for nuxt3?

[cagataycivici]

Working on it for this week. It is at the top of our list.

[cagataycivici]

No luck so far.

[cagataycivici]

Finally got it working, dealing with some warnings.

[cagataycivici]

Had to give up on the module for now due to having so many things failing with the module, Nuxt 3 is in beta and it is quite unstable as stated on their website with missing documentation. So until final, adding a guide to our docs which is how to install it manually.

nuxt.config.js

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
    css: [
        'primevue/resources/themes/saga-blue/theme.css',
        'primevue/resources/primevue.css',
        'primeicons/primeicons.css'
    ]
})

Create a file like primevue.js under plugins directory;

primevue.js

import { defineNuxtPlugin } from "#app";
import PrimeVue from "primevue/config";
import Button from "primevue/button";

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(PrimeVue, {ripple: true});
    nuxtApp.vueApp.component('Button', Button);
   //other components that you need
});

Will put up a sample repo and add it to the docs as well.

[smorcuend]

Hi people!

Last changes on nuxt3 CI generates error after build process. The result code on bundling process not showing errors but npx nuxi preview throw this error on console when serving:

Directory import '/home/myproject/.output/server/node_modules/primevue/config' is not supported resolving ES modules imported from /home/myproject/.output/server/chunks/app/server.mjs
Did you mean to import primevue/config/config.cjs.js?
  at new NodeError (node:internal/errors:371:5)  
  at finalizeResolution (node:internal/modules/esm/resolve:412:17)  
  at moduleResolve (node:internal/modules/esm/resolve:932:10)  
  at defaultResolve (node:internal/modules/esm/resolve:1044:11)  
  at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)  
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)  
  at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)  
  at link (node:internal/modules/esm/module_job:75:36)

My code:

• package.json

  "private": true,
  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi build",
    "preview": "nuxi preview",
    "start": "node .output/server/index.mjs"
  },
  "devDependencies": {
    "nuxt3": "^3.0.0-27335375.b41a1d2"
  },
  "dependencies": {
    "primeflex": "~3.1.0",
    "primeicons": "~5.0.0",
    "primevue": "~3.10.0"
  }
}

• nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  css: [
    'primevue/resources/themes/saga-green/theme.css',
    'primevue/resources/primevue.css',
    'primeflex/primeflex.css',
    'primeicons/primeicons.css',
  ],
  // ssr: false,
  publicRuntimeConfig: {
    $appState: { theme: 'saga-green', darkTheme: false },
  }
})

• plugins/primevue.js

import { defineNuxtPlugin } from '#app'
import PrimeVue from 'primevue/config'
import Button from 'primevue/button'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(PrimeVue, { ripple: true })
  nuxtApp.vueApp.component('Button', Button)
  //other components that you need
})

My config -> Node: 16.13 NPM: 8.1.0
Regarding development server is serving correctly.

Any ideas?

[multiplehats]

Same issue here!

[smorcuend]

Solved here: #1969