💾🔗🖥️ Share, synchronize and persist state between multiple tabs with this plugin for Vuex. TypeScript types included.

Last update: Aug 12, 2022

vuex-multi-tab-state

Build Status npm codecov codebeat badge npm npm bundle size npm type definitions code style: prettier demo

This Vuex plugin allows you to sync and share the status of your Vue application across multiple tabs or windows using the local storage.

This repository has a gitter chat where you can ask questions and propose new features:

Gitter

Installation

vuex-multi-tab-state is available in npm and can be installed with the following command:

npm i vuex-multi-tab-state

Usage

Just import vuex-multi-tab-state and add it in the plugins list of your Vuex Store object.

import Vue from 'vue';
import Vuex from 'vuex';
import createMultiTabState from 'vuex-multi-tab-state';

Vue.use(Vuex);

export default new Vuex.Store({
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... },
  plugins: [
    createMultiTabState(),
  ],
});

You can check the example provided here

NuxtJS

Integrating the plugin in NuxtJS requires a little more effort than in Vue. First of all, we have to create a file inside the plugins directory.

// ~/plugins/multiTabState.client.js
import createMultiTabState from 'vuex-multi-tab-state';

export default ({ store }) => {
  createMultiTabState()(store);
};

Note that the filename must have the following format *.client.js. The next step is to add this plugin to NuxtJS in nuxt.config.js:

// nuxt.config.js
export default {
  ...
  plugins: [{ src: '~/plugins/multiTabState.client.js' }],
  ...
}

If you didn't name the file according to the specified format, you can add the plugin this way:

// nuxt.config.js
export default {
  ...
  plugins: [{ src: '~/plugins/multiTabState.client.js', mode: 'client' }],
  ...
}

Both ways tell NuxtJS that the plugin should only be run client-side (because the plugin uses window, not available server-side).

API

createMultiTabState({options})

Creates a new instance of the plugin with the given options. The possible options are as follows:

  • statesPaths Array<String>: contains the name of the states to be synchronized with dot notation. If the param is not provided, the whole state of your app will be sync. Defaults to [].

    Example: Only the oranges will be synchronized.

    export default new Vuex.Store({
      state: {
        fruits: {
          oranges: 0,
          apples: 0,
        },
      },
      plugins: [createMultiTabState({
        statesPaths: ['fruits.oranges'],
      })],
    });
  • key <String>: key of the local storage in which the state will be stored. Defaults to 'vuex-multi-tab'.

Test

The tests have been written with mocha and chai.

npm install
npm run test

Collaborate

npm collaborators

If you feel that something can be improved, go on, create a pull request! Please follow the programming style and document your changes correctly.

License

NPM

This project is under the MIT license. More information here.

GitHub

https://github.com/gabrielmbmb/vuex-multi-tab-state
Comments
  • 1. Error: do not mutate vuex store state outside mutation handlers

    Hi!

    I'm trying to add vuex-multi-tab-state to an existing project and stuck with an error:

    Error: do not mutate vuex store state outside mutation handlers
    

    It's hard to provide a minimal example, but I found a possible cause.

    Here it is: https://github.com/gabrielmbmb/vuex-multi-tab-state/blob/0a46afc8f636744493ff0dc95bafd49780f3a49f/src/index.ts#L56

    If change to

    return mergeWith({}, oldState, newState, mergeCustomizer);
    

    (create a new one object instead of change original)

    the error doesn't happen.

    Reviewed by andrey-hohlov at 2020-04-13 06:11
  • 2. Support store structure changing

    For example, we have a user vuex-module with this state:

    {
      token: '',
      name: '',
    }
    

    The state is saved in local storage.

    createMultiTabState({ statesPaths: ['user']  })
    
    { "token": "tokenstring", "name": "Jonn Smith" }
    

    But some reasons we change state object to:

    {
      name: '',
      auth: {
        token: ''
      },
    }
    

    And now want to keep in storage only user.auth path.

    createMultiTabState({ statesPaths: ['use.auth']  })
    

    Reload page - and it removes the state auth key! The app is broken.

    client.js?06a0:97 TypeError: Cannot read property 'token' of undefined
    

    This error happens in the getter:

    {
      isAuthenticated(state) {
        return !!state.auth.token;
      },
    }
    

    And yes, I can fix it:

    {
      isAuthenticated(state) {
        return !!state.auth && !!state.auth.token;
      },
    }
    

    But maybe It will be better if vuex-multi-tab-state will respect the default state and do not override it if the path does not exist in the local storage. And do not create top-level state properties if they were removed from the default state. What do you think?

    Reviewed by andrey-hohlov at 2021-02-05 03:50
  • 3. Vue 3 / Vuex 4 support?

    Hi, I've been using this plugin in Vue 2 and tried using it with Vue 3 and Vuex 4 now.

    When more than 1 tab are open, CPU usage increases dramatically and the browser gets crippled and unresponsive.

    So, now the question is: should Vue 3 with Vuex 4 be supported already, or is this plugin simply not there yet (if so, do you plan on updating it)?

    Reviewed by ttntm at 2020-10-14 12:26
  • 4. Unable to clear localStorage key programmatically

    It would be nice to be able to programmatically clear localStorage sometimes, i.e. when logging out a user or when updating the application in terms of state-related features that would (and do now...) cause errors due to old state (at least until dev tools' 'Clear application storage').

    So far, I've had no luck using localStorage.removeItem(key) - nothing happens, even though the code is valid. I'm currently assuming that the event listener attached to storage events is interfering here: https://github.com/gabrielmbmb/vuex-multi-tab-state/blob/e325971626b335afd2481ca01a186781bc927f5d/src/tab.ts#L52

    If that's indeed what's happening, it seems like a less desirable side effect - I believe it's not intentional, or is it?

    Reviewed by ttntm at 2020-11-06 08:28
  • 5. How to set settings in nuxt

    Hi, I'm currently working in a Nuxt project and I want your plugin to just store the login data, I've tried the follogin with not success:

    // plugins/multiTabState.client.js
    
    import createMultiTabState from 'vuex-multi-tab-state';
    
    export default ({ store }) => {
      createMultiTabState({
          statesPaths: [
            'userLogged',
            'userDetails',
          ]
      })(store);
    };
    

    Without setting it works as expected, storing all my state variables, but setting some paths it just stop working, my store is the following:

    // store/session.js
    export const state = () => ({
       userLogged: false,
       userDetails: {},
       // A lot of variables
    })
    

    I'm using the multiple state variables to logout on all browser tabs when session expires, but I want the other data to keep locally instead of globally.

    I hope you can help me.

    Reviewed by jonalxh at 2021-01-13 18:03
  • 6. Add compression possibility to save localStorage space

    At the moment much space is lost because the object keys are often repeated. Maybe you can index all at the beginning and substitute it with numbers later. Or another solution. 5MB limit are too few :-(

    Thanks for this awesome piece of code!

    Reviewed by j5k at 2021-02-05 23:15
  • 7. How to use with nuxt?

    Hi. I've tried to set it using Nuxt but it does not work, I've declared it as a plugin in mystore.jsand it does nothing, I've setted it in my nuxt.config.js in modules block but result is the same.

    I think it is the better vuex persistance plugin, please help me adding it. Thanks.

    Reviewed by jonalxh at 2020-06-02 13:58
  • 8. Incompatibility with nuxt-vuex-localstorage

    First of, this is an awesome plugin and works like charm on it's own! I'm using it for a social login in a seperate tab and sync it to the previous tab which is working as expected.

    My problem : When using it with https://github.com/rubystarashe/nuxt-vuex-localstorage this plugin, that syncs localstorage to vuex and will update if the version is changed, your plugin will always overwrite all changes, so I'm not able to update the content that I'm storing in the vuex file, if it's not stored already.

    My workaround atm : Checking if there's a difference in the content and if, clear everything and reset it. Using the other plugin on it's own, it would just be changing the version number.

    Reviewed by DooDesch at 2020-09-10 08:54
  • 9. Is GPL license intended?

    This looks exactly like what I need, but I was shocked to notice the license is GPL. This is much more restrictive than the MIT license used by vuex-persistedstate, vuex, or vue. It means there's no way in the world I can use this and I would have to implement something similar on my own, and I'm sure many others would be in the same boat.

    So I'm wondering if this was an intentional choice. If so, you can close this issue and have a nice day. Otherwise, I would muchly appreciate changing the license to MIT (or similar) to match vuex-persistedstate.

    Reviewed by jaredthirsk at 2020-02-28 00:03
  • 10. Two vue projects sharing the same state and missing states

    I made two vue projects. Project A needs this plugin's feature so I made project B to test this plugin. When project B proved to be working, I implemented the plugin on project A. But then I had an error when I tried to login in project A. It says that a state in project A is undefined and I tried to check by console logging the whole state of project A. What I found when console logging it was that the state from project B was in the state of project A even though project B was not running in my localhost. Also, there was a missing state from project A, the state that was missing looked like this :

      profile: {
        id: null,
        name: null,
        role: null,
        email: null,
        photoUrl: null,
        ownPatients: null,
        pastPatients: null,
      }
    

    Does anyone know how to fix this or how to atleast get rid of Project B's data? Thanks.

    Reviewed by scarstreet at 2022-02-27 09:13
  • 11. Feat #30 add params onBeforeReplace and onBeforeSave

    Problem

    is already discussed in #30 - if the store structure changes, an old structure might be pulled into the store, causing new functionality to break.

    Solution: new parameters onBeforeReplace and onBeforeSave

    Allowing to "hook" into the process via parameters onBeforeReplace and onBeforeSave, functions which both get the current state as parameter, allows the developer to make adjustments before the state is altered.

    Functionality

    onBeforeReplace(state): state|falsy

    Is triggered with the restored-from-localstorage state. If a falsy value is returned, the store.replaceState will not be executed.

    This allows e.g. to validate a state before it is pushed into the store. Another usecase would be removing of some parts of the store state.

    onBeforeSave(state): state|falsy

    Is triggered after filtering and before state is saved to local storage. If a falsyvalue is returned, the localStorage.setItem will not be executed.

    This allows e.g. to add additional information to the state, e.g. a time flag state.__time = Date.now(), which in return can be validated (and filtered out again) in onBeforeReplace

    Reviewed by abernh at 2021-10-18 22:40
  • 12. Bump terser from 4.8.0 to 4.8.1

    Bumps terser from 4.8.0 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-07-21 10:07
  • 13. Bump terser from 4.7.0 to 4.8.1 in /examples/nuxt

    Bumps terser from 4.7.0 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)

    v4.8.0

    • Support for numeric separators (million = 1_000_000) was added.
    • Assigning properties to a class is now assumed to be pure.
    • Fixed bug where yield wasn't considered a valid property key in generators.
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-07-21 02:39
  • 14. Bump terser from 4.6.3 to 4.8.1 in /examples/basic

    Bumps terser from 4.6.3 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)

    v4.8.0

    • Support for numeric separators (million = 1_000_000) was added.
    • Assigning properties to a class is now assumed to be pure.
    • Fixed bug where yield wasn't considered a valid property key in generators.

    v4.7.0

    • A bug was fixed where an arrow function would have the wrong size
    • arguments object is now considered safe to retrieve properties from (useful for length, or 0) even when pure_getters is not set.
    • Fixed erroneous const declarations without value (which is invalid) in some corner cases when using collapse_vars.

    v4.6.13

    • Fixed issue where ES5 object properties were being turned into ES6 object properties due to more lax unicode rules.
    • Fixed parsing of BigInt with lowercase e in them.

    v4.6.12

    • Fixed subtree comparison code, making it see that [1,[2, 3]] is different from [1, 2, [3]]
    • Printing of unicode identifiers has been improved

    v4.6.11

    • Read unused classes' properties and method keys, to figure out if they use other variables.
    • Prevent inlining into block scopes when there are name collisions
    • Functions are no longer inlined into parameter defaults, because they live in their own special scope.
    • When inlining identity functions, take into account the fact they may be used to drop this in function calls.
    • Nullish coalescing operator (x ?? y), plus basic optimization for it.
    • Template literals in binary expressions such as + have been further optimized

    v4.6.10

    • Do not use reduce_vars when classes are present

    v4.6.9

    • Check if block scopes actually exist in blocks

    v4.6.8

    • Take into account "executed bits" of classes like static properties or computed keys, when checking if a class evaluation might throw or have side effects.

    v4.6.7

    • Some new performance gains through a AST_Node.size() method which measures a node's source code length without printing it to a string first.

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-07-20 21:25
  • 15. Bump thenify from 3.3.0 to 3.3.1 in /examples/basic

    Bumps thenify from 3.3.0 to 3.3.1.

    Changelog

    Sourced from thenify's changelog.

    3.3.1 / 2020-06-18

    fixes

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-07-18 20:47
  • 16. Bump jsdom from 16.1.0 to 16.5.0

    Bumps jsdom from 16.1.0 to 16.5.0.

    Release notes

    Sourced from jsdom's releases.

    Version 16.5.0

    • Added window.queueMicrotask().
    • Added window.event.
    • Added inputEvent.inputType. (diegohaz)
    • Removed ondragexit from Window and friends, per a spec update.
    • Fixed the URL of about:blank iframes. Previously it was getting set to the parent's URL. (SimonMueller)
    • Fixed the loading of subresources from the filesystem when they had non-ASCII filenames.
    • Fixed the hidden="" attribute to cause display: none per the user-agent stylesheet. (ph-fritsche)
    • Fixed the new File() constructor to no longer convert / to :, per a pending spec update.
    • Fixed mutation observer callbacks to be called with the MutationObserver instance as their this value.
    • Fixed <input type=checkbox> and <input type=radio> to be mutable even when disabled, per a spec update.
    • Fixed XMLHttpRequest to not fire a redundant final progress event if a progress event was previously fired with the same loaded value. This would usually occur with small files.
    • Fixed XMLHttpRequest to expose the Content-Length header on cross-origin responses.
    • Fixed xhr.response to return null for failures that occur during the middle of the download.
    • Fixed edge cases around passing callback functions or event handlers. (ExE-Boss)
    • Fixed edge cases around the properties of proxy-like objects such as localStorage or dataset. (ExE-Boss)
    • Fixed a potential memory leak with custom elements (although we could not figure out how to trigger it). (soncodi)

    Version 16.4.0

    • Added a not-implemented warning if you try to use the second pseudo-element argument to getComputedStyle(), unless you pass a ::part or ::slotted pseudo-element, in which case we throw an error per the spec. (ExE-Boss)
    • Improved the performance of repeated access to el.tagName, which also indirectly improves performance of selector matching and style computation. (eps1lon)
    • Fixed form.elements to respect the form="" attribute, so that it can contain non-descendant form controls. (ccwebdesign)
    • Fixed el.focus() to do nothing on disconnected elements. (eps1lon)
    • Fixed el.focus() to work on SVG elements. (zjffun)
    • Fixed removing the currently-focused element to move focus to the <body> element. (eps1lon)
    • Fixed imgEl.complete to return true for <img> elements with empty or unset src="" attributes. (strager)
    • Fixed imgEl.complete to return true if an error occurs loading the <img>, when canvas is enabled. (strager)
    • Fixed imgEl.complete to return false if the <img> element's src="" attribute is reset. (strager)
    • Fixed the valueMissing validation check for <input type="radio">. (zjffun)
    • Fixed translate="" and draggable="" attribute processing to use ASCII case-insensitivity, instead of Unicode case-insensitivity. (zjffun)

    Version 16.3.0

    • Added firing of focusin and focusout when using el.focus() and el.blur(). (trueadm)
    • Fixed elements with the contenteditable="" attribute to be considered as focusable. (jamieliu386)
    • Fixed window.NodeFilter to be per-Window, instead of shared across all Windows. (ExE-Boss)
    • Fixed edge-case behavior involving use of objects with handleEvent properties as event listeners. (ExE-Boss)
    • Fixed a second failing image load sometimes firing a load event instead of an error event, when the canvas package is installed. (strager)
    • Fixed drawing an empty canvas into another canvas. (zjffun)

    Version 16.2.2

    • Updated StyleSheetList for better spec compliance; notably it no longer inherits from Array.prototype. (ExE-Boss)
    • Fixed requestAnimationFrame() from preventing process exit. This likely regressed in v16.1.0.
    • Fixed setTimeout() to no longer leak the closures passed in to it. This likely regressed in v16.1.0. (AviVahl)
    • Fixed infinite recursion that could occur when calling click() on a <label> element, or one of its descendants.
    • Fixed getComputedStyle() to consider inline style="" attributes. (eps1lon)
    • Fixed several issues with <input type="number">'s stepUp() and stepDown() functions to be properly decimal-based, instead of floating point-based.
    • Fixed various issues where updating selectEl.value would not invalidate properties such as selectEl.selectedOptions. (ExE-Boss)
    • Fixed <input>'s src property, and <ins>/<del>'s cite property, to properly reflect as URLs.
    • Fixed window.addEventLister, window.removeEventListener, and window.dispatchEvent to properly be inherited from EventTarget, instead of being distinct functions. (ExE-Boss)
    • Fixed errors that would occur if attempting to use a DOM object, such as a custom element, as an argument to addEventListener.

    ... (truncated)

    Changelog

    Sourced from jsdom's changelog.

    16.5.0

    • Added window.queueMicrotask().
    • Added window.event.
    • Added inputEvent.inputType. (diegohaz)
    • Removed ondragexit from Window and friends, per a spec update.
    • Fixed the URL of about:blank iframes. Previously it was getting set to the parent's URL. (SimonMueller)
    • Fixed the loading of subresources from the filesystem when they had non-ASCII filenames.
    • Fixed the hidden="" attribute to cause display: none per the user-agent stylesheet. (ph-fritsche)
    • Fixed the new File() constructor to no longer convert / to :, per a pending spec update.
    • Fixed mutation observer callbacks to be called with the MutationObserver instance as their this value.
    • Fixed <input type=checkbox> and <input type=radio> to be mutable even when disabled, per a spec update.
    • Fixed XMLHttpRequest to not fire a redundant final progress event if a progress event was previously fired with the same loaded value. This would usually occur with small files.
    • Fixed XMLHttpRequest to expose the Content-Length header on cross-origin responses.
    • Fixed xhr.response to return null for failures that occur during the middle of the download.
    • Fixed edge cases around passing callback functions or event handlers. (ExE-Boss)
    • Fixed edge cases around the properties of proxy-like objects such as localStorage or dataset. (ExE-Boss)
    • Fixed a potential memory leak with custom elements (although we could not figure out how to trigger it). (soncodi)

    16.4.0

    • Added a not-implemented warning if you try to use the second pseudo-element argument to getComputedStyle(), unless you pass a ::part or ::slotted pseudo-element, in which case we throw an error per the spec. (ExE-Boss)
    • Improved the performance of repeated access to el.tagName, which also indirectly improves performance of selector matching and style computation. (eps1lon)
    • Fixed form.elements to respect the form="" attribute, so that it can contain non-descendant form controls. (ccwebdesign)
    • Fixed el.focus() to do nothing on disconnected elements. (eps1lon)
    • Fixed el.focus() to work on SVG elements. (zjffun)
    • Fixed removing the currently-focused element to move focus to the <body> element. (eps1lon)
    • Fixed imgEl.complete to return true for <img> elements with empty or unset src="" attributes. (strager)
    • Fixed imgEl.complete to return true if an error occurs loading the <img>, when canvas is enabled. (strager)
    • Fixed imgEl.complete to return false if the <img> element's src="" attribute is reset. (strager)
    • Fixed the valueMissing validation check for <input type="radio">. (zjffun)
    • Fixed translate="" and draggable="" attribute processing to use ASCII case-insensitivity, instead of Unicode case-insensitivity. (zjffun)

    16.3.0

    • Added firing of focusin and focusout when using el.focus() and el.blur(). (trueadm)
    • Fixed elements with the contenteditable="" attribute to be considered as focusable. (jamieliu386)
    • Fixed window.NodeFilter to be per-Window, instead of shared across all Windows. (ExE-Boss)
    • Fixed edge-case behavior involving use of objects with handleEvent properties as event listeners. (ExE-Boss)
    • Fixed a second failing image load sometimes firing a load event instead of an error event, when the canvas package is installed. (strager)
    • Fixed drawing an empty canvas into another canvas. (zjffun)

    16.2.2

    • Updated StyleSheetList for better spec compliance; notably it no longer inherits from Array.prototype. (ExE-Boss)
    • Fixed requestAnimationFrame() from preventing process exit. This likely regressed in v16.1.0.
    • Fixed setTimeout() to no longer leak the closures passed in to it. This likely regressed in v16.1.0. (AviVahl)
    • Fixed infinite recursion that could occur when calling click() on a <label> element, or one of its descendants.
    • Fixed getComputedStyle() to consider inline style="" attributes. (eps1lon)
    • Fixed several issues with <input type="number">'s stepUp() and stepDown() functions to be properly decimal-based, instead of floating point-based.

    ... (truncated)

    Commits
    • 2d82763 Version 16.5.0
    • 9741311 Fix loading of subresources with Unicode filenames
    • 5e46553 Use domenic's ESLint config as the base
    • 19b35da Fix the URL of about:blank iframes
    • 017568e Support inputType on InputEvent
    • 29f4fdf Upgrade dependencies
    • e2f7639 Refactor create‑event‑accessor.js to remove code duplication
    • ff69a75 Convert JSDOM to use callback functions
    • 19df6bc Update links in contributing guidelines
    • 1e34ff5 Test triage
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-06-23 13:34
  • 17. Bump shell-quote from 1.7.2 to 1.7.3 in /examples/nuxt

    Bumps shell-quote from 1.7.2 to 1.7.3.

    Changelog

    Sourced from shell-quote's changelog.

    1.7.3

    • Fix a security issue where the regex for windows drive letters allowed some shell meta-characters to escape the quoting rules. (CVE-2021-42740)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-06-23 03:36
Vuex state persistance and synchronization between tabs/windows.

vuex-basement Vuex state persistance and synchronization between tabs/windows. Tested to work with Vue2. One Shortcomming (please read before use). Th

Jun 29, 2022
Vue3-dynamic-tabs - A Vue component to easily render tabs dynamically

A Vue component to easily render tabs dynamically The package contains a Vue 3 c

Apr 1, 2022
A Lightweight and flexible underlined tabs component for VueJS ⚡

Vue-Tabz A Lightweight and flexible underlined tabs component for VueJS ⚡ Demo Live Demo Installing npm install --save vue-tabz Installation & Usage i

May 21, 2022
Lightweight and flexible tabs component for the web.

Tabs Lightweight and flexible tabs component for the web. Packages Package Version tabs vue-tabs vue-tabs-example Vue.js example react-tabs react-tabs

Jul 13, 2022
Simplified bootstrap tabs

Vue-tabs Simplified, customizable bootstrap based tabs Vue-tabs is a tab component which simplifies the usage of tabs and their customization Demos Ba

Aug 8, 2022
An easy way to display tabs with Vue

?? THIS PACKAGE HAS BEEN ABANDONED ?? We don't use this package anymore in our own projects and cannot justify the time needed to maintain it anymore.

Aug 9, 2022
Simple Vue 2 component, that allows you to make tabs with moving bottom line

Vue-tabs-with-active-line Simple Vue 2 component, that allows you to make tabs with moving bottom line Demo and example Live demo to play with: Demo-l

May 2, 2022
A flexible tabs-component for Vue

vue-magic-line A tabs-component for Vue. Demo You can find some examples here Configuration Install component Globally import VueMagicLine from 'vue-m

Mar 18, 2022
Vue.js tabs component based in material design

Vue.js tabs component based in material design

Mar 31, 2022
A tabs field for the panel, to use with $field->when() conditions.
A tabs field for the panel, to use with $field->when() conditions.

Kirby TabsField plugin A tabs field for the panel, to use with $field->when() conditions. Features: Remembers the last open tab. The field value is ne

Mar 7, 2022
A custom Vue tabs component.

cocoda-vue-tabscocoda-vue-tabs A custom Vue tabs component. Note: This is in early development and things might change drastically in the future. Also

Oct 12, 2021
Event-Based communication across opened tabs for Vue 2.x
Event-Based communication across opened tabs for Vue 2.x

vue-tabevents Easy communication between tabs for Vue 2.x Getting Started Installing Install with npm: npm install --save vue-tabevents import into pr

Jul 2, 2022
A component to use Vue.js with Jupyter Lumino (PhosphorJS), integrating DOM & VDOM through event listeners and Vue reactivity system.
A component to use Vue.js with Jupyter Lumino (PhosphorJS), integrating DOM & VDOM through event listeners and Vue reactivity system.

vue-lumino An example project showing one way to integrate Vue.js and Lumino (née PhosphorJS). Lumino “is a library for building interactive web appli

Jul 1, 2022
Navigation Tab with both plain VUE and VUE + Redux .

Navigation Tab with both plain VUE and VUE + Redux . Featured in Awesome-Vue

Nov 26, 2021
💾🔗🖥️ Share, synchronize and persist state between multiple tabs with this plugin for Vuex. TypeScript types included.
💾🔗🖥️ Share, synchronize and persist state between multiple tabs  with this plugin for Vuex. TypeScript types included.

vuex-multi-tab-state This Vuex plugin allows you to sync and share the status of your Vue application across multiple tabs or windows using the local

Aug 12, 2022
💾 Persist and rehydrate your Vuex state between page reloads.
💾 Persist and rehydrate your Vuex state between page reloads.

vuex-persistedstate Persist and rehydrate your Vuex state between page reloads. Install npm install --save vuex-persistedstate The UMD build is also a

Aug 8, 2022
💾 Persist and rehydrate your Vuex state between page reloads.
💾 Persist and rehydrate your Vuex state between page reloads.

vuex-persistedstate Persist and rehydrate your Vuex state between page reloads. Install npm install --save vuex-persistedstate The UMD build is also a

Aug 10, 2022
Share vuex mutations between tabs/windows

vuex-shared-mutations Share certain Vuex mutations across multiple tabs/windows. Basic example Nuxt example Installation $ npm install vuex-shared-mut

Aug 3, 2022
Share vuex mutations between tabs/windows

vuex-shared-mutations Share certain Vuex mutations across multiple tabs/windows. Basic example Nuxt example Installation $ npm install vuex-shared-mut

Aug 12, 2022
Vuex state persistance and synchronization between tabs/windows.

vuex-basement Vuex state persistance and synchronization between tabs/windows. Tested to work with Vue2. One Shortcomming (please read before use). Th

Jun 29, 2022