Nuxt Framework as VueJS Option of Editor

[LasanthaSudeera]

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]

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

[julien-moreau]

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]

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