vue-cookie-next
Advanced tools
A simple Vue 3 plugin for handling browser cookies with typescript support
<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>
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' })
import { defineComponent } from 'vue'
import { useCookie } from 'vue-cookie-next'
defineComponent({
setup() {
const cookie = useCookie()
cookie.setCookie('theme', 'dark')
cookie.removeCookie('hover-time')
},
});
syntax format: [this | VueCookieNext].$cookie.[method]
VueCookieNext.config({
expire: '1d',
path: '/',
domain: '',
secure: '',
sameSite: '',
})
// default: expireTimes = 1d, path = '/', domain = '', secure = '', sameSite = 'Lax'
this.$cookie.setCookie(keyName, value, {
expire: '1d',
path: '/',
domain: '',
secure: '',
sameSite: '',
}) //return this
this.$cookie.getCookie(keyName) // return value
this.$cookie.removeCookie(keyName, {
path: '/',
domain: '',
}) // return this | false if key not found
cookie namethis.$cookie.isCookieAvailable(keyName) // return false or true
cookie namethis.$cookie.keys() // return a array string
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 })
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)
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',
})
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
this.$cookie.setCookie('default_unit_second', 'input_value', { expire: 0 }) // end of session - use 0 or "0"!
| 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 ',
})
var date = new Date()
date.setDate(date.getDate() + 1)
this.$cookie.setCookie('token', 'GH1.1.1689020474.1484362313', {
expire: date,
})
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 })
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 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' })
// 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]
$cookie key names Cannot be set to ['expires','max-age','path','domain','secure','SameSite']
This project is heavily inspired by the following awesome projects.
Thanks!
FAQs
A simple Vue.js plugin for handling browser cookies
We found that vue-cookie-next demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.