Sitelet https://github.com/BabylonJS/Editor/pull/842
Skip to content

Nuxt Framework as VueJS Option of Editor - #842

Merged
julien-moreau merged 6 commits into
BabylonJS:masterfrom
LasanthaSudeera:vuejs_nuxt_implementation
Apr 30, 2026
Merged

julien-moreau merged 6 commits into
BabylonJS:masterfrom
LasanthaSudeera:vuejs_nuxt_implementation

Conversation

@LasanthaSudeera

@LasanthaSudeera LasanthaSudeera commented Apr 24, 2026 •

Copy link
Copy Markdown
Contributor

Summary

Introduces Nuxt.js as a first-class template in the Babylon.js Editor, alongside the existing Next.js, Solid, Vanilla, and Electron options. Users picking "Nuxt" from the "Create Project" dashboard get a ready-to-run Nuxt 3 +
Babylon.js 9 project with the editor's scripting decorators, Havok physics, and scene loader wired up.

Changes Made

Editor integration

  • Registered nuxtjs as a new EditorProjectTemplate value (editor/src/project/typings.ts) so project metadata can identify the framework.
  • Added the Nuxt option to the "Create Project" dialog's template selector (editor/src/dashboard/create.tsx) so users can pick it from the dashboard next to the other frameworks.
  • Declared templates/nuxtjs as a workspace in the root package.json and added it to postinstall.mjs's packTemplates() pipeline so its tgz is built alongside every other template and shipped to editor/templates/nuxtjs.tgz, which the
    dashboard fetches and decompresses into the user's chosen folder.
  • Updated templates/package.json so the clean, build, and build-concurrently scripts cover Nuxt's .nuxt / .output directories and the new babylonjs-editor-nuxtjs-template workspace.

Nuxt project template (templates/nuxtjs/)

  • Scaffolded the Nuxt 3 project: nuxt.config.ts, package.json (Nuxt 3.14.1592, Vue 3.5.13, @babylonjs/core / gui / materials / addons / havok, babylonjs-editor-tools, babylonjs-editor-cli), tsconfig.json, .gitignore, .npmignore,
    .vscode/launch.json, and README.md.
  • Added src/app.vue as the root component. Mirrors the Next.js template's page.tsx in Vue 3 composition API — creates the Engine and Scene on mount, loads /scene/example.babylon via loadScene from babylonjs-editor-tools, enables Havok
    physics, attaches the active camera, and runs the render loop. Disposes engine/scene and the resize listener on onBeforeUnmount.
  • Added src/scripts.ts and src/scripts/box.ts so the editor's script-map pattern (with decorators like @visibleAsNumber) is available out of the box.
  • Shipped the reference assets/example.scene (materials, textures, meshes, camera, lights) so a newly-generated project has something to render as soon as the editor packs it into public/scene/.
  • Added the official Nuxt logo at public/nuxt.svg as the template's branding asset.
  • Configured nuxt.config.ts for the Babylon use case: SPA mode (ssr: false), srcDir: "src/", assetsInclude: ["**/*.fx"] so Babylon shader files are served as assets, and several Vite integration options required to make the Babylon +
    editor-tools pipeline work inside Nuxt:
    • vite.esbuild.tsconfigRaw with experimentalDecorators: true, useDefineForClassFields: false, and verbatimModuleSyntax: false so Vite/esbuild transforms the editor's TypeScript legacy decorators (e.g. @visibleAsNumber) and still
      strips type-only imports (e.g. IScript). Nuxt's own typescript.tsConfig option only rewrites .nuxt/tsconfig.json and is not forwarded to Vite's transform pipeline, so these have to be set here explicitly.
    • vite.optimizeDeps.exclude: ["@babylonjs/havok"] so the Havok loader resolves HavokPhysics.wasm from its own package path instead of Vite's pre-bundle cache, matching the Solid and Vanilla Vite templates.
    • dir.public: "../public" so Nitro keeps serving the project-root public/ folder (where the editor packs /scene/*.babylon) even though srcDir is src/.

Benefits

  • Vue developers can now build Babylon.js scenes in the editor and ship them with Nuxt's file-based routing, SSR-ready tooling, and first-class Vite DX — no need to pick a React-based template.
  • The Nuxt option is fully integrated into the existing dashboard flow: users click "Create Project", pick Nuxt, and get a project that runs on the first yarn dev without debugging decorator, WASM, or public-dir issues.
  • The editor's scripting model (decorated script classes attached to scene objects) works identically across Nuxt and every other template, so docs, tutorials, and editor-side tooling apply without framework-specific caveats.
  • Parity with the other templates in clean / build tasks and the postinstall pack pipeline means Nuxt is maintained on the same CI/release cadence going forward, rather than being a one-off asset.

@LasanthaSudeera

Copy link
Copy Markdown
Contributor Author

Introduces Nuxt.js as a first-class template in the Babylon.js Editor

@julien-moreau

Copy link
Copy Markdown
Contributor

Hey ! Thanks a lot !!! I did a quick review and everything looks fine. I'll try to check more today or max tomorrow. Can you also fix the conflicts? Thanks a lot

@LasanthaSudeera

Copy link
Copy Markdown
Contributor Author

Hi Julien , thanks for the quick reply. I have fixed the conflicts.

@julien-moreau

Copy link
Copy Markdown
Contributor

Hey @LasanthaSudeera it looks like there are still conflicts :(

I'm good to go !! But I noticed it's the first time I installed Nuxt on this machine and it asked me approval for analytics. The thing is the automatic install made by the editor when opening the project stays stuck on this and never resolves until we manually accept or decline using a command line. Is there any way to force the value ? Should we approve by default ? Or decline by default ?

Thanks for your answers, right after this we can merge

@LasanthaSudeera

Copy link
Copy Markdown
Contributor Author

Hi @julien-moreau,

Telemetry is now disabled by default, thanks for the heads up, I totally missed that for new users! As for the conflicts, everything looks clear on my end. I’m not seeing any issues.

image

@julien-moreau

Copy link
Copy Markdown
Contributor

Thanks a lot !!

@julien-moreau
julien-moreau merged commit cba5590 into BabylonJS:master Apr 30, 2026
1 check passed
@LasanthaSudeera
LasanthaSudeera deleted the vuejs_nuxt_implementation branch May 2, 2026 04:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants