State management with vue3 and webpack module federation

[arnauddsj]

Hello,

I'm desparate for help.
I'm creating an app with Vuejs3 and webpack 5 module federation.
My main shell app is made with Vue, it will consume other apps that could be written with react. I need to share State from my Vue shell to other apps.

Instead of using redux i wanted to keep it simple and use vue 3 reactivity that could be imported in react app. Therefore I could use composition API to create a store served from my shell and expose this store to remote apps.

After importing the store to my external app (still vuejs for the test) each application get a different instance of the store and the data I show in both apps are disconnected.

I couldn't find any example that meet my needs.

Here is the store that I expose from the vue shell:

import { reactive, toRefs } from 'vue'

const state = reactive({
  data: {
    quantity: 1,
  },
})

export default function useStoreData() {
  const updateQuantity = (quantity) => {
    state.data.quantity += quantity
  }

  return {
    ...toRefs(state),
    updateQuantity,
  }
}

in my vue shell app

<template>
    <div>
      <button @click="updateQuantity(1)">FOO +1</button>
      <div>Quantity = {{ data.quantity }} </div>
    </div>
</template>

<script setup>
import useStoreData from '../store/storeData'
const { updateQuantity, data } = useStoreData()
</script>

when I click on the button "FOO +1", value gets updated +1.

in my remote app:

<template>
  <div>
    <button @click="updateQuantity(5)">BAR +5</button>
    <div>Quantity = {{ data.quantity }}</div>
  </div>
</template>

<script setup>
import store from 'store/storeData'

const useStoreData = store
const { data, updateQuantity } = useStoreData()
<script>

When i click on button "BAR +5" the value get update +5

BUT the value is not updated in the shell app store, it has different instance and the value is not the same in both app.

What did I miss ?

The vue.config.js from shell

const { ModuleFederationPlugin } = require('webpack').container
const deps = require('./package.json').dependencies

module.exports = {
  publicPath: '/',
  configureWebpack: {
    plugins: [
      new ModuleFederationPlugin({
        name: 'core',
        filename: 'remoteEntry.js',
        remotes: {
          test: 'test@http://localhost:8081/remoteEntry.js'
        },
        exposes: {
          './storeData': './src/store/storeData.js',
        },
        shared: [
          {
            ...deps,
          },
        ],
      }),
    ],
  },
}

the vue.config.js from the remote app

const { ModuleFederationPlugin } = require('webpack').container
const deps = require('./package.json').dependencies

module.exports = {
  publicPath: '/',
  configureWebpack: {
    plugins: [
      new ModuleFederationPlugin({
        name: 'test',
        filename: 'remoteEntry.js',
      remotes: {
        store: "core@http://localhost:8080/remoteEntry.js",
      },
      exposes: {
        "./Test": "./src/Test.vue",
      },
        shared: [
          {
            ...deps,
          },
        ],
      }),
    ],
  },
}

Any help would be much appreciated !

[arnauddsj]

I've been given the solution :
Needed to add the shell app as a remote of itself then import the store in the shell app, same way as i'm doing in my remote app.

[ScriptedAlchemy]

Pr to this repo would be great