Add support for Nuxt3

[Decipher]

Is your feature request related to a problem? Please describe.
As a user I want to be use Druxt with Nuxt 3.

Describe the solution you'd like

• Test Druxt modules with Nuxt 3

Describe alternatives you've considered
N/A

Additional context
https://v3.nuxtjs.org/

[Decipher]

Initial test setting up a new Nuxt 3 install with the DruxtSite module didn't work.

Steps:

• Run quickstart-druxt-site repo in Gitpod: https://gitpod.io/#github.com/druxt/quickstart-druxt-site
• Remove old nuxt folder: rm -rf nuxt
• Install Nuxt 3: npx nuxi init nuxt && cd nuxt && yarn
• Install DruxtSite module: yarn add druxt-site
• Add buildModules: [['druxt-site'], { baseUrl: 'https://demo-api.druxtjs.org' } to nuxt.config.ts
• Run yarn dev

Errors include:

 ERROR  [unhandledRejection] Cannot read property 'hooks' of undefined                                                                                                                         22:28:54

  at Object.wrappedModule (node_modules/@nuxt/kit/dist/index.mjs:1092:13)
  at Object.installModule (node_modules/@nuxt/kit/dist/index.mjs:1196:17)
  at Object.DruxtSiteNuxtModule (node_modules/druxt-site/dist/druxt-site.ssr.js:50:8)
  at installModule (node_modules/@nuxt/kit/dist/index.mjs:1196:17)
  at initNuxt (node_modules/nuxt3/dist/index.mjs:817:11)
  at async load (node_modules/nuxi/dist/chunks/dev.mjs:6762:9)
  at async Object.invoke (node_modules/nuxi/dist/chunks/dev.mjs:6793:5)
  at async _main (node_modules/nuxi/dist/chunks/index.mjs:417:7)

WARN  [SSR] Error transforming /workspace/quickstart-druxt-site/nuxt/node_modules/druxt-site/dist/components/DruxtSite.vue: Error: Missing "./dist/components/DruxtModule.vue" export in "druxt" package

 WARN  [worker] Cannot find module '/workspace/quickstart-druxt-site/nuxt/node_modules/vue/server-renderer' imported from /workspace/quickstart-druxt-site/nuxt/.nuxt/nitro/index.mjs          22:40:07

  at finalizeResolution (internal/modules/esm/resolve.js:285:11)
  at moduleResolve (internal/modules/esm/resolve.js:708:10)
  at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:819:11)
  at Loader.resolve (internal/modules/esm/loader.js:89:40)
  at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
  at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:73:40)
  at link (internal/modules/esm/module_job.js:72:36)

[Decipher]

It appears to work with @nuxt/bridge: https://v3.nuxtjs.org/getting-started/bridge

Branch: https://github.com/druxt/quickstart-druxt-site/tree/feature/nuxt-bridge
Gitpod: https://gitpod.io#github.com/druxt/quickstart-druxt-site/tree/feature/nuxt-bridge

[Decipher]

npm run generate fails with DruxtSite on @nuxt/bridge:

 FATAL  [worker] Cannot use import statement outside a module                                                                                                                                  22:54:02

  import { DruxtClient } from 'druxt';
  ^^^^^^
  
  SyntaxError: Cannot use import statement outside a module
  at wrapSafe (internal/modules/cjs/loader.js:988:16)
  at Module._compile (internal/modules/cjs/loader.js:1036:27)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
  at Module.load (internal/modules/cjs/loader.js:937:32)
  at Function.Module._load (internal/modules/cjs/loader.js:778:12)
  at ModuleWrap.<anonymous> (internal/modules/esm/translators.js:199:29)
  at ModuleJob.run (internal/modules/esm/module_job.js:170:25)
  at async Loader.import (internal/modules/esm/loader.js:178:24)
  at async Object.loadESM (internal/process/esm_loader.js:68:5)


   ╭────────────────────────────────────────────────────────────────────────╮
   │                                                                        │
   │   ✖ Nuxt Fatal Error                                                   │
   │                                                                        │
   │   SyntaxError: [worker] Cannot use import statement outside a module   │
   │                                                                        │
   ╰────────────────────────────────────────────────────────────────────────╯

[Decipher]

@christianwiedemann I came across your WIP branch today: https://github.com/christianwiedemann/druxt.js/tree/vue3

I have not yet had the opportunity to explore Nuxt3, but I would like to commence development on it once I have released Druxt 1.0.0.

However, if it is possible to get Vue 3 and Nuxt 3 support into Druxt without disrupting Vue 2 and Nuxt 2 support I would be willing to re-adjust the timeline.

Please do let me know if theres anything I can do to assist your development.

[christianwiedemann]

Hi @Decipher, we are currently trying to migrate only the "druxt" package to evaluate how much effort a migration would be.
When we are ready, we will document the migration path here, and we can discuss the next steps. Currently, we are not sure if a side by side migration (vue2, vue3) is possible or either makes sense. But let discuss this later.
What do you think? Thanks!

[christianwiedemann]

Hi @Decipher we decided to build our Component Library with vue-demi and skip the migration for now. Maybe vue-demi would also be a option for druxt.

[Decipher]

Hi @christianwiedemann,

Thanks for the update. I have not looked at vue-demi, but I will keep it in mind once I have the available bandwidth to give this issue.

Fingers crossed I have time to investigate further in the coming weeks.

[Triloworld]

Hi, Nuxt 3 is RC so status of this issue can be updated.
https://nuxtjs.org/announcements/nuxt3-rc/

[Decipher]

Hi @Triloworld,

It's important that Druxt 1.0.0 is finalised before I personally can commit to Nuxt 3 / Vue 3.

It's definitely going to happen as a high priority after 1.0.0 though, and would appreciate any help in developing, documenting and testing.

[z3cka]

Nuxt 3 is here! https://nuxt.com/v3

[tyler36]

Looking forward to testing an beta