title: Vue.JS for a Micro Frontend approach
body: <p>Our team is developing a large project and we want to build a big app with multiple forms and dashboards and features. One monolithic SPA would get complicated. So we discuss the approach of „micro frontend“ architecture. The goal is to generate a parent SPA which contains several child SPAs. All SPAs should use the same framework: vueJS.</p>
  <h3>Idea behind: <a href="https://micro-frontends.org/" rel="noreferrer">Micro Frontend</a>s</h3>
  <ul>
  <li>a web app is a composition of features which are owned of independent teams</li>
  <li>a team has a distinct area of business</li>
  <li>the team is cross-functional and develops the features end-to-end from database to user-interface</li>
  <li>it's like self-contained systems</li>
  </ul>
  <p>We found some implementations supporting this:</p>
  <ol>
  <li><a href="https://micro-frontends.org/" rel="noreferrer">Micro Frontends</a></li>
  <li><a href="https://github.com/CanopyTax/single-spa" rel="noreferrer">Single-SPA</a> of CanopyTax</li>
  </ol>
  <p>We want to use <em>VueJS</em> in our frontend (vue, vue-router, vue-resource, vue-loade, webpack)</p>
  <h3>Questions</h3>
  <ol>
  <li>Is a <strong>composite UI</strong> (i.e. Micro Frontend) feasible with <em>VueJS</em> (standard Vue-tools), are there example projects?</li>
  <li>We have more than one page, so we need a solution to navigate from one side to another. How can we realize <strong>page transitions</strong>?</li>
  <li>Is it possible to established an <strong>Event-Bus</strong> between the VueJS components?</li>
  <li>How can we implement a <strong>bidirectional communication</strong> between the components (parent-child, child-parent)?</li>
  </ol>