[ 目次 ]

• はじめに
• "vue-cookie-law"のインストール
• Footer.vueにCookieLawのコンポーネントを追加
• plugins/vue-cookie-law.js
• nuxt.config.jsに設定追加
• Footer.vue修正
• 確認
• 最後に

はじめに

こんばんは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回は vue-cookie-law を利用して本ブログでもユーザーにcookieを利用していることをアラートし、同意を得れるようにしたいと思います。

https://www.npmjs.com/package/vue-cookie-law

"vue-cookie-law"のインストール

■ npmを利用する場合

$ npm install vue-cookie-law --save

■ yarnを利用する場合

$ yarn add vue-cookie-law

Footer.vueにCookieLawのコンポーネントを追加

本ブログはNuxt.jsです。CookieLawはClient（ブラウザ）でしか動作しないので、Nuxt.jsを利用する場合、ssr: falseに設定する必要があります。
まずは、ssr: falseの設定をしていきましょう。

plugins/vue-cookie-law.js

plugins/vue-cookie-law.js を以下のような内容で作成します。

import Vue from 'vue'
import CookieLaw from 'vue-cookie-law'

Vue.component('cookie-law', CookieLaw)

nuxt.config.jsに設定追加

pluginsの設定に vue-cookie-law.js を追加します。

・・・
plugins: [
    '~/plugins/buefy.js',
    '~/plugins/vue-scrollto.js',
    '~/plugins/vee-validate.js',
    { src: '~/plugins/token.js', ssr: false },
    // 以下の１行を追加
    { src: '~/plugins/vue-cookie-law.js', ssr: false }
],
・・・

ssr: false でpluginsを追加しています。

Footer.vue修正

Footer.vueにCookieLawのコンポーネントを追加します。
今回は以下のように修正しました。

<template>
  <footer class="footer has-background-dark has-text-light">
    <div class="container is-fluid has-text-centered">
      <div class="buttons" style="justify-content: center;">
        <a
          href="https://twitter.com/nakanakamu0828"
          target="_blank"
          class="button is-circle is-medium"
        >
          <i class="fab fa-twitter"></i>
        </a>
        <a
          href="https://github.com/nakanakamu0828"
          target="_blank"
          class="button is-circle is-medium"
        >
          <i class="fab fa-github"></i>
        </a>
        <a
          href="https://medium.com/@nakamu"
          target="_blank"
          class="button is-circle is-medium"
        >
          <i class="fab fa-medium-m"></i>
        </a>
        <a
          href="mailto:yuuki.nakamura.0828@gmail.com"
          target="_blank"
          class="button is-circle is-medium"
        >
          <i class="far fa-envelope"></i>
        </a>
      </div>
      <p>
        <small>
          Copyright © 2018.<br>Made with
          <a href="https://bulma.io/" target="_blank" class="has-text-light"><b>Bulma</b></a>,
          <a href="https://jp.vuejs.org/" target="_blank" class="has-text-light"><b>Vue.js</b></a>,
          and <a class="has-text-light" href="/madewith"><b>many more</b></a>.
        </small>
      </p>
      <div class="m-t-20">
        <a href="https://bulma.io">
          <img src="https://bulma.io/images/made-with-bulma--white.png" alt="Made with Bulma" width="163" height="31">
        </a>
      </div>
    </div>
    
    // 以下の3行を追加
    <no-ssr>
      <cookie-law theme="dark-lime--rounded" message="あなたがこのサイト上でベストな経験/体験ができるようにCookieを使用しています" buttonText="同意"></cookie-law>
    </no-ssr>
    
  </footer>
</template>

※ 2018/09/24 no-ssrタグで囲むように修正。Nuxt.js v2.0.0へのバージョンアップでエラーが発生した為。エラー内容は以下になります。

確認

以下のスクショのようにcookie利用の説明メッセージと同意ボタンが表示されることを確認します。

最後に

最近はCookieの同意アラートが入ったサイトをたまに見かけますね。
増えてきているのかもしれないです。簡単に実装できるので皆さんも試してみてください。