Nuxt.jsはVue.jsアプリケーションを構築するためのフレームワークで、シングルページアプリケーションとして構築するか、サーバサイドレンダリングを利用するか、静的サイトとしてファイルを生成するかを設定することができます。静的ファイルを生成する場合、ページごとにvueファイルを用意し、ビルドしてHTMLファイルを生成するのが基本ですが、ルーティング機能をうまく使うことで1つのvueファイルから複数のHTMLを作成することもできます。 Vue I18nはVue.js用に最適化されて作られた国際化対応用のライブラリです。今回はこの2つのライブラリを使い、多言語サイトの静的サイトジェネレータとしてNuxt.jsの開発環境を整えてみます。 前提 今回作成するサイトは下記のようにホスティングすることを想定して作ります。 https://example.co.jp/ja/（日本語） https:/
こんにちは。てぃろです。 今回はVue.jsで作ったフロントを多言語化し、日本語と英語を切り替えできるようにした話です。Vue I18nというモジュールを使用して、Vue.jsのアプリを簡単に多言語化できました。 本記事は個人的に開発したVueSlsAppというサーバーレスアプリフレームワークへ修正を入れていった過程をもとに、基本的な導入方法から独自に工夫した点も含めて解説しています。 デプロイしてあるので、以下のリンクから実際にアプリを触ってみてもらえます。（多言語済） https://vueslsapp.thiroyoshi.com/ VueSlsAppのことをご存じない方は、以下の記事を参照してみてください。
Vue I18nは、Vueアプリケーションを国際化(多言語対応)させるためのプラグインです。ページに表示するテキストを、ロケールに応じて切り替えられます。インストールから基本的な設定と使い方までは「Vue.js: Vue I18nでアプリケーションを多言語に対応させる」でご説明しました。本稿では、公式ドキュメントに解説が見当たらず悩んだことをふたつ紹介します。 01 プレースホルダーを多言語化する 実は、プレイスホルダーを使うことは推奨されないようです。そうはいっても、入力例を示すなど、使う場面は少なくないでしょう。ところが、つぎのように記述すると、式($t('placeholder'))がそのまま表示されてしまい、翻訳テキストが取り出せませんでした。
vue-i18nを使用してアプリケーションの多言語対応を行う方法を紹介します。最初に必要なパッケージをインストールします。i18n用のフォルダを新規に作成し、フォルダ構成は以下のようにします。languagesフォルダに各言語ファイルを配置します。languagesフォルダに配置する各言語ファイルの中身は以下のようにします。message.jsファイルで、各言語ファイルをまとめて読み込みます。index.jsでi18nの設定を行います。
概要 ユーザーが設定している表示言語設定に応じてvuejs-datepickerの表示言語を動的に変更するという実装をする際、vuejs-datepickerの表示言語を親コンポーネントから制御する方法に詰まったのでメモを残しておくの巻 困ったこと 親コンポーネントとvuejs-datepickerを使用している子コンポーネントが存在し、親コンポーネントから渡すpropsに応じて子コンポーネント側で使用しているvuejs-datepickerの表示言語を変更すること 解決策 全ての言語を配列としてimportし、dataオブジェクトの任意のプロパティの値として指定しておきます（下記コードの場合、all_langという名前でimportし、dataオブジェクトのlanguagesというプロパティの値としてall_langを指定しています）。 そして親コンポーネント側から使用したい言語を文字列
vue.js備忘録、第三弾。 業務で多言語対応するのに使っている技術なので、勉強の為に。 i18nとは 広くは「国際化」という事。internationalizationの先頭iと語尾nの間に18文字がある事からそう呼ばれているとか。読み方は色々あるようですが「あいじゅうはちえぬ」でも間違いではないみたい。 vue-i18nというライブラリを使う 今回はVue.jsでの導入。こちらのライブラリを使用します。 導入 まずはライブラリをインストール import Vue from 'vue' import VueI18n from 'vue-i18n'; Vue.use(VueI18n); const i18n = new VueI18n({ locale: 'ja', messages: { // 翻訳用のjson ja : require('../lang/ja.json'), en :
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く