A simple Vue.js plugin for handling browser cookies reactively

Overview

vue-cookies

A simple Vue.js plugin for handling browser cookies reactively, heavily inspired by vue-cookies This lib overrides the default fetch and XMLHttpRequest implementations to reload cookies after a request is executed, allowing you to use cookies as computed properties or to watch cookies for changes made by a request

Installation

npm install vue-cookies-reactive --save
// require
var Vue = require('vue')
Vue.use(require('vue-cookies-reactive'))

// es2015 module
import Vue from 'vue'
import VueCookies from 'vue-cookies-reactive'
Vue.use(VueCookies)

// set default config
Vue.$cookies.config('7d')

// set global cookie
Vue.$cookies.set('theme','default');
Vue.$cookies.set('hover-time','1s');

Api

syntax format: [this | Vue].$cookies.[method]

config()

Set global config

$cookies.config(expireTimes[,path[, domain[, secure[, sameSite]]])  // default: expireTimes = 1d, path = '/', domain = '', secure = '', sameSite = 'Lax'

set()

Set a cookie

$cookies.set(keyName, value[, expireTimes[, path[, domain[, secure[, sameSite]]]]])   //return this

get()

Get a cookie or all cookies as an object if no key is passed

$cookies.get(keyName)  // return value                             

remove()

Remove a cookie

$cookies.remove(keyName [, path [, domain]])  // return this

isKey()

Check if a cookie is set

$cookies.isKey(keyName)  // return false or true

keys()

Get all keys of cookies

$cookies.keys()  // return an array

refresh()

Refresh all cookies, note that this is already done automatically after each XMLHttpRequest or fetch are executed so it's unlikely you will need it

$cookies.resfresh()  // return this

Example Usage

set global config

// 30 day after, expire
Vue.$cookies.config('30d')

// set secure, only https works
Vue.$cookies.config('7d','','',true)

// 2019-03-13 expire
this.$cookies.config(new Date(2019,03,13).toUTCString())

// 30 day after, expire, '' current path , browser default
this.$cookies.config(60 * 60 * 24 * 30,'');

support json object

var user = { id:1, name:'Journal',session:'25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX' };
this.$cookies.set('user',user);
// print user name
console.log(this.$cookies.get('user').name)

set expire times

Suppose the current time is : Sat, 11 Mar 2017 12:25:57 GMT

Following equivalence: 1 day after, expire

Support chaining sets together

 // default expire time: 1 day
this.$cookies.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX")
        // number + d , ignore case
        .set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX","1d")
        .set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX","1D")
        // Base of second
        .set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX",60 * 60 * 24)
        // input a Date, + 1day
        .set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX", new Date(2017, 03, 12))
        // input a date string, + 1day
        .set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX", "Sat, 13 Mar 2017 12:25:57 GMT")

set expire times, input number type

this.$cookies.set("default_unit_second","input_value",1);            // 1 second after, expire
this.$cookies.set("default_unit_second","input_value",60 + 30);      // 1 minute 30 second after, expire
this.$cookies.set("default_unit_second","input_value",60 * 60 * 12); // 12 hour after, expire
this.$cookies.set("default_unit_second","input_value",60 * 60 * 24 * 30); // 1 month after, expire

set expire times - end of browser session

this.$cookies.set("default_unit_second","input_value",0);          // end of session - use 0 or "0"!

set expire times , input string type

Unit full name
y year
m month
d day
h hour
min minute
s second

Unit Names Ignore Case

not support the combination

not support the double value

this.$cookies.set("token","GH1.1.1689020474.1484362313","60s");  // 60 second after, expire
this.$cookies.set("token","GH1.1.1689020474.1484362313","30MIN");  // 30 minute after, expire, ignore case
this.$cookies.set("token","GH1.1.1689020474.1484362313","24d");  // 24 day after, expire
this.$cookies.set("token","GH1.1.1689020474.1484362313","4m");  // 4 month after, expire
this.$cookies.set("token","GH1.1.1689020474.1484362313","16h");  // 16 hour after, expire
this.$cookies.set("token","GH1.1.1689020474.1484362313","3y");  // 3 year after, expire

// input date string 
this.$cookies.set('token',"GH1.1.1689020474.1484362313", new Date(2017,3,13).toUTCString());
this.$cookies.set("token","GH1.1.1689020474.1484362313", "Sat, 13 Mar 2017 12:25:57 GMT ");

set expire support date

var date = new Date;
date.setDate(date.getDate() + 1);
this.$cookies.set("token","GH1.1.1689020474.1484362313", date);

set never expire

this.$cookies.set("token","GH1.1.1689020474.1484362313", Infinity);  // never expire
// never expire , only -1,Other negative Numbers are invalid
this.$cookies.set("token","GH1.1.1689020474.1484362313", -1); 

remove cookie

this.$cookies.set("token",value); // domain.com and *.doamin.com are readable
this.$cookies.remove("token"); // remove token of domain.com and *.doamin.com 

this.$cookies.set("token", value, null, null, "domain.com"); // only domain.com are readable
this.$cookies.remove("token", null, "domain.com"); // remove token of domain.com 

set other arguments

// set path
this.$cookies.set("use_path_argument","value","1d","/app");  

// set domain
this.$cookies.set("use_path_argument","value",null, null, "domain.com");   // default 1 day after,expire

// set secure
this.$cookies.set("use_path_argument","value",null, null, null,true);

// set sameSite - should be one of `None`, `Strict` or `Lax`. Read more https://web.dev/samesite-cookies-explained/
this.$cookies.set("use_path_argument","value",null, null, null, null, "Lax");

other operation

this.$cookies.remove(cookie)) // vue-cookies global [this | Vue].$cookies.[method] ">
// check a cookie exist
this.$cookies.isKey("token")

// get a cookie
this.$cookies.get("token");

// remove a cookie
this.$cookies.remove("token");

// get all cookie key names, line shows
this.$cookies.keys().join("\n"); 

// remove all cookie
this.$cookies.keys().forEach(cookie => this.$cookies.remove(cookie))

// vue-cookies global
[this | Vue].$cookies.[method] 

Warning

$cookies key names Cannot be set to ['expires','max-age','path','domain','secure','SameSite']

This is a limitation of cookies and not this lib

License

MIT Copyright (c) 2020, Tofandel

You might also like...
A chrome extension for automating your browser by connecting blocks
A chrome extension for automating your browser by connecting blocks

Automa An extension for automating your browser by connecting blocks. From auto-fill forms, doing a repetitive task, taking a screenshot, to scraping

Design and visualize microtonal scales and play them in your web browser

Design and visualize microtonal scales and play them in your web browser. Export your scales for use with VST instruments. Convert Scala files to various tuning formats.

Simple portal vue cli plugin, done by rewriting vue files

vue-cli-plugin-portal Simple portal vue cli plugin, done by rewriting vue files Installation: vue add vue-cli-plugin-portal Or through vue ui, search

A simple Barrage plugin Base on Vue.js.  | 基于Vue.js弹幕插件.
A simple Barrage plugin Base on Vue.js. | 基于Vue.js弹幕插件.

Barrage plugin for Vue.js. Overview • Overview • Demo • Installation • Usage • Plug Options • Roadmap Introduction Baberrage is one of the popular com

Simple Plugin for URL Bar Resizing on mobile devices.
Simple Plugin for URL Bar Resizing on mobile devices.

This Plugin solves the URL Bar Resizing issue with viewport units on mobile devices. Read here. Navigation Navigation Installation Registration Vue.js

Vue Simple Password Meter is a simple password strength meter component written in vanilla js and extremly lightweight

News: Are you using Vue 3? Check out Vue Simple Password Meter v1 vue-simple-password-meter Vue Simple Passwod Meter is a simple password checker writ

A Vue.js plugin to workaround Vue limitation in observing dynamically added properties with v-model directive.

vue-model-autoset A Vue.js plugin to workaround Vue limitation in observing dynamically added properties with v-model directive. Imagine a huge form w

💬 Responsive Vue.js comment system plugin that built with CSS Grid and Firebase REST API + Authentication. https://tugayyaldiz.github.io/vue-comment-grid
💬 Responsive Vue.js comment system plugin that built with CSS Grid and Firebase REST API + Authentication. https://tugayyaldiz.github.io/vue-comment-grid

Vue.js Comment Grid Table of Contents Introduction Installation Downloading Plugin Dependencies Include Plugin Creating Firebase Project Setting Up Si

Vue3 plugin for work with local storage and session storage from Vue context,Inspired by Vue-ls

Vue3 plugin for work with local storage and session storage from Vue context,Inspired by Vue-ls

Owner
Adrien Foulon
Adrien Foulon
👋 Show a banner with text, a decline button, and an accept button on your page. Remembers selection using cookies. Emits an event with current selection and on creation. Good for GDPR requirements.

vue-cookie-accept-decline Show a banner with text, a decline button, and an accept button on your page. Remembers selection using cookies. Emits an ev

Promosis, Inc. 120 Sep 28, 2022
⌨️ A Safari browser extension, use keyboard control browser jumps, scrolling, switching tabs and more. support iPadOS and macOS

⌨️ A Safari browser extension, use keyboard control browser jumps, scrolling, switching tabs and more. support iPadOS and macOS

Haojen 52 Nov 26, 2022
Vue.js library for handling REST service requests and model definitions.

Vue service model Vue.js Library for handling REST service requests with caching, aggregation and model definitions. Features Define models and easily

null 19 Jan 15, 2022
Handling Google sign-in and sign-out for Vue.js applications

vue-google-oauth2 Handling Google sign-in and sign-out for Vue.js applications. This package is updated to support detection of disabled cookies. This

JunGroupProductions 0 Jan 11, 2021
Handling Google sign-in and sign-out for Vue3 applications.

vue3-google-oauth2 Handling Google sign-in and sign-out for Vue3 applications. Please refer to here for Vue2 applications. Front-end Demo Installation

Jeongwoo Ahn 48 Nov 2, 2022
A Vue.js browser-update plugin

x-browser-update A Vue.js browser-update plugin. Example # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev Usa

葡萄干@吐鲁番 25 Jan 19, 2022
Simple and cross-browser friendly fixed header component for Vue.js written by TypeScript.

Vue Fixed Header Simple and cross-browser friendly fixed header component for Vue.js. Install yarn add vue-fixed-header Usage Use in Single File Compo

Takuma HANATANI 166 Nov 14, 2022
Simple Painting/Drawing app for browser in iPad & Apple Pencil.

Mira Mira is a simple Painting/Drawing soft for browser in iPad & Apple Pencil. Live demo is here Features ✅ OK ✳️ Partially ?? Work in progress Tools

toshusai 19 Nov 17, 2022
Vue live real-time avatar from your webcam in the browser.

Vitar Vue live real-time avatar from your webcam in the browser. Get Started Npm $ npm install @cloudgeek/vitar --save Yarn $ yarn add @cloudgeek/vita

Alex Liu 20 Oct 31, 2022
Browser application that recognizes bouldering holds to quickly mark custom routes [Active]

YOLO Bouldering ?? In rock climbing/ bouldering, seasoned climbers tend to make routes for one another with unrelated handholds in the gym. One route

Yar Khine Phyo 33 Nov 21, 2022