Posted at

Vue.js / Nuxt.js で Cookies を isomorphic に扱えるライブラリを作った

More than 1 year has passed since last update.

※ この投稿は ブログで公開した記事 を一部修正したものです


風邪をひいたので、休養の間に作った vue-universal-cookies, nuxt-universal-cookies を npm および GitHub へ公開しました。

Vue.js / Nuxt.js にてIsomorphicにCookiesを扱え、node標準のhttp, Express, ブラウザなどに対応したプラグインです。

https://github.com/S64/vue-universal-cookies

年明け約4時間前の滑り込み npmjs.com デビューです。


Nuxt.js でのセットアップ

以下でインストールします。

npm install --save nuxt-universal-cookies

nuxt.config.js へ、以下のようにmodulesを書き足します。今のところoptionsへ設定できる値はありません。

// nuxt.config.js

module.exports = {
modules: [
{
src: 'nuxt-universal-cookies',
options: {}
}
],
};


Express でのセットアップ

正確には vue-server-renderer などを用いたSSR環境にて、ブラウザとExpress両方で共通のコンポーネントを利用する場合です。


以下でインストールします。

npm install --save vue-universal-cookies

以下のように、サーバ / クライアント 両方でinstallします

// in TypeScript

import VueUniversalCookies from 'vue-universal-cookies'
import * as express from 'express';

Vue.use(VueUniversalCookies);

クライアント側で、以下のようにして設定します。

// in TypeScript

import VueUniversalCookies, { BrowserHandler } from 'vue-universal-cookies'

new Vue({
cookies: ({
handler: new BrowserHandler()
} as VueUniversalCookies.Options)
});

Express側で、以下のように設定します。

// in TypeScript

import VueUniversalCookies, { ExpressHandler } from 'vue-universal-cookies'
import * as express from 'express';

app.use(/^.*/, (req: express.Request, res: express.Response) => {
// do something

new Vue({
cookies: ({
handler: new ExpressHandler(req, res)
} as VueUniversalCookies.Options)
});

// do something
});


使用方法

以下のようにして利用できます。

<template>

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