How to use microfrontends with Vue/Nuxt?

by

As of today, Nuxt2 is still using Webpack4 so ModuleFederationPlugin will not be a possible solution.
Nuxt v3 will come with Webpack’s v5 support and you’ll probably be able to try it then. I also heard that the same could be used with Vite btw.

As a general answer, you need to understand that a Microfrontend is not something simple to do. It is more about how you do structure your app in the larger scope.
It’s like having a micro-service on the backend: it can be done is multiple ways and it all depends of the needs of the company/team.

If you do create a Vue2 or Vue3 project with the Vue CLI, you’ll still have Webpack v4. You can probably try to make the upgrade yourself if planning to use ModuleFederationPlugin.

As an alternative, there is single-spa. This is a way of doing it (probably not the only one).
Here is a podcast show talking about the subject in depth: https://devchat.tv/views-on-vue/building-micro-frontends-with-lawrence-almeida-vue-160/
It may be relevant to understand the general way this is working and also the pro/cons.

If you’re not satisfied with this approach, there are a lot of articles on the Web talking about Microfrontends and some Google-fu will be enough to give you an alternative way.

More Related Contents:

  1. Vuex – Do not mutate vuex store state outside mutation handlers
  2. How to use any icons with Nuxt or Vue?
  3. how to make a maximum 1MB upload image?
  4. How can I solve “Interpolation inside attributes has been removed. Use v-bind or the colon shorthand”? Vue.js 2
  5. How to use .env variables in Nuxt 2 or 3?
  6. Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered
  7. How to import and use image in a Vue single file component?
  8. How to implement debounce in Vue2?
  9. How to make a dynamic import in Nuxt?
  10. this.$auth.loggedIn returning false
  11. Which command do I use to generate the build of a Vue app?
  12. What’s the real difference between target: ‘static’ and target: ‘server’ in Nuxt 2.14 universal mode?
  13. How to use any icons with Nuxt3?
  14. How to install jQuery into Nuxt.js?
  15. Nuxt.js vuex store not persisted
  16. VueJS/Typescript – Cannot find module ‘./components/Navigation’ or its corresponding type declarations
  17. Mocking methods on a Vue instance during TDD
  18. How to have list + details pages based on API fetched content
  19. Vue: wait to render until all components are mounted
  20. Is it possible to emit from mounted in Vuejs?
  21. How to efficiently load google fonts in Nuxt
  22. How to setup SASS/SCSS/sass-loader in Nuxt
  23. What is nextTick and what does it do in Vue.js?
  24. Vue 3 Vite – dynamic image src
  25. Vue 3: Is getCurrentInstance() deprecated?
  26. Can we make vue.js application without .vue extension component and webpack?
  27. Uncaught Error: [vue-composition-api] must call Vue.use(plugin) before using any function
  28. Pass an object as param to router.push ([email protected])
  29. Vuejs: Event on route change
  30. Vuex – Computed property “name” was assigned to but it has no setter

Leave a Comment