vue-universal-cookies Isomorphic cookies plugin for Vue.js / Nuxt.js supports Browser, Express, http (node).

Related tags

Persistence vue isomorphic cookie nuxt
Overview

vue-universal-cookies / nuxt-universal-cookies

Isomorphic cookies plugin for Vue.js / Nuxt.js supports Browser, Express, http (node).

Install in Nuxt.js

npm install --save nuxt-universal-cookies
// nuxt.config.js
module.exports = {
  modules: [
    {
      src: 'nuxt-universal-cookies',
      options: {}
    }
  ],
};

Install in Vue.js

npm install --save vue-universal-cookies
// in TypeScript
import VueUniversalCookies, { BrowserHandler, ExpressHandler } from 'vue-universal-cookies'
import * as express from 'express';

Vue.use(VueUniversalCookies);

...

let options: VueUniversalCookies.Options;

if(IF_YOUR_ENTRY_IS_BROWSER) {
  options = { handler: new BrowserHandler() };
} else if (IF_YOUR_ENTRY_IS_EXPRESS) {
  const reqFromYourMiddleware: express.Request;
  const resFromYourMiddleware: express.Response;
  options = { handler: new ExpressHandler(reqFromYourMiddleware, resFromYourMiddleware) };
} else {
  // do something
}

...

new Vue({
  cookies: options,
  // router: ...
});

Usages

<template>
  <div>
    <p>{{ $cookies.get('key') }}</p>
    <button v-on:click="$cookies.set('key', 'value', {})">Update</button>
  </div>
</template>

License

Copyright 2018 Shuma Yoshioka

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
You might also like...
A todo web app built in Vue.js using LocalStorage.
A todo web app built in Vue.js using LocalStorage.

Todo app built in Vue.js using LocalStorage https://todo-app-vuejs-cli.netlify.app Project setup npm install Compiles and hot-reloads for development

Soham Dixit 2 Sep 28, 2021
Vue Cookies Consent - Nice and clean component to display message about cookies in Vue and Nuxt.js

Vue Cookies Consent Nice and clean component to display message about cookies in Vue and Nuxt.js 🎬 Demo 📦 Installation NPM npm install --save @norvi

Norvik IT 8 Sep 26, 2022
Vue + Express.js = VueXpress / A server side rendering engine for Express.js. Use .vue files as your express.js templates.
Vue + Express.js = VueXpress / A server side rendering engine for Express.js. Use .vue files as your express.js templates.

Introduction VueXpress is a template engine for express.js. You can easily rendering *.vue templates on the server. Check out the usage information. I

null 101 Nov 9, 2022
Hermes is a MITM proxy that allows HTTP, HTTPS and HTTP/2 trafic interception.

Hermes is a man-in-the-middle proxy that allows HTTP, HTTPS and HTTP/2 trafic interception, inspection and modification.

Open-Source by Veepee 29 Nov 10, 2022
Simple, lightweight, isomorphic, and template-based validation library.

Simple, lightweight, isomorphic, template-based validation.

Arnaud Gissinger 2 Dec 9, 2021
A simple Vue 3 plugin for handling browser cookies with typescript support

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

Anish George 44 Nov 23, 2022
A simple Vue.js plugin for handling browser cookies reactively

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

Adrien Foulon 1 Sep 8, 2021
A simple Vue.js 3 plugin for handling browser cookies

vue3-cookies A simple Vue.js 3 plugin for handling browser cookies, forked from https://github.com/cmp-cc/vue-cookies Installation Package Managers np

Itay Knaan-Harpaz 14 Dec 18, 2022
Vue Cookbook (Vue1.0 + express) @yjj5855Vue Cookbook (Vue1.0 + express) by @yjj5855: A demo first screen rendering of a service

使用node.js+Vue.js+webpack 用node当前端服务器和后台服务器通讯和渲染页面,使用vue,vue-server,vue-router来实现SPA应用. 解决了SPA应用的SEO缺点,访问的第一个页面,使用vue-server来服务端渲染.使用vue-router+webpack

yjj5855 280 Dec 8, 2021
MEVN Full Stack E-Commerce Solution. Built using MEVN Stack (Node.js, Express.js, Vue.js, MongoDB) with Developer Friendliness and Cloud Integrations in mind. Previously Powered the Veniqa New York Startup. 100% Customizable. For Demos and Documentation, Visit Official Website
MEVN Full Stack E-Commerce Solution. Built using MEVN Stack (Node.js, Express.js, Vue.js, MongoDB) with Developer Friendliness and Cloud Integrations in mind. Previously Powered the Veniqa New York Startup. 100% Customizable. For Demos and Documentation, Visit Official Website

Open-source E-commerce Solution. Built using MEVN Stack (Node.js, Express.js, Vue.js, MongoDB) with Developer Friendliness and Cloud Integrations in m

(EJ) Vivek Pandey 1k Jan 2, 2023
Light speed setup for MEVN(Mongo Express Vue Node) Apps
Light speed setup for MEVN(Mongo Express Vue Node) Apps

Light speed setup for MEVN stack based web-apps Chat: Telegram Donate: PayPal, Open Collective, Patreon A CLI tool for getting started with the MEVN s

madlabsinc 791 Dec 14, 2022
A Vue file management client, complete with a node/express/FS backend.
A Vue file management client, complete with a node/express/FS backend.

A Vue file management client, complete with a node/express/FS backend.

Derek Flynn 42 Oct 19, 2022
A simple polling app made with Vue for the frontend and Node.js + Express for the backend.
A simple polling app made with Vue for the frontend and Node.js + Express for the backend.

A simple polling app made with Vue and Node.js + Express. Features Easy to use, simple interface The ability to delete polls Light mode × Dark mode Po

null 5 Apr 13, 2022
Online album storefront using Vue.js + Vuetify + node/express

Audifactory A elegant website that sells various albums. To be revamp after the release of vue 3.0 and vuetify 2.0 (2019 Q3) Instruction Ensure you ha

DaRwin 7 Mar 18, 2022
ShoppingCart - Vue.js + Node.js + Express + MongoDB
ShoppingCart - Vue.js + Node.js + Express + MongoDB

ShoppingCart - Vue.js + Node.js + Express + MongoDB Developing a ShoppingCart (Ecommerce) Application using Vue.js Live Demo : Vue-Shopping-Cart This

Full Stack Developer 4 Jul 11, 2022
Full-stack project - Website review Anime, Manga. MEVN Stack (Mongo-Express-Vue-Node).

Project Animan Lab Frontend stack: VueJS 3 VueX Axios Tailwind CSS SASS Editor: Quill Upload Image: Filepond Cloudinary Swiper Backend stack: NodeJS E

Lee - Triết Lý 4 Oct 31, 2022
Yeoman generator for a Vue, Express, Node, and Mongo stack

A somewhat opinionated Yeoman generator for applications built upon the VENM stack.

Joel Felsinger 47 Dec 15, 2022
A template combining TypeORM, Express, Socket.io, and NuxtJS with a custom server setup using ts-node. Includes a lot of features to help bootstrap and supercharge your application.

expressive-nuxt Features 99% TypeScript and uses ts-node 3 Database management with TypeORM API with ExpressJS User authenication and sessions Email

Micheal Pearce 31 Dec 27, 2022
基于Vue3 、TypeScript 和 Node.js express 框架仿造知乎专栏——之也
基于Vue3 、TypeScript 和 Node.js express 框架仿造知乎专栏——之也

前言 此项目是 Vue + TypeScript + Bootstrap 仿造知乎专栏构建的（之也）项目，它的接口zhiye-api 是用 Node.js express 框架实现的，数据从MySQL数据库获取，具有真实的登录、注册、权限验证、专栏、文章等功能。 技术栈 Vue3 + Vuex +

null 6 Oct 28, 2022
Comments
  • TS2339: Property '$cookies' does not exist on type (ambient Typescript declarations not in dist)

    TS2339: Property '$cookies' does not exist on type (ambient Typescript declarations not in dist)

    If you use this in a typescript Vue component, e.g.

    this.$cookies.set('foo', resp, {
    secure: true
});

    You will get an error like this:

    TS2339: Property '$cookies' does not exist on type

    The underlying problem is the contents of https://github.com/S64/vue-universal-cookies/blob/master/packages/vue-universal-cookies/typings/vue.d.ts are not included in dist/index.d.ts . I haven't been able to find a way to get these ambient declarations included in index.d.ts.

    My current workaround is to write:

    import 'vue-universal-cookies/typings/vue'

    in my component.

    opened by frankier 4
  • Use cookie as a variable for Query in Apollo

    Use cookie as a variable for Query in Apollo

    I'm https://github.com/S64/vue-universal-cookies to use cookies on both server side and client side. This library works perfectly. However if I use it as a variable in the query, it doesn't work. Any idea?

    <template>
 <div>
  {{ $cookies.get('customerId') }} // this works
 </div>
</template>
<script>
import CUSTOMER from "~/graphql/queries/CUSTOMER.gql";

export default {
created() {
  console.log(this.$cookies.get('customerId)) // this works on both server and client
},
  apollo: {
    customer: {
      query: CUSTOMER,
      prefetch: true,
      variables(){
        return {
         customerId: this.$cookies.get('customerId) // this doesn't work
        }
      }
   }
 }
}
    opened by gijo-varghese 0
Releases(v0.0.5)
Owner
Shuma Yoshioka
Freelance Android Developer.
Shuma Yoshioka
GitHub
Allows the components to save and load their data across the browser sessions.

VueStorage Allows the components to save and load their data across the browser sessions. Works for Vue 2 & 3. demo Try it out! dependencies VueDemi s

Sergej Sintschilin 53 Nov 16, 2022
:boom: Vue plugin for work with local storage, session storage and memory storage from Vue context

vue-ls Vue plugin for work with local storage, session storage and memory storage from Vue context jsFiddle Example Vue 1.x Vue 2.x Install CDN Recomm

Igor Ognichenko 532 Jan 7, 2023
The Vue plugin for work with LocalStorage from Vue context

vue-local-storage The Vue plugin for work with LocalStorage from Vue context, with cookie fallback. Introduction vue-local-storage is wrapper for work

Radyushin & Company 24 Apr 22, 2020
The Vue plugin for work with LocalStorage from Vue context, with cookie fallback

vue-local-storage The Vue plugin for work with LocalStorage from Vue context, with cookie fallback. Introduction vue-local-storage is wrapper for work

Radyushin & Company 24 Apr 22, 2020
The vue plugin that attaches electron-json-storage APIs to the Vue object, making them accessible to all components.

vue-electron-storage A vue plugin that wraps electron-json-storage APIs to the Vue object. Installing Install using NPM npm install vue-electron-json-

Adam Bradford 1 Jun 17, 2020
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
Vue.js plugin for local storage and session storage (1.8 kb min+gz) :floppy_disk:

Vue Web Storage A minimalistic Vue.js plugin for web storage Version matrix Vue.js version Package version Branch 2.x 5.x 5.x 3.x 6.x master Features

Ankur Kumar 85 Nov 24, 2021
a reactive storage plugin for vue 👀🔭

vue-storage-watcher the real reactive watcher for localStorge. I search a few days for a lib to watch the ls, but failed. you can use this tiny ls wra

Vincent Guo 60 Nov 21, 2022
An automatic storage plugin for Vue2, persist the data with localStorage

vue-auto-storage An automatic storage plugin for Vue2, persist the data with localStorage. Demo Try it out Requirements Vue.js 2.x IE9 + Advantages Si

null 84 Feb 11, 2022
vue-idb - Lists and huge lists management with IndexedDB (Dexie.js) only or automatically created and extendible vuex modules

vue-idb IndexedDB wrapper for Vuejs based on Dexie Install npm install vue-idb --save Usage import Vue from 'vue' import VueIdb from 'vue-idb' Vue.us

David Grill 80 Oct 24, 2022