はじめに

Rails + Vue.jsのSPAでdevise_token_authを使ってサインアウトするサンプルコードを残します。

リクエストヘッダ情報の保存にVuexを活用しました。

環境

OS: macOS Catalina 10.15.1
Ruby: 2.6.5
Rails: 6.0.2.1
Vue: 2.6.10
vuex: 3.1.2
axios: 0.19.0

考え方

devise_token_authの公式ドキュメントの、sign_outのくだりにはこう書かれています。

Use this route to end the user's current session. This route will invalidate the user's authentication token. You must pass in uid, client, and access-token in the request headers.

リクエストヘッダにuid, client, access-tokenを含めて、DELETEリクエストを投げる必要があります。

このヘッダ情報を保管するためにVuexを使用します。

コード

store.js

import 'babel-polyfill'
import Vue from 'vue'
import Vuex from 'vuex'

import axios from 'axios'

Vue.use(Vuex)

const store = new Vuex.Store({

  state: {
//ヘッダの入れ物を用意。
    headers: null,
  },

  mutations: {

//サインイン時のレスポンスヘッダから情報を抜き出して保存しておく。
    signIn(state, payload) {
      state.headers = {
        "access-token": payload["access-token"],
        "client": payload["client"],
        "uid": payload["uid"],
      };
    },

//サインアウトしたらヘッダを空にしておく。
    signOut(state) {
      state.headers = null;
    },
  },

  actions: {
//paramsはemailなどのユーザー情報が入っていると思って下さい。
//（paramsへの情報の入れ方は今回割愛。）
    signIn(context, params) {
      axios
        .post('/api/v1/auth/sign_in', params)
        .then(function (response) {
//ここでレスポンスヘッダを受け取る。
          context.commit('signIn', response.headers);
      })
    },
    signOut(context) {
      axios
//ここでヘッダ情報を呼び出してDELETEリクエストに含める
        .delete('/api/v1/auth/sign_out', { headers: context.state.headers })
        .then(function () {
          context.commit('signOut');
      })
    },
  },
})

export default store

※本来はcurrentUserのようなstateも用意してすべきかと思いますが、話を超シンプルにするためにカットしています。

呼び出し方

Webpackのエントリーポイントとなるファイルで先程のstore.jsを読み込みます。

main.js

import Vue from 'vue'
import App from '../App.vue' 
import store from './store.js' //こちら

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    store, //こちら
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)
})

↓
store.jsを読み込めば任意の単一ファイルコンポーネント内にて、以下のようにしてsignOutを呼び出せます。

Anything.vue

<template>
  <div>
    <button @click="signOut">ログアウト</button>
  </div>
</template>

<script>

  export default {
    methods: {
      signOut() {
        this.$store.dispatch('signOut')
      }
    }
  }
</script>

※例では超シンプルに、サインアウトに必要な箇所のみ抜き出しています。

おわりに

最後まで読んで頂きありがとうございました

どなたかの参考になれば幸いです

参考にさせて頂いたサイト（いつもありがとうございます）

• Vuex 入門 | Vuex
• devise_token_auth/docs/usage at master · lynndylanhurley/devise_token_auth · GitHub

Nuxt.jsの勉強をするにあたり、@nuxt/cli v2.11.0版の内容をまとめてみました。
バージョン違いでインストール時の対話形式の内容が参考書籍と異なっていたりすることもあるので、参考になればと思います。

環境

% sw_vers
ProductName:    Mac OS X
ProductVersion: 10.15.2

% node -v
v12.13.1

% npm -v
6.12.1

※以降、記載しているコマンドはMacOS Catalinaでのコマンドになります。
※ % はプロンプトになりますので実際に入力するコマンドはそれ以降になります。

Nuxt.jsのインストール

早速Nuxt.jsをインストールし、プロジェクトを作成します。
作業ディレクトリを作成してcd コマンドで移動し、下記のコマンドを実行します。

% npx create-nuxt-app <プロジェクト名>

※npxはnpm5.2.0からデフォルトでバンドルされているコマンドになります。run-scriptいらずでかなり便利です。
※npmのバージョンが古い方は最新のnpmを使用するか、npxを別途インストールする必要があるかも知れません。

上記コマンド実行後に対話形式でプロジェクト情報を選択していきます。

プロジェクト名

まずはプロジェクト名。
基本的にはcreate時のプロジェクト名がそのまま設定されるので基本は Enter を押します。

? Project name (<プロジェクト名>)

プロジェクトの説明

プロジェクトの説明文を入力します。
特になければこちらもそのまま Enter を押します。

? Project description (My breathtaking Nuxt.js project) 

作成者名

作成者名を入力します。
特になければこちらもそのまま Enter を押します。

? Author name ()

パッケージマネージャー

使用するパッケージマネージャーを選択します。
今回はnpmを使用しているので十字キーで Npm を選択して Enter を押します。

? Choose the package manager (Use arrow keys)
  Yarn 
❯ Npm 

CSSフレームワーク

UI frameworkとありますが俗に言うCSSフレームワークのことですね。
こちらも特に使用するつもりもないので None のまま Enter を押します。
十字キーで選択できるのでデザインごとにお好みで。

? Choose UI framework (Use arrow keys)
❯ None 
  Ant Design Vue 
  Bootstrap Vue 
  Buefy 
  Bulma 
  Element 
  Framevuerk 
  iView 
  Tachyons 
  Tailwind CSS 
  Vuetify.js 

サーバーサイドフレームワーク

サーバーサイドで使用するフレームワークを選択します。
今回は静的コンテンツを作成するつもりなのでこちらも None のまま Enter を押します。
こちらも十字キーで選択できます。

? Choose custom server framework (Use arrow keys)
❯ None (Recommended) 
  AdonisJs 
  Express 
  Fastify 
  Feathers 
  hapi 
  Koa 
  Micro

Nuxtモジュール

Nuxt.jsで使用するモジュールを選択します。
使用するモジュールは十字キーで移動して Space を押すと選択できます。
今回はAxiosのみ選択して Enter 。

? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to inv
ert selection)
❯◉ Axios
 ◯ Progressive Web App (PWA) Support
 ◯ DotEnv

Axiosというのはどうやらhttp通信を行うためのモジュールのようで、Promise APIをサポートしたXMLHttpRequestsを行えるようです。
jQueryでお馴染み $.ajax と似たようなモノですかね。（これから勉強するので完全にイメージです。）

DotEnvは環境変数を使用する場合に .env ファイルから読み込んで使用することができるようになるモジュールのようです。
そんな凝ったことはするつもりもないので選択しませんでした。（その内勉強して投稿するかも？）

Lintツール

Lintツールはソースコードのバリデーションやフォーマッターしてくれるプログラムになります。
使用するツールは十字キーで移動して Space を押すと選択できます。
今回はESLintとPrettierを選択して Enter 。

? Choose linting tools 
 ◉ ESLint
❯◉ Prettier
 ◯ Lint staged files
 ◯ StyleLint

ESLintはECMAScript6をサポートしているコーディング規約チェックツールで、未使用の変数やエラーで知らせてくれます。

Prettierはコードフォーマッターと呼ばれるモノでインデントや改行などの一貫性を保ってくれるツールになります。

テスト用フレームワーク

ユニットテストなどを行うフレームワークを選択します。
今回は特に使用しないので None のまま Enter を押します。

? Choose test framework (Use arrow keys)
❯ None 
  Jest 
  AVA 

本格的なアプリケーション開発などでテストコードが必要な場合などは選択するみたいです。

レンダリングモード

レンダリングモードを選択します。
今回は静的コンテンツを作成するつもりなので Universal (SSR) のまま Enter を押します。
SPAサイトを作成する場合は十字キーで Single Page App を選択してください。

? Choose rendering mode (Use arrow keys)
❯ Universal (SSR) 
  Single Page App

開発ツール

開発ツールを選択します。
Space を押すと選択できます。
VS Codeを使用しているので選択して Enter 。

? Choose development tools 
❯◉ jsconfig.json (Recommended for VS Code)

インストール開始

ここまで選択すればインストールが開始されます。
しばらく待って以下が表示されれば完了です！！

?  Successfully created project <プロジェクト名>

  To get started:

    cd <プロジェクト名>
    npm run dev

  To build & start for production:

    cd <プロジェクト名>
    npm run build
    npm run start

ブラウザで確認

インストールが完了したら早速ブラウザで確認してみます。
上記の To get started: にあるように cd コマンドで移動しプロジェクトディレクトリに移動して起動します。¹

% cd <プロジェクト名>

% npm run dev

ブラウザで http://localhost:3000/ を開いて初期画面が開いけば無事完了です。
※終了させる場合は起動したターミナル上で control + c を押せば終了できます。

おわりに

以上で@nuxt/cli v2.11.0のインストール 〜 起動まで手順は終了です。

自身の勉強もかねて長々と書きましたが、公式ドキュメントにもインストール方法が記載されています。
バージョンが変われば対話形式の内容が変わったり、コマンド自体が変わることもあるので、最新の情報は公式ドキュメントをご参照ください。
インストール - NuxtJS

それでは！

---

1. 起動コマンドの npm run dev はインストールで作成されたpackage.json内に記載されているrun-scriptになるため、 npx nuxt でも実行することができます。 ↩

html

<html>
  <head>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <div id="app">
      <button-counter></button-counter>
      <title1 title="タイトル"></title1>
    </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
      Vue.component('button-counter', {
        data: function () {
          return {
            count: 0
          }
        },
        template: '<button @click="count++">クリック数: {{ count }}</button>'
      });

      Vue.component('title1', {
        props: ['title'],
        template: '<h3>{{ title }}</h3>'
      });
      new Vue(
        { el: '#app' } );
    </script>
  </body>
</html>

Nuxt.jsで簡単のサイトを作ってみた。

Vue.jsとNuxt.jsを学習しているので、簡単なサイトを作って見ました。

npx create-nuxt-app <title>

上記のコマンドでプロジェクトを作成します。

pagesディレクトリには、各ページのvueファイルを作成します。

今回は上記のように作成しました。
Nuxt.jsでは、Vue Routerのルーティングを自動で設定してくれます。pagesディレクトリにvueファイルを作るだけで、各ページを作ることが可能です。

componentsディレクトリには各ページで共通化したい部分を作成します。

今回はヘッダーとフッターを共通化したいので作成しました。

header.vue

<template>
  <header class="header">
    <div class="container">
      <h1>DEAL CAFE</h1>
      <nav>
        <ul class="gnav">
          <li><router-link to="/" active-class="active-list" exact>HOME</router-link></li>
          <li><router-link to="/drink" active-class="active-list" exact>DRINK</router-link></li>
          <li><router-link to="/info" active-class="active-list" exact>INFO</router-link></li>
          <li><router-link to="/contact" active-class="active-list" exact>CONTACT</router-link></li>
        </ul>
      </nav>
    </div>
  </header>
</template>

<style lang="sass" scoped>
    .header
          padding: 20px 0
          box-shadow: 0 0 1px 1px #333
          margin-bottom: 10px
          .container 
                    display: flex
                    justify-content: space-between
                    align-items: baseline
                    .gnav
                        display: flex
                        li
                          margin-left: 10px
                          a
                           &:hover
                                  border-bottom: 2px solid
    .active-list
               border-bottom: 2px solid
</style>

footer.vue

<template>
  <div class="footer">
    <div class="container">
      <p><small>DEAL CAFE</small></p>
    </div>
  </div>
</template>

<style lang="sass" scoped>
.footer
      color: #fff
      text-align: center
      background: #333
      padding: 30px
      margin-top: 300px
</style>

共通化したcomponentはdefault.vueファイルで読み込みした。

default.vue

<template>
  <div>
    <header-section />
    <nuxt />
    <footer-section />
  </div>
</template>

<script>
import header from '~/components/header.vue'
import footer from '~/components/footer.vue'
export default {
  components: {
    headerSection: header,
    footerSection: footer
  }
}
</script>

scriptのcomponentsはキャメルケースで書いて、templateの中はケバブケースでもokです。

最後にビルドして終了です。

$ npm run build

簡単ではありますが、SPAサイトの完成です。
今後はもっと複雑なものも作成していきたいです。一応GitHub Pagesにデプロイしているので、良かったご覧ください。
https://to-ko5.github.io/vueDemoHp/

※GitHub Pagesにデプロイする時は、nuxt.config.jsファイルにrouter baseを追記する必要があります。

nuxt.config.js

export default {
  router: {
    base: '/<repository-name>/'
  }
}

VueでWebデザインのポートフォリオサイト作りました。
https://portfolio-6d299.firebaseapp.com/

[Topページ]

[Portfolioページ]

Portfolioページ右上のDownloadからGit Cloneできるコマンドをコピーできるので
コマンドラインもしくはターミナル上から実行してください。

このページのデザインコードはもちろん、JS部品単位でつくったものも入れていますので
開発の際にお役に立てていただければ幸いです。

【今後】
Topページはまだ作ってないのでこちらもデザインして作り込んでいく。

前置き

Vue.jsのカスタムディレクティブをNuxt.jsで！
ローカルverとグローバルverで、
どちらでも使いやすく簡単な例で紹介。
今回は背景色を変えるだけです。

…とはいえfilterはよく使われますが
実際こちらはなかなか見かけませんね。
カスタムディレクティブの良い使い方があれば
教えていただけると嬉しいです…?

※併用する場合
同じディレクティブ名にしてしまうと
ローカルに記載された方が優先されます。
名前は分けましょう！

ローカルver

directivesで命名した物を
v-{{ name }}で記載するだけ！
今回はdiv全体に背景色をつけるため
divにv-bgを指定しております。

index.vue

<template>
  <div v-bg>
    <p>divで囲った部分の背景が変わる</p>
  </div>
</template>

<script>
export default {
 directives: {
   'bg': {
     bind(el, binding, vnode) {
       el.style.backgroundColor = 'lightgreen';
     }
   }
 },
}
</script>

グローバルver(JSファイル)

◾️パターン1
・/pluginsにjsファイルを追加
・nuxt.config.jsのpluginsに記載
・template内にv-{{ name }}を書くだけ！

file

pages/
--| index.vue

plugins/
--| bg.js

nuxt.config.js

bg.js

import Vue from 'vue'

Vue.directive('bg', {
 bind(el, binding, vnode) {
   el.style.backgroundColor = 'lightgreen';
 }
})

nuxt.config.js

plugins: [
   '~plugins/background.js'
 ],

index.vue

<template>
  <div v-bg>
    <p>divで囲った部分の背景が変わる</p>
  </div>
</template>
◾️パターン2-1
jsで直接値の指定はせず、
使用箇所で好きな値を指定できます。

bg.js

// 変更前
el.style.backgroundColor = 'green';

// 変更後
el.style.backgroundColor = binding.value;

index.vue

// 変更前
<div v-bg>

// 変更後
<div v-bg="'green'">

◾️パターン2-2

argを使用した場合です。
argはpropsのようなイメージですね。
いくつもデータを渡せます♪
https://jp.vuejs.org/v2/guide/custom-directive.html#ディレクティブフック引数

bg.js

import Vue from 'vue'

Vue.directive('bg', {
 bind(el, binding, vnode) {
   // バインドされたargが文字列backgroundだった場合の処理
   if (binding.arg === 'background') {
     el.style.backgroundColor = binding.value;
   // そうでない場合の処理
   } else {
     el.style.color = binding.value;
   }
 }
})

index.vue

<template>
  <div>
    // argは:background部分
    <div v-bg:background="'lightgreen'">
      <p>背景が変わる</p>
    </div>
    <div v-bg:color="'green'">
      <p>文字色が変わる</p>
    </div>
  </div>
</template>

このアカウントでは
Nuxt.js、Vue.jsを誰でも分かるよう、
超簡単に解説しています??
これからも発信していくので、
ぜひフォローしてください♪
https://twitter.com/aLizlab