※ この投稿は ブログで公開した記事 を一部修正したものです
風邪をひいたので、休養の間に作った vue-universal-cookies, nuxt-universal-cookies を npm および GitHub へ公開しました。
Vue.js / Nuxt.js にてIsomorphicにCookiesを扱え、node標準のhttp, Express, ブラウザなどに対応したプラグインです。
年明け約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>