Migrating to 4.0 from 3.x

    To align with the new Vue 3 initialization process, the installation process of Vuex has changed. To create a new store, users are now encouraged to use the newly introduced createStore function.

    To install Vuex to a Vue instance, pass the store instead of Vuex.

    NOTE

    Vuex 4 removes its global typings for this.$store within a Vue component to solve issue #994. When used with TypeScript, you must declare your own module augmentation.

    Place the following code in your project to allow this.$store to be typed correctly:

    You can learn more in the section.

    • vuex.global(.prod).js
      • For direct use with <script src="..."> in the browser. Exposes the Vuex global.
      • Global build is built as IIFE, and not UMD, and is only meant for direct use with .
    • vuex.esm-browser(.prod).js
      • For use with native ES module imports (including module supporting browsers via <script type="module">.
    • vuex.esm-bundler.js
      • For use with bundlers such as webpack, rollup and parcel.
      • Leaves prod/dev branches with guards (must be replaced by bundler).
      • Does not ship minified builds (to be done together with the rest of the code after bundling).
    • vuex.cjs.js
      • For use in Node.js server-side rendering with require().

    In Vuex 3, createLogger function was exported from vuex/dist/logger but it’s now included in the core package. The function should be imported directly from the vuex package.

    New Features

    Vuex 4 introduces a new API to interact with the store in Composition API. You can use the composition function to retrieve the store within the component setup hook.

    You can learn more in the section.