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

```JS // 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); } ```