Converting component App with Vuex store, Nuxt or Vue router to web components

[kvedantmahajan]

I cannot find the above stated in the readme anywhere

All the articles are focused on converting Vue only components to Web components.

However, we are gearing towards micro-frontend approach and very proactively considering to convert Vue (main front-end stack) to Web components. But since it will use Store and Nuxt.js in future for that. How can I go about the process of converting components using store and server side rendering into web components?

Few cases -

1. For now let's say I have a very simple main.js which has code like below

`import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; import "./registerServiceWorker";

Vue.config.productionTip = false;

new Vue({ router, store, render: h => h(App) }).$mount("#app"); ` This file contains a Vue root instance.

Case 2 - App grows in size

How would one can go about the conversion process then. For example, there will be base/ui/dumb components like button, input and so forth that will be without the dependency of store and other SSR stuff. That's simple to convert! However, when dealing with components that are connected to global store and/or are pages( i.e. server side or Nuxt.js rendered), how will the conversion go like.

Case 3 - App instance file using router or SSR and store.

If someone can come up with approach towards any of the listed case, please do. We are evaluating the approach and will be great to know the possibilities too for near future if possible to help us move forward with it

[karol-f]

Can you add e.g. store etc inside App.vue? Didn't test it but should work.

[kvedantmahajan]

@karol-f I'm not sure if I get that hint to my broad questions :)

[syzer]

👍