JavaScript has become the mother language of a huge, diverse, and fast-growing programming universe. Once a framework or library gets updated, the community starts working in the side projects that have something related to it — and so it is with Vue.js and its surrounding projects.
Vuex earned a reputation for serving state management in an easy and straightforward way. However, it still follows the path of its famous parent, which means we’ll sometimes see delayed delivery for certain features in environments where the latest version of Vue.js is already in use.
For example, native mobile applications are spread out all the way around. Many JavaScript projects have correspondent libraries, frameworks, etc. to deal with app development.
Same with Vue: NativeScript-Vue is a NativeScript plugin that allows you to use Vue to craft your mobile application. Vuex can also be integrated with NativeScript-Vue for playing with the state machinery for your components, but it lacked a good debugging mechanism.
Version 3.1.1 of Vuex has arrived to attack this issue, among others. Along with support for debugging Vuex in NativeScript applications, the update offers other improvements like the inclusion of the jsDelivr CDN npm package, and fixes like memory leak for module registration. This version has no breaking changes, so you should feel secure in upgrading your projects.
You can read over the changelog for more about each of these, as well as the PRs and contributor commits. Let’s take a closer look.
Vue-remote-devtools (based in Electron) is the official Vue devtools app for NativeScript app development with Vue.js. It is based on Node.js and Chromium and allows you to easily debug your HTML/CSS/JS application (in this case, Vue):
On the other side, vue-devtools, a browser extension for debugging web-based Vue applications, is well known for integrating seamlessly with Vuex — and its state management library — by allowing you to visualize the previous states and switching among them. This is great for what we call time-travel debugging (i.e., you can go back and forth between the states).
However, for NativeScript projects, that wasn’t possible until this version. Now, you can inspect Vuex state with non-browser environments. If you’re not too familiar with Vuex state management, you can read more about it here.
Before the advent of ES modules, developers would commonly import JavaScript code into HTML pages like so:
<script src="https://some-cdn.com/vue.js"></script> <script> new Vue(); </script>
This classic method of importing JS libraries is now known for having downsides. The order of each import had to be correct; if the order is incorrect, scripts below one another wouldn’t find the dependencies. It also exposes objects and functions to the global namespace, so anyone can access and alter them. You can mistakenly import files twice — the list goes on.
Vue itself faced this problem. Until version 2.6, it didn’t have a step in its build process specifically for loading Vue modules in the browser. So, code like this wouldn’t work:
<script type=”module” src=”vue.esm.js”></script>
In the end, as of version 2.6 — and because everybody now uses ES modules in the browser — Vue is bundled with this build step. You can read more about how this works for Vue here.
Vuex, in turn, was facing the same issue, which is fixed within version 3.1.1. If you want to import Vuex directly into your browser, just use:
<script type=”module” src=”vuex.esm.browser.js”></script> // Or below for the min version <script type=”module” src=”vuex.esm.browser.min.js”></script>
Additionally, this version also includes a new minifier, Terser. This is because UglifyJS, the previous minifier, is no longer maintained, and it only supports ECMAScript 5, while Terser supports ES6+.
In practice, it does not change anything for you as a developer. On the other hand, because Terser is a fork of UglifyJS, it keeps support for API and CLI compatibility to uglify-es and uglify-js@3.
JsDelivr is reliably faster than the majority of CDNs. Now, you can also import Vuex from this CDN.
Modules are a great way to divide our store into smaller and more controllable pieces, since the whole state is contained inside one big object in Vuex. In order to add or remove modules in the store, we simply need to call store.registerModule or store.unregisterModule, respectively.
However, controlling how the heap memory of the browser is managed in large applications can be a little tricky. There was a known issue with this that entailed an application adding hundreds of modules and unregistering them right after, which led to the heap memory not being cleared. You can imagine what happens next … memory leak.
The fix consists of simply garbage-collecting the oldVm instance inside the function resetStoreVM, which is responsible for restoring the vm after intense activity.
You can find the whole list of changes here to see for yourself what has been improved in Vuex not only in the latest version, but for the previous one. Or, if you’re looking to learn more about Vuex, consider a deep look at their official Getting Started guide.
The community is the key to success for any open source project — and you’re part of this as well. If you find anything wrong with the latest improvements, please go and report it.
If you haven’t yet upgraded to the latest version, the following command will get you going:
npm install — save — save-exact [email protected] // or via yarn yarn add — exact [email protected]
Good studies!
The Replay is a weekly newsletter for dev and engineering leaders.
Delivered once a week, it's your curated guide to the most important conversations around frontend dev, emerging AI tools, and the state of modern software.
Debugging Vue.js applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Vue mutations and actions for all of your users in production, try LogRocket.
LogRocket lets you replay user sessions, eliminating guesswork by showing exactly what users experienced. It captures console logs, errors, network requests, and pixel-perfect DOM recordings — compatible with all frameworks.
With Galileo AI, you can instantly identify and explain user struggles with automated monitoring of your entire product experience.
Modernize how you debug your Vue apps — start monitoring for free.
Learn how to internationalize Next.js apps with Lingui and next-intl, covering App Router, RSC, routing, locale detection, and dynamic language switching.
Vite vs Webpack in 2025: a senior engineer’s take on performance, developer experience, build control, and when each tool makes sense for React apps.
Learn how Vitest 4 makes migrating from Jest painless, with codemods, faster tests, native ESM, browser testing, and a better DX.
Learn when to use TypeScript types vs. interfaces, with practical guidance on React props, advanced mapped and template literal types, performance tradeoffs, and common pitfalls.
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
