0

Goal: Inject/render a Vue app instance within another template file so that we won't bother to change any code that is written in AngularJS

eg.

angular-js-app \
> app
  > views
    index.hbs
> nuxt-3-app
  ...
  > src
    ...
    main.js
  ...
  app.vue
> node-modules
...
package.json
readme.md

Let's say index.hbs contents are:

<!DOCTYPE html>
<html ng-app="AngularMaterial">
{{>head}}
<body ng-cloak>
...
<div id="fromNuxtApp"></div>

<script>
  window.addEventListener("load", function () {
    window.fromNuxtApp.mount('#fromNuxtApp');
  });
</script>
...
</body>
</html>

and for main.js contents are:

import { createApp } from 'vue'
import App from './App.vue'

window.fromNuxtApp = createApp(App)

^ I know this is not how Nuxt 3 is structured, I just copied this from another project that is using Vue 3 and vite but I would like to strike the point of injecting Nuxt 3 like this

Expectations:

  • We'll start to develop new features inside nuxt-3-app
  • Migrating old features to nuxt-3-app slowly until we will move away from AngularJS

Factors & ideas:

  • This idea was based on another project and it's written in Vue
  • Beginner level on using Vue, only skimmed Nuxt 3's docs and I won't say I don't have the time but I would like to hear from experienced Nuxt 3 users if this is the best approach/practice
  • It is very taxing for both time & budget to rewrite the whole AngularJS app to another language or even learning AngularJS to introduce new features
  • Thinking of using ESI tags (<esi:include ...) inside the .hbs file but that would require another moving part that won't be utilised efficiently and this is another piece to learn since we will need Varnish.

Question/s:

  • What is the equivalent of createApp.mount function in Nuxt 3? Since vue is not globally exposed in Nuxt 3, I'm trying to find an article but most of them are written in Vue 3, of which, is not advisable for us to use. Reason, we are streamlining our newer projects to use Nuxt 3
  • What part of the Nuxt 3 Docs should I focus on when developing this? If you can point this out that would be super appreciated
  • Aside from overhauling/learning AngularJS, and injecting Nuxt 3 inside the old code, are there any other methods? This is very arbitrary and I won't be expecting any answers.

Ending remarks, I can handle the what-ifs of this structure when deploying or maintaining it.

I'm hoping to know that this is possible using Nuxt 3 and by not resorting to Vue 3

Quer
  • 405
  • 7
  • 16

0 Answers0