Module Federation for Vue 3 files

Dog-Detail.vue

<style>
.container {
  width: 800px;
  margin: auto;
  padding: 1rem;
}

.detail {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-column-gap: 1rem;
}
.detail img {
  width: 100%;
}

.carousel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 1rem;
}
.carousel img {
  width: 100%;
}
.carousel h1 {
  text-align: center;
  margin-top: 0;
}
</style>

<template>
<div class="container">
  <div class="detail">
    <img src="https://placedog.net/500/280?id=40" />
    <div>
      <h1>Cindy</h1>
      <p>Cindy is a fabulous dog with a great personality...</p>
    </div>
  </div>

  <hr />

  <h1>More Adoptable Dogs</h1>
  <div class="carousel">
    <div>
      <img src="https://placedog.net/500/280?id=60" />
      <h1>Cutie</h1>
    </div>
    <div>
      <img src="https://placedog.net/500/280?id=61" />
      <h1>Ace</h1>
    </div>
    <div>
      <img src="https://placedog.net/500/280?id=62" />
      <h1>Spot</h1>
    </div>
  </div>
</div>
</template>

Header.vue

<style>
header {
  background: lightblue;
  padding: 1rem;
  font-size: xx-large;
  font-weight: bold;
  text-align: center;
}
</style>

<template>
<header>
  Spot's A Good Dog
</header>
</template>

Home.vue

<style>
.container {
  width: 800px;
  margin: auto;
  padding: 1rem;
}
.carousel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 1rem;
}
.carousel > img {
  width: 100%;
}
</style>

<template>
<div class="container">
  <h1>Great Dogs Deserve Great Homes</h1>
  <p>We are an adoption agency committed to putting wonderful adoptable dogs
  into great permanent homes...</p>

  <h1>Adoptable Dogs</h1>
  <div class="carousel">
    <img src="https://placedog.net/500/280?id=5" />
    <img src="https://placedog.net/500/280?id=6" />
    <img src="https://placedog.net/500/280?id=7" />
  </div>
</div>
</template>