Skip to content

A vue 3 plugin for handling browser cookies with typescript support. Load and save cookies within your Vue 3 application

License

Notifications You must be signed in to change notification settings

anish2690/vue-cookie-next

Repository files navigation

vue-cookie-next

A simple Vue 3 plugin for handling browser cookies with typescript support

Installation

Browser

<html lang="en"> <head> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"></div> </body> <script type="module"> import { VueCookieNext } from 'https://unpkg.com/vue-cookie-next@1.0.0/dist/vue-cookie-next.esm-bundler.js' const CookieTest = { mounted() { this.$cookie.setCookie('username', 'user1') console.log(this.$cookie.getCookie('username')) }, } Vue.createApp(CookieTest).use(VueCookieNext).mount('#app') </script> </html>

Package Managers

npm install vue-cookie-next //or yarn add vue-cookie-next 
import { createApp } from 'vue' import { VueCookieNext } from 'vue-cookie-next' import App from 'App.vue' const app = createApp(App) app.use(VueCookieNext) app.mount('#app') // set default config VueCookieNext.config({ expire: '7d' }) // set global cookie VueCookieNext.setCookie('theme', 'default') VueCookieNext.setCookie('hover-time', { expire: '1s' })

Composition API

import { defineComponent } from 'vue' import { useCookie } from 'vue-cookie-next' defineComponent({ setup() { const { setCookie, removeCookie } = useCookie() setCookie('theme', 'dark') removeCookie('hover-time') }, })

API Options

syntax format: [this | VueCookieNext].$cookie.[method]

  • Set global config
VueCookieNext.config({ expire: '1d', path: '/', domain: '', secure: '', sameSite: '', }) // default: expireTimes = 1d, path = '/', domain = '', secure = '', sameSite = 'Lax'
  • Set a cookie
this.$cookie.setCookie(keyName, value, { expire: '1d', path: '/', domain: '', secure: '', sameSite: '', }) //return this
  • Get a cookie
this.$cookie.getCookie(keyName) // return value
  • Remove a cookie
this.$cookie.removeCookie(keyName, { path: '/', domain: '', }) // return this | false if key not found
  • Exist a cookie name
this.$cookie.isCookieAvailable(keyName) // return false or true
  • Get All cookie name
this.$cookie.keys() // return a array string

Example Usage

set global config

import { VueCookieNext } from 'vue-cookie-next' // 30 day after, expire VueCookieNext.config({ expire: '30d' }) // set secure, only https works VueCookieNext.config({ expire: '7d', secure: "true" }) // 2019-03-13 expire VueCookieNext.config({ expire: new Date(2019, 03, 13).toUTCString() }) // 30 day after, expire, '' current path , browser default VueCookieNext.config({ expire: 60 * 60 * 24 * 30 })

support json object

var user = { user_id: 1, name: 'Ben', session: '75442486-0878-440c-9db1-a7006c25a39f', session_start_time: new Date(), } this.$cookie.setCookie('user', user) // print user name console.log(this.$cookie.getCookieCookie('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.$cookie .setCookie('user_session', '75442486-0878-440c-9db1-a7006c25a39f') // number + d , ignore case .setCookie('user_session', '75442486-0878-440c-9db1-a7006c25a39f', { expire: '1d', }) .setCookie('user_session', '75442486-0878-440c-9db1-a7006c25a39f', { expire: '1D', }) // Base of second .setCookie('user_session', '75442486-0878-440c-9db1-a7006c25a39f', { expire: 60 * 60 * 24, }) // input a Date, + 1day .setCookie('user_session', '75442486-0878-440c-9db1-a7006c25a39f', { expire: new Date(2017, 03, 12), }) // input a date string, + 1day .setCookie('user_session', '75442486-0878-440c-9db1-a7006c25a39f', { expire: 'Sat, 13 Mar 2017 12:25:57 GMT', })

set expire times, input number type

this.$cookie.setCookie('default_unit_second', 'input_value', { expire: 1 }) // 1 second after, expire this.$cookie.setCookie('default_unit_second', 'input_value', { expire: 60 + 30, }) // 1 minute 30 second after, expire this.$cookie.setCookie('default_unit_second', 'input_value', { expire: 60 * 60 * 12, }) // 12 hour after, expire this.$cookie.setCookie('default_unit_second', 'input_value', { expire: 60 * 60 * 24 * 30, }) // 1 month after, expire

set expire times - end of browser session

this.$cookie.setCookie('default_unit_second', 'input_value', { expire: 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.$cookie.setCookie('token', 'GH1.1.1689020474.1484362313', { expire: '60s', }) // 60 second after, expire this.$cookie.setCookie('token', 'GH1.1.1689020474.1484362313', { expire: '30MIN', }) // 30 minute after, expire, ignore case this.$cookie.setCookie('token', 'GH1.1.1689020474.1484362313', { expire: '24d', }) // 24 day after, expire this.$cookie.setCookie('token', 'GH1.1.1689020474.1484362313', { expire: '4m', }) // 4 month after, expire this.$cookie.setCookie('token', 'GH1.1.1689020474.1484362313', { expire: '16h', }) // 16 hour after, expire this.$cookie.setCookie('token', 'GH1.1.1689020474.1484362313', { expire: '3y', }) // 3 year after, expire // input date string this.$cookie.setCookie('token', 'GH1.1.1689020474.1484362313', { expire: new Date(2017, 3, 13).toUTCString(), }) this.$cookie.setCookie('token', 'GH1.1.1689020474.1484362313', { expire: 'Sat, 13 Mar 2017 12:25:57 GMT ', })

set expire support date

var date = new Date() date.setDate(date.getDate() + 1) this.$cookie.setCookie('token', 'GH1.1.1689020474.1484362313', { expire: date, })

set never expire

this.$cookie.setCookie('token', 'GH1.1.1689020474.1484362313', { expire: Infinity, }) // never expire // never expire , only -1,Other negative Numbers are invalid this.$cookie.setCookie('token', 'GH1.1.1689020474.1484362313', { expire: -1 })

remove cookie

this.$cookie.setCookie('token', 'value') // domain.com and *.doamin.com are readable this.$cookie.removeCookie('token') // remove token of domain.com and *.doamin.com this.$cookie.setCookie('token', value, { domain: 'domain.com' }) // only domain.com are readable this.$cookie.removeCookie('token', { domain: 'domain.com' }) // remove token of domain.com

set other arguments

// set path this.$cookie.setCookie('use_path_argument', 'value', { expire: '1d', path: '/app', }) // set domain this.$cookie.setCookie('use_path_argument', 'value', { domain: 'domain.com' }) // default 1 day after,expire // set secure this.$cookie.setCookie('use_path_argument', 'value', { secure: "true", }) // set sameSite - should be one of `None`, `Strict` or `Lax`. Read more https://web.dev/samesite-cookies-explained/ this.$cookie.setCookie('use_path_argument', 'value', { sameSite: 'Lax' })

other operation

// check a cookie exist this.$cookie.isCookieAvailable("user_session") // get a cookie this.$cookie.getCookie("user_session"); // remove a cookie this.$cookie.removeCookie("user_session"); // get all cookie key names, line shows this.$cookie.keys().join("\n"); // remove all cookie this.$cookie.keys().forEach(cookie => this.$cookie.removeCookie(cookie)) // vue-cookie-next global [this | VueCookieNext].$cookie.[method]

⚠️ Warning

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

🌸 Thanks

This project is heavily inspired by the following awesome projects.

Thanks!

About

A vue 3 plugin for handling browser cookies with typescript support. Load and save cookies within your Vue 3 application

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

  •  

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •