[Progress] `nuxt@3` support

[ThornWalli]

⚠️ Currently, there is no backward compatibility with nuxt@2 oder bridge when updating.

Nuxt 3 version is available 🎉

Install

npm i nuxt-custom-elements@beta

Todos

• Implement vue-web-component-wrapper for usage i18n, pinia, vuetify
• Solved 🎉 ⚠️ Not really usable until now When importing component inside custom element, style is discarded  vuejs/core#4662
  • Workaround unplugin-vue-ce
    • Vite
    • Webpack: Webpack build fails unplugin/unplugin-vue-ce#65
• Code refactoring
• webpack Build (@nuxt/webpack-builder)
  • Entries build with build or generate.
  • publicPath integration? (https://webpack.js.org/guides/public-path/#automatic-publicpath)
  • extend webpack config
  • Bundle Analyzer?
• vite Build (@nuxt/vite-builder)
  • Entries build with build or generate.
  • publicPath integration? (https://www.npmjs.com/package/vite-plugin-dynamic-base)
  • extend vite config
  • Bundle Analyzer?
• vitest Tests update
  • @nuxt/vite-builder
  • @nuxt/webpack-builder
• Update Documentation
• nuxt backward compatibility (nuxt-bridge)

Features

• Vue3 native custom element integration will be used. https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue
  • ⚠️ Important: custom-elements are offered only as shadow elements.

Problems?

• When importing component inside custom element, style is discarded  vuejs/core#4662
• Webpack build fails unplugin/unplugin-vue-ce#65

[maximepvrt]

do you have any idea when the nuxt 3 version will be available ?

[advanceCabbage]

Excuse me, when will nuxt-custom-elements support nuxt3? Is there a tutorial?

[pperzyna]

+1

[maximepvrt]

I created an issue (nuxt/nuxt#15584) to request native support by nuxt

[ThornWalli]

Hello All (@maximepvrt @pperzyna )

On the beta branch or package (nuxt-custom-elements@beta) is now a build that works with nuxt@3 (bridge is not supported and nuxt@2 is dropped).

Very fresh, so still experimental.

• entry build works in both nuxt builders (@nuxt/vite-builder, @nuxt/webpack-builder)
• native Vue3 customElement integration is used
  • everything is shadow!

Basically the state already produces an expected result.
But now I have to work off some more todos.

[Techbinator]

Hey, Thank you very much for all the hard work.
I gave it a shot and installed on a fresh nuxt 3(3.2.2) installation and after i npm install --save nuxt-custom-elements@beta and include it in the nuxt-config.ts in the modules array i get:

Nuxi 3.2.2                                                                                                                   14:41:21

 WARN  Changing NODE_ENV from development to production, to avoid unintended behavior.                                       14:41:21

Nuxt 3.2.2 with Nitro 2.2.2                                                                                                  14:41:21

 ERROR  Error while requiring module nuxt-custom-elements: Error: Cannot find module './module.json'                         14:41:21
Require stack:
- /Users/tudorfilipovici/workspace/pocmonorepo/v1/node_modules/nuxt-custom-elements/dist/module.cjs


 ERROR  Cannot find module './module.json'                                                                                   14:41:21
Require stack:
- /Users/xxx/workspace/pocmonorepo/v1/node_modules/nuxt-custom-elements/dist/module.cjs

  Require stack:
  - /Users/xxxxx/workspace/pocmonorepo/v1/node_modules/nuxt-custom-elements/dist/module.cjs
  at Module._resolveFilename (node:internal/modules/cjs/loader:1060:15)
  at Function.resolve (node:internal/modules/helpers:118:19)
  at _resolve (/Users/xxxx/workspace/pocmonorepo/v1/node_modules/jiti/dist/jiti.js:1:240719)
  at jiti (/Users/xxxx/workspace/pocmonorepo/v1/node_modules/jiti/dist/jiti.js:1:242883)
  at /Users/xxx/workspace/pocmonorepo/v1/node_modules/nuxt-custom-elements/dist/module.cjs:4:37
  at jiti (/Users/xxx/workspace/pocmonorepo/v1/node_modules/jiti/dist/jiti.js:1:245150)
  at requireModule (/Users/xxxx/workspace/pocmonorepo/v1/node_modules/@nuxt/kit/dist/index.mjs:286:26)
  at normalizeModule (/Users/xxx/workspace/pocmonorepo/v1/node_modules/@nuxt/kit/dist/index.mjs:454:55)
  at installModule (/Users/xxx/workspace/pocmonorepo/v1/node_modules/@nuxt/kit/dist/index.mjs:434:47)
  at initNuxt (/Users/xxxx/workspace/pocmonorepo/v1/node_modules/nuxt/dist/index.mjs:2253:13)
  at async loadNuxt (/Users/xxxx/workspace/pocmonorepo/v1/node_modules/nuxt/dist/index.mjs:2286:5)
  at async loadNuxt (/Users/xxxx/workspace/pocmonorepo/v1/node_modules/@nuxt/kit/dist/index.mjs:522:19)
  at async Object.invoke (/Users/xxxx/workspace/pocmonorepo/v1/node_modules/nuxi/dist/chunks/build.mjs:34:18)
  at async _main (/Users/xxxx/workspace/pocmonorepo/v1/node_modules/nuxi/dist/cli.mjs:51:20)

npm ERR! Lifecycle script `build` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: v1-ted-shared-frontend@0.0.0 
npm ERR!   at location: /Users/xxxx/workspace/pocmonorepo/v1/packages/shared/frontend 

Any help or pointers would be greatly appreciated.

[ThornWalli]

Hello @Techbinator,

can try again, for whatever reason @nuxt/module-builder per npx installed had no JSON files...

Now the release is generated with the project dependencies.

Before:

After: