orimajp

Nuxt.jsでaxios-moduleを利用する際に自作APIクラスのリクエスト実行をaxiosプラグイン配下に置く方法

概要

Nuxt.jsでaxiosモジュールを使って通信を行う場合、リクエストへ認証情報追加やエラーハンドリングなどの共通処理をaxiosプラグインに定義できる。

Vueコンポーネントなどでaxiosによる通信を行う場合はこれらの共通処理を利用することができるが、自作のAPIクラスでは利用できない問題を、APIを登録する自作プラグインの登録により解決する方法について記述する。

上手くいかないパターン

axiosを利用するAPIクラスを実装し、これをインポートして通信を行う。

plugins/axios.js

orimajp

Nuxt.jsでサーバエラーメッセージをVuetifyのSnackbarに表示する方法

概要

Nxut.jsアプリでサーバエラーを共通的な画面表示の仕組みとして、UIフレームワークVuefityのSnackbarというコンポーネントを使ったエラー表示の実装方法について説明する。

なお、今回の実装方法はVuitifyに限らず利用可能と思われる。

実装方法

1. サーバエラーメッセージを管理するためのmessageストア(Vuexによる実装)を用意
2. axiosプラグインにおいて、エラーレスポンスからメッセージを拾ってmessageストアに格納する処理を実装

orimajp

Nuxt.jsにて複数のAPIをPromise.Allで呼び出す方法

概要

Nuxt.jsの画面表示時に必要なデータを得るためのAPI呼び出しが増えると画面描画が遅くなる問題を、APIをPromise.allで呼び出すことにより回避する。

API呼び出し処理を別関数にすることによりリロード処理にも利用可能となる。

実装サンプル

コンボボックスの選択肢をAPIから取得するという利用シナリオ。

orimajp

Nuxt+Vuetifyによるコンポーネントダイアログコンポーネント

JavaScript標準のconfirm()に代わるシンプルなモーダルダイアログコンポーネントの実装。

可変項目

• ダイアログタイトル
• メッセージ
• OKボタン文言
• OKボタン押下時コールバック

orimajp

Github Pagesに公開したNuxt.jsアプリがリロードで404になる問題に対応する

Next.jsで作成したSPAアプリにおいて動的に変更されるパスに対応したページをリロードすると404 Not Foundになる問題への対応方法を記述する。

本現象の原因

Nuxt.jsでは静的ファイル生成時には動的ルーティングに対応したルーティングが無視され、動的ルーティング用ファイルが生成されないため、この現象が発生する。

静的ルーティング

/listというパスに対して、/list/index.htmlというファイルが生成される。

動的ルーティング

orimajp

var TARGET_LINES = [
  // [JR東日本]
  // 東海道方面
  {name: '東海道線', company: 'JR東日本', website: 'https://traininfo.jreast.co.jp/train_info/kanto.aspx'},
  {name: '京浜東北線', company: 'JR東日本', website: 'https://traininfo.jreast.co.jp/train_info/kanto.aspx'},
  {name: '横須賀線', company: 'JR東日本', website: 'https://traininfo.jreast.co.jp/train_info/kanto.aspx'},
  {name: '南武線', company: 'JR東日本', website: 'https://traininfo.jreast.co.jp/train_info/kanto.aspx'},
  {name: '横浜線', company: 'JR東日本', website: 'https://traininfo.jreast.co.jp/train_info/kanto.aspx'},
  {name: '伊東線', company: 'JR東日本', website: 'https://traininfo.jreast.co.jp/train_info/kanto.aspx'},
  {name: '相模線', company: 'JR東日本', website: 'https://traininfo.jreast.co.jp/train_info/kanto.aspx'},

orimajp

var token = '*********************'; // トークン

function doPost(e) {
  var verificationToken = e.parameter.token;
  if (verificationToken !== token) {
    throw new Error('Invalid token');
  }

  var translationText = e.parameter.text;
  if (translationText === '') {

orimajp

// https://gist.github.com/think49/54b074cab2145efddb48765652c74710

/**
 * eval-calculation.js
 * evaluate calculation formula.
 *
 * @version 1.0.0
 * @author think49
 * @url https://gist.github.com/think49/54b074cab2145efddb48765652c74710
 * @license http://www.opensource.org/licenses/mit-license.php (The MIT License)