{"id":13824148,"url":"https://github.com/anish2690/vue-cookie-next","last_synced_at":"2025-04-02T19:33:34.601Z","repository":{"id":37030007,"uuid":"286207001","full_name":"anish2690/vue-cookie-next","owner":"anish2690","description":"A vue 3 plugin for handling browser cookies with typescript support. Load and save cookies within your Vue 3 application ","archived":false,"fork":false,"pushed_at":"2023-12-04T21:27:15.000Z","size":266,"stargazers_count":53,"open_issues_count":3,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T14:02:28.385Z","etag":null,"topics":["cookie","typescript-library","vue-cookie","vue-cookies","vue-next","vue-next-cookie","vue3"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anish2690.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":"anish2690","custom":"https://www.paypal.me/anish2690"}},"created_at":"2020-08-09T09:34:54.000Z","updated_at":"2024-06-13T20:59:25.000Z","dependencies_parsed_at":"2023-12-04T22:42:11.379Z","dependency_job_id":null,"html_url":"https://github.com/anish2690/vue-cookie-next","commit_stats":{"total_commits":18,"total_committers":2,"mean_commits":9.0,"dds":0.05555555555555558,"last_synced_commit":"18b6a2f27e073dbe9fd2c3a0f549e89ba49e19d1"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anish2690%2Fvue-cookie-next","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anish2690%2Fvue-cookie-next/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anish2690%2Fvue-cookie-next/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anish2690%2Fvue-cookie-next/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anish2690","download_url":"https://codeload.github.com/anish2690/vue-cookie-next/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246880481,"owners_count":20848869,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cookie","typescript-library","vue-cookie","vue-cookies","vue-next","vue-next-cookie","vue3"],"created_at":"2024-08-04T09:00:57.568Z","updated_at":"2025-04-02T19:33:33.155Z","avatar_url":"https://github.com/anish2690.png","language":"TypeScript","funding_links":["https://github.com/sponsors/anish2690","https://www.paypal.me/anish2690"],"categories":["Packages"],"sub_categories":[],"readme":"# vue-cookie-next\n\nA simple Vue 3 plugin for handling browser cookies with typescript support\n\n## Installation\n\n### Browser\n\n```html\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cscript src=\"https://unpkg.com/vue/dist/vue.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n  \u003c/body\u003e\n  \u003cscript type=\"module\"\u003e\n    import { VueCookieNext } from 'https://unpkg.com/vue-cookie-next@1.0.0/dist/vue-cookie-next.esm-bundler.js'\n    const CookieTest = {\n      mounted() {\n        this.$cookie.setCookie('username', 'user1')\n        console.log(this.$cookie.getCookie('username'))\n      },\n    }\n    Vue.createApp(CookieTest).use(VueCookieNext).mount('#app')\n  \u003c/script\u003e\n\u003c/html\u003e\n```\n\n### Package Managers\n\n```\nnpm install vue-cookie-next\n//or\nyarn add vue-cookie-next\n```\n\n```ts\nimport { createApp } from 'vue'\nimport { VueCookieNext } from 'vue-cookie-next'\n\nimport App from 'App.vue'\nconst app = createApp(App)\napp.use(VueCookieNext)\napp.mount('#app')\n\n// set default config\nVueCookieNext.config({ expire: '7d' })\n\n// set global cookie\nVueCookieNext.setCookie('theme', 'default')\nVueCookieNext.setCookie('hover-time', { expire: '1s' })\n```\n\n### Composition API\n\n```ts\nimport { defineComponent } from 'vue'\nimport { useCookie } from 'vue-cookie-next'\n\ndefineComponent({\n  setup() {\n    const { setCookie, removeCookie } = useCookie()\n    setCookie('theme', 'dark')\n    removeCookie('hover-time')\n  },\n})\n```\n\n## API Options\n\nsyntax format: **[this | VueCookieNext].\\$cookie.[method]**\n\n- Set global config\n\n```ts\nVueCookieNext.config({\n  expire: '1d',\n  path: '/',\n  domain: '',\n  secure: '',\n  sameSite: '',\n})\n// default: expireTimes = 1d, path = '/', domain = '', secure = '', sameSite = 'Lax'\n```\n\n- Set a cookie\n\n```ts\nthis.$cookie.setCookie(keyName, value, {\n  expire: '1d',\n  path: '/',\n  domain: '',\n  secure: '',\n  sameSite: '',\n}) //return this\n```\n\n- Get a cookie\n\n```ts\nthis.$cookie.getCookie(keyName) // return value\n```\n\n- Remove a cookie\n\n```ts\nthis.$cookie.removeCookie(keyName, {\n  path: '/',\n  domain: '',\n}) // return this | false if key not found\n```\n\n- Exist a `cookie name`\n\n```ts\nthis.$cookie.isCookieAvailable(keyName) // return false or true\n```\n\n- Get All `cookie name`\n\n```ts\nthis.$cookie.keys() // return a array string\n```\n\n## Example Usage\n\n#### set global config\n\n```ts\nimport { VueCookieNext } from 'vue-cookie-next'\n// 30 day after, expire\nVueCookieNext.config({ expire: '30d' })\n\n// set secure, only https works\nVueCookieNext.config({ expire: '7d', secure: \"true\" })\n\n// 2019-03-13 expire\nVueCookieNext.config({ expire: new Date(2019, 03, 13).toUTCString() })\n\n// 30 day after, expire, '' current path , browser default\nVueCookieNext.config({ expire: 60 * 60 * 24 * 30 })\n```\n\n#### support json object\n\n```ts\nvar user = {\n  user_id: 1,\n  name: 'Ben',\n  session: '75442486-0878-440c-9db1-a7006c25a39f',\n  session_start_time: new Date(),\n}\n\nthis.$cookie.setCookie('user', user)\n// print user name\nconsole.log(this.$cookie.getCookieCookie('user').name)\n```\n\n#### set expire times\n\n**Suppose the current time is : Sat, 11 Mar 2017 12:25:57 GMT**\n\n**Following equivalence: 1 day after, expire**\n\n**Support chaining sets together**\n\n```ts\n// default expire time: 1 day\nthis.$cookie\n  .setCookie('user_session', '75442486-0878-440c-9db1-a7006c25a39f')\n  // number + d , ignore case\n  .setCookie('user_session', '75442486-0878-440c-9db1-a7006c25a39f', {\n    expire: '1d',\n  })\n  .setCookie('user_session', '75442486-0878-440c-9db1-a7006c25a39f', {\n    expire: '1D',\n  })\n  // Base of second\n  .setCookie('user_session', '75442486-0878-440c-9db1-a7006c25a39f', {\n    expire: 60 * 60 * 24,\n  })\n  // input a Date, + 1day\n  .setCookie('user_session', '75442486-0878-440c-9db1-a7006c25a39f', {\n    expire: new Date(2017, 03, 12),\n  })\n  // input a date string, + 1day\n  .setCookie('user_session', '75442486-0878-440c-9db1-a7006c25a39f', {\n    expire: 'Sat, 13 Mar 2017 12:25:57 GMT',\n  })\n```\n\n#### set expire times, input number type\n\n```ts\nthis.$cookie.setCookie('default_unit_second', 'input_value', { expire: 1 }) // 1 second after, expire\nthis.$cookie.setCookie('default_unit_second', 'input_value', {\n  expire: 60 + 30,\n}) // 1 minute 30 second after, expire\nthis.$cookie.setCookie('default_unit_second', 'input_value', {\n  expire: 60 * 60 * 12,\n}) // 12 hour after, expire\nthis.$cookie.setCookie('default_unit_second', 'input_value', {\n  expire: 60 * 60 * 24 * 30,\n}) // 1 month after, expire\n```\n\n#### set expire times - end of browser session\n\n```ts\nthis.$cookie.setCookie('default_unit_second', 'input_value', { expire: 0 }) // end of session - use 0 or \"0\"!\n```\n\n#### set expire times , input string type\n\n| Unit | full name |\n| ---- | --------- |\n| y    | year      |\n| m    | month     |\n| d    | day       |\n| h    | hour      |\n| min  | minute    |\n| s    | second    |\n\n**Unit Names Ignore Case**\n\n**not support the combination**\n\n**not support the double value**\n\n```javascript\nthis.$cookie.setCookie('token', 'GH1.1.1689020474.1484362313', {\n  expire: '60s',\n}) // 60 second after, expire\nthis.$cookie.setCookie('token', 'GH1.1.1689020474.1484362313', {\n  expire: '30MIN',\n}) // 30 minute after, expire, ignore case\nthis.$cookie.setCookie('token', 'GH1.1.1689020474.1484362313', {\n  expire: '24d',\n}) // 24 day after, expire\nthis.$cookie.setCookie('token', 'GH1.1.1689020474.1484362313', {\n  expire: '4m',\n}) // 4 month after, expire\nthis.$cookie.setCookie('token', 'GH1.1.1689020474.1484362313', {\n  expire: '16h',\n}) // 16 hour after, expire\nthis.$cookie.setCookie('token', 'GH1.1.1689020474.1484362313', {\n  expire: '3y',\n}) // 3 year after, expire\n\n// input date string\nthis.$cookie.setCookie('token', 'GH1.1.1689020474.1484362313', {\n  expire: new Date(2017, 3, 13).toUTCString(),\n})\nthis.$cookie.setCookie('token', 'GH1.1.1689020474.1484362313', {\n  expire: 'Sat, 13 Mar 2017 12:25:57 GMT ',\n})\n```\n\n#### set expire support date\n\n```ts\nvar date = new Date()\ndate.setDate(date.getDate() + 1)\nthis.$cookie.setCookie('token', 'GH1.1.1689020474.1484362313', {\n  expire: date,\n})\n```\n\n#### set never expire\n\n```ts\nthis.$cookie.setCookie('token', 'GH1.1.1689020474.1484362313', {\n  expire: Infinity,\n}) // never expire\n// never expire , only -1,Other negative Numbers are invalid\nthis.$cookie.setCookie('token', 'GH1.1.1689020474.1484362313', { expire: -1 })\n```\n\n#### remove cookie\n\n```ts\nthis.$cookie.setCookie('token', 'value') // domain.com and *.doamin.com are readable\nthis.$cookie.removeCookie('token') // remove token of domain.com and *.doamin.com\n\nthis.$cookie.setCookie('token', value, { domain: 'domain.com' }) // only domain.com are readable\nthis.$cookie.removeCookie('token', { domain: 'domain.com' }) // remove token of domain.com\n```\n\n#### set other arguments\n\n```ts\n// set path\nthis.$cookie.setCookie('use_path_argument', 'value', {\n  expire: '1d',\n  path: '/app',\n})\n\n// set domain\nthis.$cookie.setCookie('use_path_argument', 'value', { domain: 'domain.com' }) // default 1 day after,expire\n\n// set secure\nthis.$cookie.setCookie('use_path_argument', 'value', {\n  secure: \"true\",\n})\n\n// set sameSite - should be one of `None`, `Strict` or `Lax`. Read more https://web.dev/samesite-cookies-explained/\nthis.$cookie.setCookie('use_path_argument', 'value', { sameSite: 'Lax' })\n```\n\n#### other operation\n\n```ts\n// check a cookie exist\nthis.$cookie.isCookieAvailable(\"user_session\")\n\n// get a cookie\nthis.$cookie.getCookie(\"user_session\");\n\n// remove a cookie\nthis.$cookie.removeCookie(\"user_session\");\n\n// get all cookie key names, line shows\nthis.$cookie.keys().join(\"\\n\");\n\n// remove all cookie\nthis.$cookie.keys().forEach(cookie =\u003e this.$cookie.removeCookie(cookie))\n\n// vue-cookie-next global\n[this | VueCookieNext].$cookie.[method]\n\n```\n\n## ⚠️ Warning\n\n**\\$cookie key names Cannot be set to ['expires','max-age','path','domain','secure','SameSite']**\n\n## 🌸 Thanks\n\nThis project is heavily inspired by the following awesome projects.\n\n- [cmp-cc/vue-cookies ](https://github.com/cmp-cc/vue-cookies)\n\nThanks!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanish2690%2Fvue-cookie-next","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanish2690%2Fvue-cookie-next","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanish2690%2Fvue-cookie-next/lists"}