[Micro frontends] NX + Angular Module Federation + Angular MFE + VueJs MFE
Tags: webdev, javascript, tutorial, vue
Published: 2023-02-24 12:42:11

This article is part of a micro frontends series and a continuation of [[Micro frontends] Getting Started](https://dev.to/blminami/getting-started-with-micro-frontends-3g79), where we covered what we want to build, the application architecture, the initial NX workspace, Angular micro frontends and Angular Module Federation.

The aim of this article is to create a VueJs micro frontend and integrate it in the NX workspace.

The starting point is a VueJs application added to our workspace - for the record, NX doesn't support VueJs app generation, so simply generate a web application using webpack and babel compiler and add the vue dependencies (vue/cli, vue-loader, etc.). 

The application is configured on port 4203. By starting the application,  we can see the VueJs application, which uses Webpack and Typescript. 

```bash
npx nx run messages-microapp:serve
```

Source code: https://github.com/blminami/tour-of-heroes-microfrontends/tree/nx-angular-vue-mfe-css/apps/messages-microapp


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99mvm94h8ggf81zxvqj2.png)

---

### How do we setup the messages application as a micro frontend? 


We're going to wrap our application in Web Components. Check out the code below to see how a VueJs component can be wrapped:

```ts
// bootstrap.ts

import { createApp } from 'vue';
import Messages from './app/components/Messages.vue';
import './styles.css';

export class MfeVue extends HTMLElement {
  connectedCallback() {
    createApp(Messages).mount(this);
  }
}

customElements.define('messages-element', MfeVue);
```

In the `main.ts` file, add the following import to bootstrap the application async:

```ts
import('./bootstrap');
```

And finally, configure the `webpack.config.js` file by adding the [ModuleFederationPlugin](https://webpack.js.org/concepts/module-federation/). By doing so, we instruct webpack which files to make available for remote consumption:

```ts
new ModuleFederationPlugin({
      name: 'messages_microapp',
      library: { type: 'var', name: 'messages_microapp' },
      filename: 'remoteEntry.js',
      exposes: {
        './messages-wc': 'apps/messages-microapp/src/bootstrap.ts',
      },
      shared: {
        ...dependencies,
      },
    })
```

Once the setup is done, run the serve command and navigate to `http://localhost:4203/remoteEntry.js`, where the remote module is available and ready to be used.

Let's setup the shell application, which uses Angular framework and Angular Module Federation. There is a plugin available for loading remote web components:  https://www.npmjs.com/package/@angular-architects/module-federation-tools 

```bash
npm i @angular-architects/module-federation-tools
```

For this example, we're going to directly load the messages web component like this:

```html
<mft-wc-wrapper [options]="item"></mft-wc-wrapper>
```

where 

```ts
item: WebComponentWrapperOptions = {
    type: 'script',
    remoteEntry: 'http://localhost:4203/remoteEntry.js',
    exposedModule: './messages-wc',
    remoteName: 'messages_microapp',
    elementName: 'messages-element',
  };
```
- *remoteEntry*: where the remote application is deployed (in our case, localhost, port 4203)
- *exposedModule*: configured in Micro Frontend's webpack configuration
- *remoteName*: configured in Micro Frontend's webpack configuration
- *elementName*: configured in Micro Frontend's bootstrap file
- *WebComponentWrapperOptions* - imported from '@angular-architects/module-federation-tools'

For it to work, add `ModuleFederationToolsModule` to `app.module.ts`.

In case of loading the web component by route, there is an example in the [app-routing.module.ts](https://github.com/blminami/tour-of-heroes-microfrontends/blob/master/apps/tour-of-heroes/src/app/app-routing.module.ts), where navigating to `/messages` will load the remote web component.

Let's run the application and see what we got:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lggob2bp338fhvjf7jh6.png)

> run:all command was updated to start the messages application as well:
```bash
"run:all": "nx run-many --targets=serve  
--maxParallel=4 
--projects=dashboard-microapp,heroes-microapp,messages-microapp,tour-of-heroes"
```


✨It's super easy to plugin a new Micro-Frontend into an existing workspace by using Module Federation and Webpack 5! 

Check out the [Github repo](https://github.com/blminami/tour-of-heroes-microfrontends/tree/nx-angular-vue-mfe-css) for the entire configuration! 

Until next time, thank you for reading! 🐾