[Question] VueInVue and compatibility with Nx

[Nessario]

Context: We are looking to restructure the architecture of our whole front-end code-base.

Currently we have 3 projects that are written in Vue, that are in separate places and now we are moving them in one place using Nx.dev

Now one of the projects, we want to refactor gradually using Vue 3 + TypeScript, as the coding standards used there are not the best. For this we are thinking to make use of Veaury.

Questions: Before we proceed with this approach we wanted to make sure about the below questions with you.

1. Does Veaury work well in the case when it's VueInVue?
2. Does monorepo approach with Nx work well with Veaury?

We would appreciate any guidance or suggestions for our use case 🙏🏼

[devilwjp]

@Nessario

1. Veaury is only suitable for mutual migration between projects written using vue3 and projects written using react. It cannot help your project upgrade from vue2 to vue3.
2. Monorepo is not directly related to veaury and will not have any impact.

[Nessario]

Thank you for your reply, a little bit more about the first point. The intention is not to upgrade the vue2 or legacy app but to replace it completely(gradually).

We are thinking to make use of components in a way like this:

// veaury.config.js
module.exports = {
  apps: {
    'legacy-vue2-app': {
      entry: './apps/legacy-vue2-app/src/main.js',
    },
    'new-vue3-app': {
      entry: './apps/new-vue3-app/src/main.js',
    },
  },
};

// apps/legacy-vue2-app/src/main.js
import Vue from 'vue';
import App from './App.vue';
import { wrapVue3Component } from 'veaury';

// Example: Import a Vue 3 component
import NewComponent from '../../new-vue3-app/src/components/NewComponent.vue';

Vue.component('new-component', wrapVue3Component(NewComponent));

new Vue({
  render: h => h(App),
}).$mount('#app');

Then use new-component as it was part of the legacy app. Does this make sense?

[devilwjp]

@Nessario Veaury cannot make a component written using vue3 display normally in a project using vue2. I think the standard approach is to directly upgrade the project.