Support with Vue3

[MarceloLuis1997]

Are this plugin going go work with Vue3?
I am migrating my Vue2 App to use @vue/composition-api and I would like to know if there is any way to use it inside setup().

It still working because context.root.$session works in Vue2, however context.root will no longer be available in Vue3.

[svenjacobs]

Since I also hit this roadblock when migrating a Vue 2 application to Vue 3, I replaced vue-session with Pinia and pinia-plugin-persistedstate to store my session data and I just works great!

[mathiash98]

There are essentially no reason that this nice utility should be in a vue plugin as it is only a wrapper for localStorage/sessionStorage.

I have created a CustomVueSession like this to continue support for this.$session.get but still enable me to call import { getSession } from "./CustomVueSession.js" and then use getSession() inside my composition api style code:

• I then replace import VueSession from "vue-session" in main.js to import VueSession from "./CustomVueSession.js"
• I did not move all functions to exported functions as I only use get and set

Custom code

// CustomVueSession.js
var STORAGE = window.localStorage;
var VueSession = {
  key: "vue-session-key",
  flash_key: "vue-session-flash-key",
  setAll: function (all) {
    STORAGE.setItem(VueSession.key, JSON.stringify(all));
  },
};

VueSession.install = function (Vue, options) {
  if (options && "persist" in options && options.persist) STORAGE = window.localStorage;
  else STORAGE = window.sessionStorage;
  Vue.prototype.$session = {
    flash: {
      parent: function () {
        return Vue.prototype.$session;
      },
      get: function (key) {
        var all = this.parent().getAll();
        var all_flash = all[VueSession.flash_key] || {};

        var flash_value = all_flash[key];

        this.remove(key);

        return flash_value;
      },
      set: function (key, value) {
        var all = this.parent().getAll();
        var all_flash = all[VueSession.flash_key] || {};

        all_flash[key] = value;
        all[VueSession.flash_key] = all_flash;

        VueSession.setAll(all);
      },
      remove: function (key) {
        var all = this.parent().getAll();
        var all_flash = all[VueSession.flash_key] || {};

        delete all_flash[key];

        all[VueSession.flash_key] = all_flash;
        VueSession.setAll(all);
      },
    },
    getAll: getAllSessions,
    set: setSession,
    get: getSession,
    start: startSession,
    renew: function (sessionId) {
      var all = this.getAll();
      all["session-id"] = "sess:" + sessionId;
      VueSession.setAll(all);
    },
    exists: function () {
      var all = this.getAll();
      return "session-id" in all;
    },
    has: function (key) {
      var all = this.getAll();
      return key in all;
    },
    remove: function (key) {
      var all = this.getAll();
      delete all[key];

      VueSession.setAll(all);
    },
    clear: function () {
      var all = this.getAll();

      VueSession.setAll({ "session-id": all["session-id"] });
    },
    destroy: function () {
      VueSession.setAll({});
    },
    id: function () {
      return this.get("session-id");
    },
  };
};

export default VueSession;

export function startSession() {
  var all = getAllSessions();
  all["session-id"] = "sess:" + Date.now();

  VueSession.setAll(all);
}

export function getAllSessions() {
  var all = JSON.parse(STORAGE.getItem(VueSession.key));
  return all || {};
}

/**
 *
 * @param {string} key
 * @returns
 */
export function getSession(key) {
  var all = getAllSessions();
  return all[key];
}

export function setSession(key, value) {
  if (key == "session-id") return false;
  var all = getAllSessions();

  if (!("session-id" in all)) {
    startSession();
    all = getAllSessions();
  }

  all[key] = value;

  VueSession.setAll(all);
}