20191009のvue.jsに関する記事は7件です。

投稿日：2019-10-09T20:22:30+09:00

VueとCanvasでサクッと使えるルーレットアプリを作った

TL;DR

VueとCanvasでルーレットを作ったよ

ルーレットの各要素のウェイトを変えると確率を調整できるよ

レスポンシブなのでモバイルでも使えるよ

BanG Roullet!

こだわりとか

カラーテーマ

バンドリの25人のキャラのイメージカラーがルーレットの各要素に割り振られます
これがやりたかったために作ったと言っても過言ではないです
そのためルーレットの要素は25個までしか設定できません
~~バグではなく仕様です~~
ちなみにBanG RoulletというタイトルはBanG Dreamからです

UIをシンプルにした

結果の表示や、ルーレットの初期化の確認メッセージ等を除き、UIから文字を廃して直感的に操作できるようにしました
操作できるボタンはカラーにして、操作できないものはグレーにすることで視覚的なわかりやすさも意識しました

ルーレットの減速時の挙動

停止ボタンを押すと徐々に減速するようにしました
停止するのが遅すぎるとイライラするし、早すぎると抽選してる感がないので、いい塩梅に減速させるのに苦労しました
結果としてなかなかリアルな動きになったのではないかと思います

レスポンシブにしてモバイルにも対応

ルーレットを使いたいときに目の前にPCがあることって稀だと思うんです
通常はモバイルで使いたいと思うので、頑張ってCanvasの描画を維持したままリサイズできるようにしました
addEventListenerでウィンドウのリサイズされるとCanvasの幅を更新するようにしています

使った技術とかライブラリ

Vue.js

Canvas

Bootstrap

Element UI

Firebase

できるだけライブラリは利用せずに作りました（リファレンスを読むのがめんどくさかった）
setIntervalでルーレットの描画処理をかなりの回数呼び出すことになるので、その処理を重くしたくなかったというのもあります
円グラフの描画ライブラリとかを使えば、見た目をもっとよくできるかもしれませんが…

CSSフレームワークはElement UIを使用していますが、レスポンシブデザインには対応してないっぽいので結局Bootstrapも導入しました
正直Bootstrapだけで完結できる気がするので、Element UIはそのうちはがすかもしれません

デプロイ先としてFirebaseを初めて利用しましたが、サーバー側の機能はまったく使ってないので活用できてない感がすごいです
認証などの機能を利用するアプリを開発する際は使ってみたいですね

できなかったこと

本当はルーレットの針も一緒に動くようにしたかったのですが諦めました

ルーレットの低速時には、要素の境界が針に差し掛かったときに針が動くようにしないと視覚的に違和感があるため、針は止めたままにしました
単純にルーレットの減速に合わせて針の動作頻度を落とすだけならできるのですが、境界に合わせて動作させるとなるとかなり難しいです

まとめ

なかなか使いやすい操作性にできたんじゃないかと思います
要素の編集、削除、確率調整、ルーレットのリセット、リロードの機能もあるので、総じて満足いく作りにできました
ただ、要素を25個を超えて追加しようとしたときのアラートのデザインがデフォルトのままなので、UIはもう少し詰めようと思います

使った感想や、こういう機能が欲しいという要望があればコメントしてもらえると嬉しいです！

最後に、バンドリはいいぞ。

ソースコード

GitHub
https://github.com/rootsuke/BanG-Roullet

参考

こちらの記事でCanvasでルーレットを描画する着想を得ることができました
ありがとうございました
https://tech-blog.s-yoshiki.com/2019/01/1024/

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-09T18:47:47+09:00

Vue.js + moment.jsでカレンダーと連動する前日翌日ボタンをつくる

間違えや、もっと良い方法があれば教えていただけますと幸いです

必要なもの

・vue.js
・V-Calendar(カレンダーライブラリ)
・moment.js

動作

See the Pen Vue 連動するカレンダーと前日翌日ボタン by natusme (@natsume0718) on CodePen.

解説

流れとしては

１．カレンダーがDateじゃないとダメなのでdataはDateで作成
２．filterでmoment.js を用いて表示形式を変える
３．前日翌日ボタンにclickイベント設定し、dateに±1する

１．カレンダーがDateじゃないとダメなのでdataはDateで作成
HTML
<v-date-picker class="mx-2" v-model="date" :popover="{ placement: 'bottom', visibility: 'click' }">
    <button variant="outline-primary">カレンダー</button>
</v-date-picker>
JS
data: {
    date: new Date()
}
V-CalendarはDate型だと双方向バインディングできるのでDate型で作成

２．filterでmoment.js を用いて表示形式を変える

次に日付の表示部分
HTML
{{date | moment}}
JS
 filters: {
    moment: function(date) {
      return moment(date).format("YYYY-MM-DD");
    }
  }
YYYY-MM-DDの形式にフォーマットしているだけ

３．前日翌日ボタンにclickイベント設定し、dateに±1する
HTML
  <button v-on:click="subDay">前日</button> {{date | moment}}
  <button v-on:click="addDay">翌日</button>
JS
methods: {
    addDay: function() {
      const next = this.date.getDate() + 1;
      const tmp = new Date(this.date);
      tmp.setDate(next);
      this.$set(this, "date", tmp);
    },
    subDay: function() {
      const prev = this.date.getDate() - 1;
      const tmp = new Date(this.date);
      tmp.setDate(prev);
      this.$set(this, "date", tmp);
    }
  },
まず、翌日、前日を取得します。(数値が得られる)
現在のdateから一時用Date変数を作成
作成した一時用変数に翌日または、前日をセット
それをdataプロパティのdateにセット

の流れです

参考にさせていただいた記事

https://ti-tomo-knowledge.hatenablog.com/entry/2018/07/09/163051

https://blog.photosynthesic.jp/2018/10/vue-js%E3%81%A8%E3%81%AA%E3%81%8B%E3%82%88%E3%81%8F%E3%81%AA%E3%82%8D%E3%81%86%EF%BC%9A%E6%97%A5%E6%9C%AC%E6%99%82%E9%96%93%E3%81%AE%E8%A1%A8%E7%A4%BA%E3%81%ABfilter%E3%82%92%E4%BD%BF%E3%81%A3/

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-09T15:26:38+09:00

Vue.jsさわってみました

今更ですがVue.jsを試してみました。
元々興味はあったのですが、なかなか重い腰が動かずで。。
今回触ってみてもっと深く勉強したいと思い、備忘のために記事にします。

試しに作ってみた

See the Pen jOOEKVM by ricchan_k (@ricchan_k) on CodePen.

入力文字数がオーバーすると隣にエラーメッセージが出る、簡単なお問い合わせフォームを作ってみました。
作り方について、以下に書いてきます。

HTML側の記載
<body>
    <div id="vueSample">
      <div>名前</div>
      <input v-model="name" placeholder="やまだ はなこ" />
      <span class="errorMessage">{{ validateName }}</span>

         ～　中略　～

      <button @click="sendInfo">送信</button>
    </div>
<body>
入力フォームバインディング？

↑の場合だと「v-model="name"」と宣言することで、テキストボックスの中の文字が変更されたらVue内のnameも自動的に更新され、逆にVue内のnameが更新されたらHTML側のテキストボックスも更新されるという仕組みになっています。

Vue部分の記載

Vueインスタンスの生成
  new Vue({ // これ書くことでVueインスタンスが生成される
    el: '#vueSample', // Vueの利用する範囲をDOMで指定
    data: { //Vueで使うプロパティの初期値を宣言
      name: '',
      tel: '',
      toiawase: ''
    },
まずはVueインスタンスの作成や初期設定などを行っていきます。

算出プロパティの宣言
    computed: { // 算出プロパティの宣言
      validateName: function () { // validateNameプロパティの宣言
        if(this.name.length > 10) { // nameが10文字を超えた場合
          return "名前は10文字以内で入力してください";
        }
      },

      ～　中略　～
    },
次に算出プロパティを宣言します。算出プロパティとは、処理に名前を付け、処理を変数のように扱うイメージです。↑の例だと、nameが10文字超えた場合、validateNameにエラーメッセージを設定するという算出プロパティを設定しています。

イベントハンドラの設定
    methods: {
      sendInfo: function() {
        //送信ボタンが押されたらなにしようかな
      }
    }
何も処理書いていないですが、HTML側の「button @click="sendInfo" ～」のイベントが発火した場合になにするかを書きます。

使ってみて思ったこと

場合によってはjQueryで書いたほうがシンプルなのでは？という部分もありましたが、Vue.jsで書くことでよりシンプルに実現できたりして、フロントサイドの開発が楽しくなりました。
まだまだVue.jsで出来ることはありそうなので、今後も勉強を続けていきたいです。

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-09T13:58:16+09:00

１０分でわかる：Vue.jsとaxios を利用した API の使用-初心者向け

はじめに

皆さん、こんにちは！Webシステム開発エンジニアの蘭です！
今日は【Vue.jsとaxios を使って、APIからJson型データの取り扱い】について語りたいと思います。

※Vue.jsについて知りたい方こちらも見てください。
　　１０分で基礎がわからるVue.js-入門

やりたいこと：【APIで高機能なシングルページアプリケーション（SPA）を構築】

現在APIはWebアプリの開発にはデータのやり取りとして主な窓口となってます。そこで今回、高機能なシングルページアプリケーション（SPA）を構築したいと思い、フロントではVue.jsとaxiosを使用します。

・シングルページアプリケーション（SPA）の構築-非同期
・APIでJson型データのやり取り
・Vueの単一ファイルコンポーネント（.vue）でhtml、css、Javascriptを単一ファイルで管理することで、後修正が便利。

1.実行環境

・vue.js
・axios

2.やってみよう！

開発の際npmかyarnでvueとaxiosをインストールします。
vue_npm_install.
npm install vue
axios_npm_install.
npm install --save-dev axios
試しであれば、CDNで

・https://cdn.jsdelivr.net からVue.jsとaxiosを読み込みます。
vue_cdn.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
axios_cdn.
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
基本的な例

・以下の内容はこちらを引用

今回はCoinDesk APIを利用して Bitcoin の価格を表示します。
まずAPIの中身を見てみよう。

mountライフサイクルフックを利用し、dataプロパティにaxiosで取得したJsonデータを格納します。

See the Pen Vue__axios_API by Uramaya (@uramaya) on CodePen.

実例: データの操作

・API から取得したデータを表示

See the Pen Vue__axios_API２ by Uramaya (@uramaya) on CodePen.

・API から取得したデータから必要な情報だけを表示
filterを使用して小数点以下を2桁に整えます。

See the Pen
WNNvoqp by Uramaya (@uramaya)
on CodePen.

・エラー処理
APIの取得にエラーが発生した場合、理由を把握します。

よくあるエラー原因：
・API がダウンしている。
・リクエストが間違っている。
・API は予期した形式で情報を渡さなかった。

axios コールでは、 catch を使用してエラー原因を取得します。

See the Pen Vue__axios_API_Error by Uramaya (@uramaya) on CodePen.

axiosライブラリをもっと知る

現在REST APIでは以下の通信種類があります：

・GET (参照)
・POST (登録)
・PUT (更新)
・DELETE (削除)

上記の例はGET (参照)ですが、登録や更新、削除の通信を行う場合は、以下の記事をご参考ください。
　　・axiosライブラリを使ってリクエストする

おまけに

今回はaxiosを使いましたが、APIでJsonデータを取得する方法はaxiosだけではありません。他にVueではFetch APIというネイティブAPIがあります。

Fetch API
・利点：外部リソースを読み込む必要がない。
・欠点： polyfill を使用する必要があり、全てのブラウザーでサポートされてるとは限りません。（特にIE）
polyfill：JavaScriptのブラウザごとの互換性をポリフィル・Babelで解決する！

上記の原因でaxiosを好む方も多いようですね。

See the Pen Vue__axios_API_Fetch by Uramaya (@uramaya) on CodePen.

まとめ

いかがでしょうか。
今回はVue.jsとaxiosの使用方法についての簡単な紹介をしました。
是非開発でも使ってみてください！:D

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-09T03:49:23+09:00

最近話題のヘッドレスCMS「microCMS」+Nuxtでサイトを作った話

microCMS+Nuxt+Netlifyでサイトを作りました。

new shitです。みてくれたらうれしいです。。https://t.co/8pouvxCCq8
— ゆ (@uchoco898) October 8, 2019

twitterはじめたてでエンジニアさんをフォローしまくりたいのでよかったらフォローして欲しいです。
使用技術

・Nuxt.js
・microCMS
・Netlify
のJAMstack構成です。

この記事の目的

僕はWordPressが嫌いです。ついでに言うとJQueryも使いたくないです。でも実務ではまだまだ使われているのが現状なのではないでしょうか？僕は使ってますよ（T T）
microCMSを触ってみて、クライアントワークでもreactとかvue+ヘッドレスCMSがWordPressに取って代われる可能性を大いに感じたので、それを少しでも応援したいと思い書きました。僕は普段web制作会社でアルバイトしているのでweb制作会社のクライアントワーク視点になっていると思います。

microCMSのいいところ

日本製！全てが日本語！！！

他にヘッドレスCMSというとContentfulなどが有名だと思いますが、特にクライアントにコンテンツの更新作業をしてもらう場合など、英語の管理画面を触ってもらうのは気が引けます。その点でmicroCMSは日本人が使うハードルが他のヘッドレスCMSに比べて圧倒的にハードルが低いです。これだけでも使う理由になると思います。

UIがわかりやすい

そしてmicroCMSはUIがとてもモダンですっきりとしています。

こんな感じでどこを触ればどのようなことが起きるのか想像でき、とてもわかりやすい構成だと思います。

クライアントに必要な部分だけを見せられる

少しUIがわかりやすいと被りますが、microCMSは管理画面上でクライアントに必要な部分（更新可能なコンテンツ部分）だけを見せて、不必要な部分（開発側の設定など）が見えにくい構成になっているなと感じます。これの何が素晴らしいかというと、例えばWordPressでは、管理画面のサイドバーからテーマを変えることもできれば、パーマリンクの設定を変えることもできてしまいます、プラグインを導入すると、その設定項目も管理画面に表示されます。そして、運用していく上でそれらを不用意に変えてしまい、表示部分がおかしくなってしまったりというのはよくある話ではないでしょうか？このようなリスクを低くできますし、単純にwebサイトを商品とした時の完成度も高くなると思います。
開発ロードマップにも「開発者と編集者で表示するメニューを変える」とあるのでその辺を意識して開発されているのだなと思います。

月100GBまで無料

Netlifyに静的ホスティングしていて一週間でだいたい0.05GBぐらい使用しました。これに関してはプロジェクトによりそれぞれだと思いますが、僕は１GBも行かないと思います。

どんどん使いやすく改善されている

開発スピードがとても早く、こんな記事を書いている今日も管理画面上のドラッグ＆ドロップで記事の並べ替えができるようになりました。開発している会社様の熱意が伝わってきてずっと使います！！という気持ちになります。

技術的なところも少しだけ書いてみる

Nuxt.jsとヘッドレスCMSを使ったサイトの構築はNuxt.jsとContentfulでサイトを作ってみた系の記事がたくさんあるのでそれらを読めばなんとかなるかと思いまので、Nuxt.jsにおけるmicroCMSでのデータの取得部分のコードを載せておこうと思います。
超経験豊富なエンジニアではないので参考にならないかもしれませんが、少しでも導入の助けになれば幸いです。

データの取得部分
index.vue
export default = {
....
async asyncData({env}) {
    const myHttpClient = axios.create({
      baseURL: 'https://hogehoge.microcms.io/api/v1/'//自分が設定したドメイン.microcms.io/api/v1/です
      headers: {
        'X-API-KEY': 'xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx'//与えられるAPI-KEY
      }
    })
    const [Object1, Object2, Object3, Object4] = await Promise.all([
      //https://hogehoge.microcms.io/api/v1/endpoint1~4からデータを取ってくる。
      myHttpClient.get('endpoint1'),//ここはmicrocmsで設定したエンドポイント名です。
      myHttpClient.get('endpoint2'),
      myHttpClient.get('endpoint3'),
      myHttpClient.get('endpoint4')
    ])
    return { Object1, Object2, Object3, Object4 }
  },
.....
}
これでdataに情報が格納されるので、あとは煮るなり焼くなり好きにできます。

nuxt generateすると同じだと思いますが、API-KEYを直接打ち込まず、環境変数に置き換えるにはこちらの記事が参考になります。
Nuxt.jsにおけるenvファイルの利用(初学者向けハンズオン)
これを参考に書き換えると
.env
API_KEY = xxxxx-xxxxxxx-xxxxxx-xxxxx
baseUrl= https://hogehoge.microcms.io/api/v1
余談ですが、僕は.envファイルのAPI_KEYとbaseUrlにずっと""をつけていて2時間ぐらい悩んでました。
nuxt.config.js
require('dotenv').config()
const { API_KEY, baseUrl } = process.env
module.exports = {
....
 env: {
    API_KEY: process.env.API_KEY,
    baseUrl
  },
....
}
データの取得部分(環境変数導入ver)
index.vue
export default = {
....
async asyncData({env}) {
    const myHttpClient = axios.create({
      baseURL: env.baseUrl//env.設定した名前　です
      headers: {
        'X-API-KEY':env.API_KEY//env.設定した名前　です
      }
    })
    const [Object1, Object2, Object3, Object4] = await Promise.all([
      //https://hogehoge.microcms.io/api/v1/endpoint1~4からデータを取ってくる。
      myHttpClient.get('endpoint1'),//ここはmicrocmsで設定したエンドポイント名です。
      myHttpClient.get('endpoint2'),
      myHttpClient.get('endpoint3'),
      myHttpClient.get('endpoint4')
    ])
    return { Object1, Object2, Object3, Object4 }
  },
.....
となります。

まとめ

以上microCMSを応援する記事でした。
無料で使えますし、とりあえず触ってみることをオススメします！

PS

基本ReactとかVueとか使って制作してる制作会社さんありませんか？
あったらお話聞きたいです。

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-09T03:49:23+09:00

最近話題のヘッドレスCMS「MicroCMS」+Nuxtでサイトを作った話

MicroCMS+Nuxt+Netlifyでサイトを作りました。

new shitです。みてくれたらうれしいです。。https://t.co/8pouvxCCq8
— ゆ (@uchoco898) October 8, 2019

twitterはじめたてでエンジニアさんをフォローしまくりたいのでよかったらフォローして欲しいです。
使用技術

・Nuxt.js
・MicroCMS
・Netlify
のJAMstack構成です。

この記事の目的

僕はWordpressが嫌いです。ついでに言うとjqueryも使いたくないです。でも実務ではまだまだ使われているのが現状なのではないでしょうか？僕は使ってますよ（T T）
MicroCMSを触ってみて、クライアントワークでもreactとかvue+ヘッドレスCMSがwordpressに取って代われる可能性を大いに感じたので、それを少しでも応援したいと思い書きました。僕は普段web制作会社でアルバイトしているのでweb制作会社のクライアントワーク視点になっていると思います。

MicroCMSのいいところ

日本製！全てが日本語！！！

他にヘッドレスCMSというとContentfulなどが有名だと思いますが、特にクライアントにコンテンツの更新作業をしてもらう場合など、英語の管理画面を触ってもらうのは気が引けます。その点でMicroCMSは日本人が使うハードルが他のヘッドレスCMSに比べて圧倒的にハードルが低いです。これだけでも使う理由になると思います。

UIがわかりやすい

そしてMicroCMSはUIがとてもモダンですっきりとしています。

こんな感じでどこを触ればどのようなことが起きるのか想像でき、とてもわかりやすい構成だと思います。

クライアントに必要な部分だけを見せられる

少しUIがわかりやすいと被りますが、MicroCMSは管理画面上でクライアントに必要な部分（更新可能なコンテンツ部分）だけを見せて、不必要な部分（開発側の設定など）が見えにくい構成になっているなと感じます。これの何が素晴らしいかというと、例えばwordpressでは、管理画面のサイドバーからテーマを変えることもできれば、パーマリンクの設定を変えることもできてしまいます、プラグインを導入すると、その設定項目も管理画面に表示されます。そして、運用していく上でそれらを不用意に変えてしまい、表示部分がおかしくなってしまったりというのはよくある話ではないでしょうか？このようなリスクを低くできますし、単純にwebサイトを商品とした時の完成度も高くなると思います。
開発ロードマップにも「開発者と編集者で表示するメニューを変える」とあるのでその辺を意識して開発されているのだなと思います。

月100GBまで無料

Netlifyに静的ホスティングしていて一週間でだいたい0.05GBぐらい使用しました。これに関してはプロジェクトによりそれぞれだと思いますが、僕は１GBも行かないと思います。

どんどん使いやすく改善されている

開発スピードがとても早く、こんな記事を書いている今日も管理画面上のドラッグ＆ドロップで記事の並べ替えができるようになりました。開発している会社様の熱意が伝わってきてずっと使います！！という気持ちになります。

技術的なところも少しだけ書いてみる

Nuxt.jsとヘッドレスCMSを使ったサイトの構築はNuxt.jsとContentfulでサイトを作ってみた系の記事がたくさんあるのでそれらを読めばなんとかなるかと思いまので、nuxt.jsにおけるmicroCMSでのデータの取得部分のコードを載せておこうと思います。
超経験豊富なエンジニアではないので参考にならないかもしれませんが、少しでも導入の助けになれば幸いです。

データの取得部分
index.vue
export default = {
....
async asyncData({env}) {
    const myHttpClient = axios.create({
      baseURL: 'https://hogehoge.microcms.io/api/v1/'//自分が設定したドメイン.microcms.io/api/v1/です
      headers: {
        'X-API-KEY': 'xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx'//与えられるAPI-KEY
      }
    })
    const [Object1, Object2, Object3, Object4] = await Promise.all([
      //https://hogehoge.microcms.io/api/v1/endpoint1~4からデータを取ってくる。
      myHttpClient.get('endpoint1'),//ここはmicrocmsで設定したエンドポイント名です。
      myHttpClient.get('endpoint2'),
      myHttpClient.get('endpoint3'),
      myHttpClient.get('endpoint4')
    ])
    return { Object1, Object2, Object3, Object4 }
  },
.....
}
これでdataに情報が格納されるので、あとは煮るなり焼くなり好きにできます。

nuxt generateすると同じだと思いますが、API-KEYを直接打ち込まず、環境変数に置き換えるにはこちらの記事が参考になります。
Nuxt.jsにおけるenvファイルの利用(初学者向けハンズオン)
これを参考に書き換えると
.env
API_KEY = xxxxx-xxxxxxx-xxxxxx-xxxxx
baseUrl= https://hogehoge.microcms.io/api/v1
余談ですが、僕は.envファイルのAPI_KEYとbaseUrlにずっと""をつけていて2時間ぐらい悩んでました。
nuxt.config.js
require('dotenv').config()
const { API_KEY, baseUrl } = process.env
module.exports = {
....
 env: {
    API_KEY: process.env.API_KEY,
    baseUrl
  },
....
}
データの取得部分(環境変数導入ver)
index.vue
export default = {
....
async asyncData({env}) {
    const myHttpClient = axios.create({
      baseURL: env.baseUrl//env.設定した名前　です
      headers: {
        'X-API-KEY':env.API_KEY//env.設定した名前　です
      }
    })
    const [Object1, Object2, Object3, Object4] = await Promise.all([
      //https://hogehoge.microcms.io/api/v1/endpoint1~4からデータを取ってくる。
      myHttpClient.get('endpoint1'),//ここはmicrocmsで設定したエンドポイント名です。
      myHttpClient.get('endpoint2'),
      myHttpClient.get('endpoint3'),
      myHttpClient.get('endpoint4')
    ])
    return { Object1, Object2, Object3, Object4 }
  },
.....
となります。

まとめ

以上MicroCMSを応援する記事でした。
無料で使えますし、とりあえず触ってみることをオススメします！

PS

基本ReactとかVueとか使って制作してる制作会社さんありませんか？
あったらお話聞きたいです。

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-09T01:37:09+09:00

Nuxt.jsで同一URLのまま多言語化（i18n）を行う

Nuxt.jsで多言語化を行うには、nuxt-i18nを使用することが一般的かもしれません。
これも使いやすいのですが、言語毎にパスに /en が付くなどURLが変わってしまうので、同一URLのまま言語切替ができないか試してみました。

まずはvue-i18nを導入

今回はnuxt-i18nではなく、vue-i18nを使用します。
npm install --save vue-i18n
Cookieを使用するためにcookie-universal-nuxtを導入

言語設定をstoreに保存してページ読み込み時に保存した言語を適用したかったのですが、SSR時にstoreの情報を読み込むことはできないので、Cookieに言語設定を保存することにします。
cookie-universal-nuxtというモジュールがあるらしく、今回はこれを使ってみます。

[参考] Nuxt.jsでCookieを使って閲覧したデータを取得する方法
npm install --save cookie-universal-nuxt
nuxt.config.js も更新します。
nuxt.config.js
modules: [
  ['cookie-universal-nuxt', { parseJSON: false }]
],
各言語のファイルを作成

各言語のファイルを作成します。
今回は日本語（ja）と英語(en)を想定しています。
ルート直下に locales というディレクトリを作成し、 ja.json と en.json というファイルを置きましょう。
locales/ja.json
{
  "title": "天使にラブソングを"
}
locales/en.json
{
  "title": "SISTER ACT"
}
pluginsディレクトリ内にvue-i18nの設定を追加

Coockieに保存した言語設定（ ja or en ）を読み込んで適用します。
設定されていない場合は、日本語が適用されるようにしています。
plugins/vue-i18n.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

export default ({ app }) => {
  const locale = app.$cookies.get('locale') || 'ja';
  app.i18n = new VueI18n({
    locale: locale,
    fallbackLocale: 'ja',
    messages: {
      'en': require('~/locales/en.json'),
      'ja': require('~/locales/ja.json'),
    },
  });
}
nuxt.config.jsに設定を追加

お約束のやつ。
nuxt.config.js
plugins: [
  '@/plugins/vue-i18n'
],
実際に言語切替を実行してみよう

とりあえず、サンプルのページを作りました。
pages/index.vue
<template lang="pug">
.container
  p {{ $t('title') }}
  v-btn(@click="toggleLocale()") 切り替え
</template>

<script>
export default {
   asyncData({ app }) {
    const locale = app.$cookies.get('locale') || 'ja';
    return {
      isJa: locale === 'ja'
    }
  },
  methods: {
    toggleLocale() {
      this.isJa = !this.isJa;
      const locale = this.isJa ? 'ja' : 'en'
      this.$cookies.set('locale', locale);  // localeをCookieに保存
      this.$i18n.locale = locale;           // 言語を切り替え
    }
  }
}
</script>
こんな感じで切り替わります↓（URLは変わりません）

this.$cookies.set('locale', locale); の部分で言語設定をCookieに保存しているので、画面を更新した際も前回設定された言語が適用されます。

以上でやりたいことは達成できました！

結論

「SISTER ACT」の邦題を「天使にラブソングを」にしたセンスすごい。

　 Tweet
Qiitaで続きを読む