Quasar Framework: Vite Module Federation

Dec 9, 2023

—

Create two projects called remote-app and host-app:

npm init quasar

Install the plugin in remote-app and host-app:

npm install @originjs/vite-plugin-federation --save-dev
# or
yarn add @originjs/vite-plugin-federation --dev

Create a component in remote-app called HelloWorld.vue:

<template>
  <h1>Hello from QuasarJS</h1>
</template>

Inside remote-app open quasar.config.js:

module.exports = configure(function (/* ctx */) {
  return {
  ...
    build: {
      ...
      vitePlugins: [
        [ '@originjs/vite-plugin-federation', {
          name: 'quasar_vite_remote',
          filename: 'remoteEntry.js',
          exposes: {
            './Hello': './src/components/HelloWorld.vue'
          }
        } ]
      ]
      ...
    }
  ...
  }
}

Inside host-app quasar.config.js:

module.exports = configure(function (/* ctx */) {
  return {
  ...
    build: {
      target: {
        browser: [ 'esnext' ],
        ...
      },
      ...
      vitePlugins: [
        [ '@originjs/vite-plugin-federation', {
          name: 'quasar_vite_host',
          filename: 'remoteEntry.js',
          remotes: {
          	remote: 'http://localhost:9000/dist/spa/assets/remoteEntry.js'
          }
        } ]
      ],
      ...
    }
  ...
  }
}

Inside host-app App.vue:

<template>
  <Hello />
</template>

<script>
import { defineComponent } from 'vue'
import Hello from 'aaa/Hello'

export default defineComponent({
  name: 'App',
  components: {
    Hello
  }
})
</script>

Start the remote-app. This will assign port 9000 to remote-app.

Start the host-app. This will assign port 9001 to host-app.

Quasar Framework: Vite Module Federation

Comments

Leave a Reply Cancel reply