A Vue.js plugin for manipulating cookies

Related tags

Storage vue-cookie
Overview

vue-cookie CircleCI

A Vue.js plugin for manipulating cookies tested up to Vue v2.0.5

Installation

Install through npm

npm install vue-cookie --save

Include in <body> after loading Vue and it will automatically hook into Vue

<script src="/node_modules/vue-cookie/build/vue-cookie.js'"></script>

Or do it the cool way and load it in your main.js/app.js

// Require dependencies
var Vue = require('vue');
var VueCookie = require('vue-cookie');
// Tell Vue to use the plugin
Vue.use(VueCookie);

Usage

The plugin is available through this.$cookie in components or Vue.cookie

Rather than implementing my own Cookie handling logic the plugin now wraps the awesome tiny-cookie package

Example
// From some method in one of your Vue components
this.$cookie.set('test', 'Hello world!', 1);
// This will set a cookie with the name 'test' and the value 'Hello world!' that expires in one day

// To get the value of a cookie use
this.$cookie.get('test');

// To delete a cookie use
this.$cookie.delete('test');
Advanced examples
// Setting the cookie Domain
this.$cookie.set('test', 'Random value', {expires: 1, domain: 'localhost'});

// As this cookie is set with a domain then if you wish to delete it you have to provide the domain when calling delete
this.$cookie.delete('test', {domain: 'localhost'});

// Customizing expires
var date = new Date;
date.setDate(date.getDate() + 21);

this.$cookie.set('dateObject', 'A date object', { expires: date });
this.$cookie.set('dateString', 'A parsable date string', { expires: date.toGMTString() });
this.$cookie.set('integer', 'Seven days later', { expires: 7 });
this.$cookie.set('stringSuffixY', 'One year later', { expires: '1Y' });
this.$cookie.set('stringSuffixM', 'One month later', { expires: '1M' });
this.$cookie.set('stringSuffixD', 'One day later', { expires: '1D' });
this.$cookie.set('stringSuffixh', 'One hour later', { expires: '1h' });
this.$cookie.set('stringSuffixm', 'Ten minutes later', { expires: '10m' });
this.$cookie.set('stringSuffixs', 'Thirty seconds later', { expires: '30s' });

Thanks for using the plugin, I am happy to accept feedback/pull requests, do not forget to star if you like it!

Happy Coding! :D

Tests

This packacge uses the ´´´testemframework andjasmine``` assertion library

# Run npm install to fetch dependencies
npm install

# Then you may run the tests from
npm run test-dev
Comments
  • Why plugin?

    Why plugin?

    I find this project interesting. Can you explain why not to use tiny-cookie directly? What are the benefits of using Vue plugin?

    It would be great if the answers could be added to the README.

    opened by jiv-e 4
  • getting an extra dot(.) in cookie domain

    getting an extra dot(.) in cookie domain

    Hi i have a scenario where i have to create a cookie with the current hostname as domain, but it's adding an extra dot(.) before the hostname.

    let domain = location.hostname
    window.$cookies.set('name', 'value', '12h', '/', domain)
    

    Ex: expected domain for cookie: abc.google.com actual domain name set in cookie .abc.google.com

    Thanks.

    opened by raghu64 2
  • How to use this plugin by 'Vue.cookie'

    How to use this plugin by 'Vue.cookie'

    I want to set a cookie in vuex's mutations.js file,

    but when I use 'Vue.cookie' directly, there was an error occurred:

    TypeError: WEBPACK_IMPORTED_MODULE_0_vue.default.cookie is not a function

    opened by StrangeTown 2
  • unable to get cookie

    unable to get cookie

    Hi, I am passing a cookie to the browser from my backend, it shows up on the browser cookie extension just fine, but this.$cookie.get('my-cookie') returns null.. any thoughts? and the cookie is not expired.

    opened by z1haze 2
  • isInteger ES6 browser support

    isInteger ES6 browser support

    Hi,

    I noticed you use the isInteger function on line 13. But this is not supported by all browsers like IE11 and older. Is it maybe possible to adjust to make it browser compatible?

    possible solution:

    Number.isInteger = Number.isInteger || function(value) {
        return typeof value === "number" && 
               isFinite(value) && 
               Math.floor(value) === value;
    };
    
    opened by timmetj 1
  • set a cookie disabled

    set a cookie disabled

    In my project, cross-domain Settings are set in the background, when I send a axios request, I need to set an extra cookie, but it can't be effective.

    opened by weifeng165 0
  • TypeError: Cannot read property '$cookies' of undefined

    TypeError: Cannot read property '$cookies' of undefined

    import Vue from "vue"; import VueCookies from 'vue-cookies'; import App from "./App.vue"; import router from "./router"; import store from "./store"; import Axios from "axios"; import Api from "./index"; import ElementUI from "element-ui"; import "element-ui/lib/theme-chalk/index.css";

    Vue.config.productionTip = false; Vue.use(VueCookies) Vue.use(ElementUI); Vue.prototype.$http = Api; new Vue({ VueCookies, router, store, Axios, ElementUI, render: h => h(App) }).$mount("#app");

    opened by yangyongkangse 0
  • Getting $cookie undefined - beforeEach

    Getting $cookie undefined - beforeEach

    i am using vue-cookie in my project, the cookie is set but when i use in the main.js console.log(this.$cookie.get("test"))

    i get the following error ..... any thoughts? Cannot read property '$cookie' of undefined Although this.$cookie.get("test") works in the components without any issue

    TIA

    opened by power-cut 0
  • check cookie is exists

    check cookie is exists

    Hi, the error said, "document is not defined" for VueCookie.get('username') when I don't store any session so, how to check the session first?

    opened by cnacorp 0
  • Set cookie expiration time as unix timestamp

    Set cookie expiration time as unix timestamp

    I'm using this library to store OAuth tokens and I want to set the expiration time of my access_token as the expires_in response, but it is in timestamp.

    Could you provide a way of pass the timestamp and get the cookie saved with it as expiration time?

    opened by e200 0
  • cookies are being encoded

    cookies are being encoded

    I'm having the following problem: When I create a cookie by Vue.$cookies.set('example', "user=myself") The stored cookie becomes user%3Dmyself, but I want it to be exactly as user=myself, that is, they are being encoded. Is there any option avaiable so that the cookies are not encoded?

    opened by dumedeiros 0
  • Vue-cookie integration with Vuex

    Vue-cookie integration with Vuex

    Hi there! I'm totally new with Vue and front-end in general (I'm backend java developer :smile:) therefore I might ask dumb questions, but I'm trying to build a simple Vue app with Vuex and cookie as security token. What I'm currently have: main.js:

    ...
    import Vue from "vue";
    import vueCookie from "vue-cookies";
    ...
    
    Vue.component(...);
    
    Vue.use(vueCookie);
    new Vue({
      el: "#app",
      router,
      store,
      template: "<App/>",
      components: {App}
    }); 
    

    auth.js:

    import Vue from "vue";
    ...
    
    const state = {
      token: this.$cookie.get('token') || "",
      ...
    };
    
    /// other auth code
    

    When I run my app I get 'Cannot read property '$cookie' of undefined' at Vue.prototype.$cookie.get('token') line. What I'm doint wrong?

    opened by kotvertolet 4
  • Cannot set JSON cookie

    Cannot set JSON cookie

    I want to set an JSON javascript object in the cookie: this.$cookie.set('test', JSON.stringify(this.json), 1);

    Unfortunately, the cookie is not set. What am I doing wrong?

    opened by xiapoy 2
  • Releases(v1.1.4)
    Owner
    Alf
    Alf
    A lightweight vanilla ES6 cookies and local storage JavaScript library

    ?? CrumbsJS ?? A lightweight, intuitive, vanilla ES6 fueled JS cookie and local storage library. Quick Start Adding a single cookie or a local storage

    null 233 Dec 13, 2022
    sessionStorage API which gracefully degrades to window.name & cookies when not available

    sessionstorage The sessionStorage API is amazing and super useful when you need to store data temporarily in the browser. We used to abuse cookies for

    null 22 Jul 25, 2022
    Lightweight Angular module for access to cookies

    angular-cookie Lightweight Angular module for access to cookies Installation You can install angular-cookie via bower bower install angular-cookie Ot

    Ivan Pusic 269 Oct 5, 2022
    Load and save cookies within your React application

    react-cookie Universal cookies for React universal-cookie Universal cookies for JavaScript universal-cookie-express Hook cookies get/set on Express fo

    Reactive Stack 2.4k Dec 30, 2022
    Vue.js localStorage plugin with types support

    VueLocalStorage LocalStorage plugin inspired by Vue typed props which take a care of typecasting for Vue.js 1 and 2 with SSR support. Install npm inst

    Alexander Avakov 669 Nov 29, 2022
    Collection of storages for session plugin of grammY.

    Grammy storages This is monorepo for Satont's adapters for grammY Storages file mongodb psql redis typeorm Each package is 100% TypeScript, well teste

    null 21 Jan 5, 2023
    基于vue3.0-ts-Element集成的简洁/实用后台模板!《带预览地址》vue-admin;vue+admin;vue-element;vue+element;vue后台管理;vue3.0-admin;vue3.0-element。

    一、基于vue3.0+ts+Element通用后台admin模板 二、在线预览地址:http://admin.yknba.cn/ 三、下载使用: 1、克隆代码 通过git将代码克隆到本地;或者使用下载安装包模式进行下载。 2、进入目录 进入项目的根目录:vue3.0-ts-admin 3、安装依

    null 64 Dec 16, 2022
    Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

    JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

    Svante Jonsson IT-Högskolan 3 May 18, 2022
    Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

    Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

    null 4 May 3, 2022
    Kurs-repo för kursen Webbserver och Databaser

    Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

    null 14 Jan 3, 2023
    The lightweight library for manipulating and animating SVG

    SVG.js A lightweight library for manipulating and animating SVG, without any dependencies. SVG.js is licensed under the terms of the MIT License. Inst

    SVG.js 10k Dec 25, 2022
    danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.

    Danfojs: powerful javascript data analysis toolkit What is it? Danfo.js is a javascript package that provides fast, flexible, and expressive data stru

    JSdata 4k Dec 29, 2022
    The lightweight library for manipulating and animating SVG

    SVG.js A lightweight library for manipulating and animating SVG, without any dependencies. SVG.js is licensed under the terms of the MIT License. Inst

    SVG.js 10k Jan 3, 2023
    GUI for editing, visualizing, and manipulating JSON data

    JSON-Splora JSON-Splora is a GUI for editing, visualizing, and manipulating JSON data with jq or JavaScript. Design Built with Electron Editor and out

    Wells Johnston 1.8k Dec 25, 2022
    Utilities for parsing and manipulating LaTeX ASTs with the Unified.js framework

    unified-latex Monorepo for @unified-latex packages. These packages provide a JS/TypeScript interface for creating, manipulating, and printing LaTeX Ab

    Jason Siefken 29 Dec 27, 2022
    This repo contains utility tools for manipulating files, process images and automation.

    utility-tools-cli This repo contains utility tools which makes life lil bit easier. Features Rename Files in a Folder with the convention you want. Re

    Wasim Raja 4 Nov 4, 2022
    A simple, lightweight JavaScript API for handling browser cookies

    JavaScript Cookie A simple, lightweight JavaScript API for handling cookies Works in all browsers Accepts any character Heavily tested No dependency S

    null 20.2k Jan 3, 2023
    A lightweight vanilla ES6 cookies and local storage JavaScript library

    ?? CrumbsJS ?? A lightweight, intuitive, vanilla ES6 fueled JS cookie and local storage library. Quick Start Adding a single cookie or a local storage

    null 233 Dec 13, 2022
    sessionStorage API which gracefully degrades to window.name & cookies when not available

    sessionstorage The sessionStorage API is amazing and super useful when you need to store data temporarily in the browser. We used to abuse cookies for

    null 22 Jul 25, 2022
    Lightweight Angular module for access to cookies

    angular-cookie Lightweight Angular module for access to cookies Installation You can install angular-cookie via bower bower install angular-cookie Ot

    Ivan Pusic 269 Oct 5, 2022