Multiple webpack bundles, one vuex store

Question

I have vue project which has multiple webpack bundles. However one page could have multiple bundles present with multiple components hence in order for them to share the same store - we need a single state.

webpack.mix.js

mix.js(['src/searchFilters.js'], 'dist/search-filter-components.js').vue({
    version: 2,
    options: {
        shadowMode: true,
        dontLeakScopedModules: false
    }
});

mix.js('src/provider.js', 'dist/provider-components.js').vue({
    version: 2,
    options: {
        shadowMode: true,
        dontLeakScopedModules: false
    }
});

I have seen many questions were asked reguarding that, But still couldn't find a solution.

However those solutions seems to work only for the first component that imports the store. For the next component from a different bundle that imports the store - the computed properties do not recompute! Just wondering if anyone has come across this or has solution to sharing a vuex store between different webpack bundles. Thanks in advance.

Answer 1

Ok. I found a solution. I may not be a perfect But it solved my problem.

I used laravel-mix webpack mix.extract to extract vue and vuex.

mix.extract([
    'vue', 'vuex',
]);

mix.js('src/main.js', 'dist/web-components.js').vue({
    version: 2,
    options: {
        shadowMode: true,
        dontLeakScopedModules: false
    }
});

and it generates two scripts and added those scripts to my non vue website.

<script defer="" src="http://ox_byondmarket/search-filter-components.js"></script>
<script type="text/javascript" src="http://ox_byondmarket/manifest.js"></script>
<script type="text/javascript" src="http://ox_byondmarket/vendor.js"></script>
<search-filters page="search"></search-filters>