DEV Community

Cover image for Using Vue.js to create a Micro Frontend
Anthony Viard 🥑 for Entando

Posted on • Originally published at

Using Vue.js to create a Micro Frontend


This article has been written with the help of the ModSquad Community. The related live session is available here:


Hi, fellow developers!

After learning how to create micro frontends with Angular and React, we’re jumping into another world with Vue.js. Remember, we’re trying to create a micro frontend using the web component specifications for each of the following frameworks: Angular, React, and Vue.js.

Does Vue provide the best developer experience when creating a micro frontend social card? Let’s try it!

Create the Vue.js app

First, ensure that you have installed Node with npm (you can use Yarn instead) and Vue CLI.

npm install -g @vue/cli
Enter fullscreen mode Exit fullscreen mode

Then you can create the application by running the following command in your target folder. I suggest using the default option Default ([Vue 3] babel, eslint).

vue create vue-social-card
Enter fullscreen mode Exit fullscreen mode

That should create a folder named vue-social-card that contains a fresh Vue.js project.

Image description

Please note that by default the application is configured to include certain features, such as npm scripts to start your app and eslint to help you code.

Discover your application

Before making any changes and creating a micro frontend, let’s run the application locally using the command npm run serve. Your application should then be available at the following URL: http://localhost:8080/.

Image description

Create the social card component

Vue.js helps you organize yourcode with components. That means we need to create a file to contain all the card code. You can delete the default file called HelloWorld.vue.

Once you’ve created a new file named SocialCard.vue in the components folder, copy the following code into it:

export default {
  props: {
    card: {
      type: Object,
      required: true

 <div class="card">
  <h2>{{ }}</h2>
     <span>{{ card.description }}</span>
  <img :src="card.image" :alt="card.image_alt"/>

.card {
width: 320px;
height: auto;
min-height: 450px;
background: rgb(60, 62, 68);
border-radius: 20px;
overflow: hidden;
padding: 10px 15px;
margin-bottom: 24px;
margin-right: 10px;
transition: all 0.2s linear;
cursor: pointer;
color: white;
img {
margin-top: 5%;
 max-width: 100%;
 height: auto;
.card:hover {
transform: scale(1.01);
box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2),
 0 1px 15px 0 rgba(0, 0, 0, 0.19);
.card > .title {
margin: 0;
Enter fullscreen mode Exit fullscreen mode

Our component is just a simple piece of HTML/CSS code that requires an entry object named card and defines the following properties: name, description, image and image_alt.

As it is, your application might be broken due to an error in the app.vue file. It’s time to update it.

Update App.vue

The reason your app doesn’t work is that the main component still includes the default component. To fix it, replace the file contents with the following code:

import SocialCard from "@/components/SocialCard";

export default {
  components: {
  data() {
    return {
      shiba_card: {
        id: 1,
        name: 'Shiba Inu',
        description: 'The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.\n' +
            '      A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally\n' +
            '      bred for hunting.',
        image: '',
        image_alt: 'The Shiba Inu image'

  <SocialCard :card=shiba_card></SocialCard>
Enter fullscreen mode Exit fullscreen mode

This imports our social card component, defines a card object shiba_card in the data() function to store the different properties, then passes the card object to the social card component in the template section.

The application is working again and the default Vue landing page is replaced with the Shiba Inu social card.

Image description

However, we only built a classic single page application and need to migrate it to a micro frontend.

Define the custom element

In order to reuse this app as a web component, we need to define a custom element, which is a typical step we discovered when using Angular and React.

Replace the content of the main.js file with the following:

import App from './App.vue'

import { defineCustomElement } from 'vue'

const SocialCardElement = defineCustomElement(App)

customElements.define('social-card-element', SocialCardElement)
Enter fullscreen mode Exit fullscreen mode

This code defines the social-card-element custom element and wraps the Vue app. As we saw before, this app is now rendering the card as expected.

Next, replace <div id="app"></div> in the public/index.html file with the custom element:

   <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 <!-- built files will be auto injected -->
Enter fullscreen mode Exit fullscreen mode

Congratulations! You have just built a Vue.js micro frontend using a custom element.

Please note, as I’m writing this article there is an issue with styling and custom elements that is discussed in detail here: Please follow this ticket to know when it will be fixed or for current workarounds.


The code above is available on GitHub:

Thanks to this repo for the card example:

Are you already using Entando and looking for Vue.js components? Take a look at this sample:

Watch micro frontend videos on our YouTube channel:

Join us on Discord to share and learn about composable apps:

Top comments (0)