Micro implementation of iframe-based micro frontends with Vue 3

Overview

Micro implementation of micro frontends with Vue 3

Note: this is a demo repository created as an appendix to a blog post (make sure to check it out!)

If you want to divide your application into client services or if you already have separate applications which are meant to be displayed together on one page, one of the simplest solutions is to use iframes. This solution is relatively easy to implement and provides good encapsulation of applications (no conflicts in JS, no common dependencies or styles, etc).

It's always a good idea to hide hard parts somewhere in the services and make usage clean and easy to read/understand. The main goal of his PoC is to make embedding the application and communicating with it as easy as using a component.

Example

Host application (usage)

Let's assume that there is a separate application running on path /account and it exposes the form to create an account at /account/create that can be embedded on other pages. You can prefill form with an email by passing prop email. After account is created child app sends the event account-created with some payload of type UserData.

Here is how it may look like from host application perspective (our goal):

<template>
  <MicroFrontend
    frame-src="/account/create"
    :email="email"
    @account-created="onAccountCreated"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { MicroFrontend } from '@/services/micro-frontends'

// ...

const email = ref('[email protected]')
const onAccountCreated = (userData: UserData) => {
  // ...
}
</script>

Short and sweet! Pretty easy to read, isn't it?

Guest application (usage)

So now we need a mechanism to emit an event from a child application. Usage may look like this:

<template>
  <form @submit.prevent="createAccount">
    <!-- ... -->
  </form>
</template>

<script setup lang="ts">
import { useHostApp } from "@/services/micro-frontends";

const { emit, props, hasHostApplication } = useHostApp<{ email: string; }>();

const userData = reactive({ email: props.email }); // automatically typed as { email: string }

// ...

const createAccount = () => {
  // ...
  emit("account-created", userData);
  if (!hasHostApplication.value) {
    router.push("/success");
  }
};
</script>

Note that sometimes we want to have different behavior depending on whether the application was displayed inside the iframe or runs independently - this is why hasHostApplication may also be a useful tool.

Important note!

Keep in mind that this is a PoC. Some parts could be written more comprehensively, but I decided to keep it simple to make it easier to capture the general ideas. To use it in practice you will most likely need to extend it a bit for your specific case.

You might also like...
Free Quasar Admin Template based on Vue.js and used Quasar Framework.
Free Quasar Admin Template based on Vue.js and used Quasar Framework.

Free Quasar Admin Template based on Vue.js and used Quasar Framework.

E-commerce UI Nuggets based on Vue
E-commerce UI Nuggets based on Vue

Library of UI components for e-commerce sites built using VueJs NPM Package 📦 📦 📦 You can now download the ecommerece-ui-nuggets from NPM Installin

A lightweight, ready-to-go front-end solution for admin interfaces based on Vue 3, Vite 2 and ElementPlus.

A lightweight, ready-to-go front-end solution for admin interfaces based on Vue 3, Vite 2 and ElementPlus.

Admin dashboard based on paper dashboard UI template + vue-router
Admin dashboard based on paper dashboard UI template + vue-router

Creative Tim Paper Dashboard made for Vue

soybean admin - a beautiful vue admin template, based on Vue3、Vite、Naive UI、TypeScript.
soybean admin - a beautiful vue admin template, based on Vue3、Vite、Naive UI、TypeScript.

soybean admin - a beautiful vue admin template, based on Vue3、Vite、Naive UI、TypeScript.

An open source and beautiful vue dashboard based on Bootstrap 4
An open source and beautiful vue dashboard based on Bootstrap 4

Vue Argon Dashboard Fully Coded Components Vue Argon Dashboard is built with over 100 individual components, giving you the freedom of choosing and co

Vue.js based administrative interface

What is it? This is the last package you will ever need to build your custom dashboard or administrative panel. It includes: AdminLTE (only styles) Vu

Component library based on Vue and Tailwind

Component library based on Vue and Tailwind Documentation For full documentation, visit Documentation. Libraries The following libraries are being use

This is UI of Wheel-admin and based on RuoYi-Vue which is a opensource project
This is UI of Wheel-admin and based on RuoYi-Vue which is a opensource project

This is UI of Wheel-admin and based on RuoYi-Vue which is a opensource project

Owner
Artur Rosa
I make stuff work
Artur Rosa
Micro front-end Admin based on Qiankun, vue3.x, admin-element-vue, admin-antd-vue project architecture

Micro front-end Admin based on Qiankun, vue3.x, admin-element-vue, admin-antd-vue project architecture

null 19 Nov 8, 2022
🐜 Ant Design Pro's implementation with Vue

?? Ant Design Pro's implementation with Vue

null 3.2k Nov 23, 2022
Ant Design Pro's implementation with Vue. An out-of-box UI solution for enterprise applications as a React boilerplate.

Ant Design Pro's implementation with Vue. An out-of-box UI solution for enterprise applications as a React boilerplate.

AONE 1 Dec 1, 2021
apiAutoTest front-end and back-end separation, visualization version, using FastAPI + Vue2 implementation, on the basis of apiAutoTest to add timing tasks, graphql specification interface testing

apiAutoTest front-end and back-end separation, visualization version, using FastAPI + Vue2 implementation, on the basis of apiAutoTest to add timing tasks, graphql specification interface testing

null 15 Nov 7, 2021
A simple Laravel 8 + Vue 2 + AdminLTE 3 based Curd Starter template for SPA ApplicationA simple Laravel 8 + Vue 2 + AdminLTE 3 based Curd Starter template for SPA Application

Laravel+Vue Crud Starter About Repository A very simple Laravel 8 + Vue 2 + AdminLTE 3 based Curd Starter template for SPA Application. Tech Specifica

Moiz Chauhdry 9 Apr 23, 2022
A dashboard scaffolding based on Vue.js created by Vue CLI.

dashboard A dashboard scaffolding based on Vue.js. Features Type annotation enhancement by JSDoc Access control by route interception Vuex (modules, p

汪磊 542 Nov 17, 2022
✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0, ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...

✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0, ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...

Vben 15.1k Nov 30, 2022
Star Admin Vue Admin Template is a free admin template based on Bootstrap 4 and Vue.js.

Star Admin Vue Admin is a free admin template based on Bootstrap 4 and Vue.js.

BootstrapDash 309 Nov 11, 2022
Vue-CLI Boilerplate based on Nuxt and vue-material-admin template.

Nuxt Material Admin Nuxt.js + vue-material-admin boilerplate. This template is based on Vuetify. Demo This a static version generated by Nuxt.js and h

Mohamed Eddami 391 Nov 22, 2022
Restful Admin Dashboard Based on Vue and Boostrap 4

REST-ADMIN 中文文档 An Powerful Admin Dashboard based on Boostrap-Vue. Demo: http://rest-admin.genyii.com/ admin admin Please support me on https://afdian

Johnny Wu 608 Nov 22, 2022