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.
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>