Vue

VueとFirebaseでGoogleアカウントを使ったログインシステムを作る

by
ユーザーをGoogleアカウントでログインさせる

前回はGoogleが提供するFirebaseのサービス（Baas:Backend as a Service）を紹介しました。 今日は、このFirebaseとJavaScriptのフレームワークのVueを使ってユーザーのログインシステムを作ってみましょう！ まずは、基本となるメールアドレスを使ってのログインのロジックを理解することが重要になります。順に従って進めていくことをお勧めします。 完成したコードはGitHubからどうぞ。 環境 なぜGoogleアカウントを使ってログインを作る必要があるか Googleアカウントである必要はありません。Twitterでも、GitHubアカウントでもOKです。数年前から見かけるようになったGoogleアカウントを使ってログインなどの認証方法はOAuthと言います、 OAuth方法を使用することで下記のメリットがあります。 以上のことから開発のスピードが速くなることとセキュリティが強化されることが理解できます。 Firebaseは必要か 詳しいFirebaseの説明は前回の記事を参照して下さい。Firebaseはあくまでもオプショナルです。しかし、無料でバックエンドのサービスを始められること、簡単にOAuthのロジックをフロントエンドに組み込められることから使っていて損はないシステムだと思います。またクライアント側はVueで作成するので必要に応じてバックエンド側のみ、フロントエンド側のみのテクノロジーを変更することができるのもメリットになります。 Vueプロジェクトの作成 今回はViteのビルドツールを使用してVueアプリを作成します。詳しいViteの使い方はこちらを参照してください。 ではテキストエディタを開いて基本のページを作成していきます。 Emailを使ったユーザー登録 では参考例として、Emailを使用したユーザー登録を作成していきます。その後にGoogleアカウントを使用したユーザーログインを作成します。 まずは、srcフォルダにFeed.vue、Home.vue、Register.vue,SignIn.vueを作成します。Feed.vueはログインしたユーザーのみアクセスさせるように進めていきます。 次にURLのラウティングを行うためにvue-routerをインストールします。下記のコマンドを実行してください。 次にsrc/routerフォルダを作成しindex.jsファイルを作成します。 ではrouter/indewx.jsに下記の様にページとなるコンポーネントを登録していきます。 つぎに作成しtarouterをmain.jsにインポートして読み込ませます。 次にデフォルトでついてきたHelloWorld.vueを削除して、App.vueに行きます。 App.vueにrouter-viewを登録してURLごとに読み込まれるページViewをレンダーさせます。 App.vue では、各Home、SignIn、Register、Feedのコンポーネントに適当なHTMLを入れてサーバーを起動するとURLごとにViewが変わることが確認できますね。 では最後にナビゲーションバーを作成して、URLではなくボタンからユーザーがページにジャンプできるようにします。 App.vue ここまで問題がないことを確認してください。 Firebaseのプロジェクトを作成 ではFirebaseのプロジェクトを作成していきます。詳しくはFirebaseを始めようの記事を参考にしてください。 手順だけ説明します。 下記のコマンドでfirebaseのライブラリをインストールします。 下記のようなコードがでるのでコピーしておきます。 認証システムを設定する firebaseの構築タブからAuthenticationを選択します。 始めるのボタンを押します。 Emailを追加します。 次にGoogleを追加します。 これで２つのプロバイダが登録されました。 では、npm install firebaseのコマンドを実行していることを再度確認してテキストエディタに戻ります。 次に先ほどコピーしておいたfirebaseのスニペットをmain.jsに貼り付けます。 initializeApp(firebaseConfig);の部分だけ変更してOKです。 認証システムを追加する では下準備が整ったところでいよいよユーザー認証のロジックをコードにしていきます。 ①ユーザー登録（Register.vue） 以上のようなテンプレートを作成します。 Vueの基本が理解されていることを前提に進めています。もしVueの基本を学びたい方はこちらのVue講座を読んでください。 今回注目してほしいところは、firebaseのライブラリからgetAuthとcreateUserWithEmailAndPasswordをインポートしてユーザー登録を完了させ、firebaseにデータを飛ばしてあげたことです。 ではfirebaseに戻り、Usersタブを見ると新しいユーザーが登録されていることが分かります。 もちろん実際には、強いパスワードのみ許可し、パスワードの再確認のインプットも作成すべきですが、今回は省きます。 … Read more

Vue3とVuetifyでゲームみたいなメニューを作る

by
Vue ゲームのスタート画面

今日は前回紹介したVueのUIライブラリのVuetifyを使ってゲームのスタート画面のようなUIを作ってみます。 今日のテーマは、Vueの基礎、JavaScriptの基礎、CSSの基礎の復習や知識を固めるために練習する良い素材になると思います。 完成したコードはGitHubで公開しているので見てみてください。 前回の続きなのでVue＋Vuetifyのプロジェクトを用意して早速とりかかりましょう。 もし、Vuetifyを使いたくない方はViteでVueのプロジェクトを作成するだけでも同じことができるのでご安心を。 まずは、使えそうなレイアウトをコピペします。 v-containerは、コンテンツを左右の真ん中と、上下の真ん中に位置させることができるコンポーネントです。 v-rowは、v-colのwrapper（囲うもの）でflexを使って中のcol（カラム）のレイアウトをコントロールすることができます。 v-colはかならずv-rowの直下に位置されます。ここに表示されるコンテンツを入れることになります。 v-sheetは複数のコンポーネントで使えるベースラインになります。 レイアウトの作成 では、ゲームの画面のように左側にメニュー、右側にカードを作成します。 Vueitfyのv-colにはmax-widthが100%で設定されていたため、divに右と左のcolクラスを作成して別々のサイズにしました。 見やすいようにわざと色を付けていますが、後から外します。 背景画像 では、バックグラウンドの画像をPixabayで見つけて貼り付けます。これは商用無料で使える写真を探すときに便利なサイトです。 背景画像のファイルはsrc/assetsに、bg-img.jpgファイルで置いておきます。プロジェクトが大きくなったら、画像をまとめる用のフォルダを作成するべきですが今はOKとします。 ではスタイルに追加します。 このように背景画像が加わり、いい感じになりました。 メニューの作成 メニュー（ナビゲーションバー）を作成します。これは別のコンポーネントを作成してApp.vueにインポートする形にします。 では、components/Menu.vueファイルを作成して下記のように書きます。 次にApp.vueの方でこのコンポーネントをインポートしてあげます。 これでホバーエフェクトのあるメニューができました。次にメニューのタイトルをpropsとして親コンポーネントのApp.vueから子のMenu.vueに渡してあげます。 次に、メニューにガラスのような透明エフェクトをかけたいのでこのCSSツールから作成します。他にもデザインで使えるCSSツールを記事にしているので是非読んでください。 とりあえず、このような感じになりました。 コードはこのようになります。 Menu.vue コンテンツを作成 次に、各メニューをクリックした際に表示される右側のコンテンツのコンポーネントを作成します。ファイルはcomponents/Content.vueの名前にしました。これも同じようにApp.vueにインポートさせます。 コンテンツの中身もpropsでContent.vueに渡してあげるようにします。 次に、メニューボタンをクリックしたときに各コンテンツが切り替わるようにします。 App.vue Content.vueはとりあえずこのようにしておきます。 親のApp.vueからコンテンツのpropsをもらえるようにしておきます。 Content.vue これでクリックするとコンテンツが表示されるようにはなりました。 次にransform: perspective(600px) rotateY(10deg);のCSSを左と右のcolクラスに追加して、３Dに見えるようにします。 最後にボタンがアクティブの際にボタンに色を付けて完了です。 完成したイメージはこちらです。 完成したコードはこちら（GitHub）からどうぞ。

Vue3でVuetifyをインストールしよう

by
Vuetifyのインストール

Vueを使い始めてUIライブラリを探すと色々出てきますね。PrimeVue、BootstrapVue、Quasar、Buefyなど他にも選択肢はあります。今日はそのうちでも人気のVuetifyのインストールから基本的な使い方まで説明します。 Vue3の良いところ VueはReactと比べて初心者向けという位置づけで認識されがちです。しかし機能的にはReactに劣らず、書くコードの数も減ることがよくあります。個人的な意見になりますが、ReactのようにFacebookのような大企業のブランドがバックアップしていないというだけでマーケティングで負けてしまったように受けられます。 Vueは素晴らしいフレームワークで仕事でReactに縛られるという事がなければVueを使っていくべきだと思います。 なぜVuetify ①無料で使える Vuetifyはソースコードを公開しているオープンソースになります。MITライセンスなので安心して商用で使えます。必要があればソースコードをいじることもOKです。 ②フレキシブルなコンポーネント コンポーネントのカスタマイズがしやすいように作られているため個性を出しやすいです。また、Googleのマテリアルデザインをテーマに作成されているのでスッキリとした見た目でデザインができます。 ③ツールが豊富 FigmaのUIコンポーネントキットが使えます。（Figmaの使い方はこちら） Viteのビルドツールで作成されたVueにVuetifyを実装できます。 TypeScriptとJavaScriptの両方で使えます。 もし、わからに事があればDiscordのコミュニティに参加して質問ができる。などなど ViteでVueプロジェクトの作成 今回はVue CLIではなくViteを使います。Viteがスタンダードになってきているので是非使ってください。 yarnを使ってインストールする場合は次の記事を見てください。 アプリ名は自分の好きなものを付けてください。 ではプロジェクトフォルダに移動してライブラリをインストールします。 YarnでVuetifyをインストール yarnを使っている人は下記のコマンドで一発でVueとVuetifyがインストールできます。 このあとにプロジェクトフォルダに移動してテストサーバーを起動できます。 Vuetifyのインストール ではnpmを使ってVuetifyをインストールします。yarnを使わない人はこちらを使ってください。最初にも書いたようにViteでVueのプロジェクトを先に作成しておいてください。 Vuetifyの設定 では、VuetifyをインストールしたところでVue3で使えるように設定していきます。 ではsrc/main.jsを下記の様に上書きしましょう。 これで全部のコンポーネントをインポートしていますが、好みで必要なコンポーネントだけインポートすることも可能です。 ではテストサーバーを実行しておきましょう。 コンポーネントの使い方 ではsrc/App.vueにVuetifyのコンポーネントを入れてみます。 このようにグローバルでVuetifyのコンポーネントが使えるようになりました。 コンポーネントごとで使えるprosや設定が変わってくるので詳しくはドキュメンテーションを確認するようにしましょう。 スペーシング またスタイルを変更したい場合は下記の様にクラスを追加することでmarginやpaddingを変更することができます。 このようにma-5（マージン　オール）のクラスを追加することで簡単にスタイルが変更することができましたね。 詳しいスペースの使い方です。 このma-5は下記の要素が結合したものです。 {property}{direction}-{size} propertyの箇所は: directionの箇所は： sizeの箇所は 4pxずつ増えていきます: Breakpoints（ブレイクポイント） Flexboxを使ったリスポンシブなクラスを設定することができます。 デバイス コード タイプ レンジ エキストラスモール xs モバイル < 600px … Read more

NuxtJSをUbuntu/PM2/Nginxでデプロイしよう

by
Nuxtをデプロイしよう

今日はNuxtで試しに作ってみたフロントエンドロードマップのウェブアプリをUbuntuサーバーからデプロイします。 先にVueのデプロイの記事を読んでnginxを使ったサーバーを構築しておきましょう。 ちなみにAWS、Heroku, Digital Oceanなどのサーバーを使う場合は今日のようにプロキシサーバーを設定せずにデプロイできる方法があるそうなので見ておいてください。しかし、今日のNginxの設定はとても良い練習になるのでどのサーバーでも活用してみてください。 準備すること Nuxtビルドのチョイス Nuxtアプリをデプロイするにあたり、２つの方法があります。デフォルトはSSR：サーバーサイドレンダリングされる方法で設定されています。もう一つのnpm run generateのコマンドでstaticの静的サイトとしてビルドしたい場合はNuxtのコンフィグに下記のラインを追加しましょう。静的サイトの場合は普通のHTMLファイルのようにそのままデプロイできるのでプロキシサーバーの設定も不要です。 nuxt.config.ts 今回はSSRで行います。このような場合はNodeサーバーを使うためPM2でNodeのウェブサーバーを常時起動できるようにしておきます。詳しいPM2の説明は後ほど。 PM2 PM2（プロセスマネージャー２）はビルドインでロードバランスの機能がついているアプリケーションになります。このPM2がNodeJS（今回はNuxtJS）のアプリが365日常に起動されるように監視してくれます。 では、PM2をサーバーにインストールしましょう。もしローカルでLinuxで作業をしている場合は、PM２が起動するアプリを確認できるので同じようにPM2をインストールしてもOKです。 ではNuxtのプロジェクトのルート直下にecosystem.config.jsを作成し、下記の行を追加します。nameの部分は自分のアプリ名に変更しましょう。 次に下記のコマンドでPM2を起動し、NUXTのアプリが登録されるか確認してください。 実際にサーバーにコードを上げてから同じコマンドを実行します。 リポジトリをクローン では、UbuntuサーバーにSSHで接続をしたあとに、GitHubのリポジトリからNuxtのプロジェクトをクローンしましょう。もしローカルから直接ファイルを上げたい場合はSFTPなどでアップロードしてください。私はSSHクライアントはいつもMobaXtermを使っています。 Nginxのファイルを作成 Nginxをインストールしてコンフィグファイルを作成します。初めての人は理解するまでに時間がかかるかもしれませんが、それぞれのコマンドが何を操作しているのか調べるようにしましょう。 ではnanoなどのテキストエディタでNginxのコンフィグファイルを書いていきます。ここでとても重要なことを説明します。 今回のデプロイはPM2というプロセスマネージャーを使います。これで、127.0.0.1:3000にNuxtのウェブサーバーを常時起動させます。 それをNginxを使ってプロキシサーバーとしてロカールのPM2のウェブサーバーに飛ばすような形になります。 順番でいうと。。。 では、早速nginxのコンフィグを書いていきます。良い慣習としてetx/nginx/sites/available/にサイト名でコンフィグファイルを作成して下記の行を追加します。 listenはポートになります。通常は80番ポートにしてください。もしユーザーが他のポートでアクセスする場合は普通は、URLの最後にポートが必要になります。例：sankou.com:84 server_nameがホストマシンのIPアドレスです。もしドメインを取得している場合は、代わりにここにドメインを記載します。 proxy_passがPM2のアプリが起動しているURLを記載します。デフォルトで:3000なのでそのままでOKです。 ではNginxのテストをします。 OKがでれば問題なしです。 ファイヤーウォール もし80番ポート以外で設定した場合はポートを開けておくようにしましょう。 デプロイの確認 これでサイトのデプロイができました。 一応、このような感じになりました。 お疲れ様です。

NuxtにPiniaをインストールする方法

by
NuxtにPiniaをインストールする

今日はNuxtJSのウェブアプリのプロジェクトに状態管理システムのPiniaをインストールする方法を紹介します。 VueでPiniaを使ったことがある人、Nuxtのコンフィグファイルを触ったことがある人はなんとなくイメージがつかめると思います。 Piniaのインストール Nuxtのプロジェクトが設定できたところで、Piniaの公式サイトの説明に従いインストールを進めていきましょう。 コマンドラインから下記の通りPiniaをインストールします。 npmを使っている人はERESOLVE unable to resolve dependency tree errorというエラーが出るかもしれません。 その場合は、package.json:に下記の行を追加して、再度試してみて下さい。 次に、NuxtのコンフィグファイルにPiniaを登録します。 setup()の外でPiniaを使う場合 Vueの書き方で<script setup>があります。その外でPiniaを使いたい場合はpiniaオブジェクトをuseStore()に渡してあげるようにしましょう。慣習としてプロジェクトのルート直下にstoresディレクトリを作成してPiniaのファイルを格納するようにするようにします。 Piniaファイルを作成 ではsotesディレクトリ直下にJSファイルでPiniaを作成します。<script setup>に近い方法で書く方法を紹介しているので参考にしてください。この方法だとJavaScriptのやり方で書けるので見やすいと思いました。 イメージとしてはこのような感じになります。 お疲れ様です。

Nuxt3にPrimeVueをインストールする方法

by
Nuxt3にPrimeVueをインストールする方法

PrimeVueはVue.jsのUIライブラリでコンポーネントの数が多くお勧めです。今日は、SSR（サーバーサイドレンダリング）ができるVueベースのNuxtライブラリにPrimeVueを使う方法を紹介していきます。 Nuxtのプロジェクト まずは下記のコマンドでNuxt3のプロジェクトを作りましょう。 PrimeVueのインストール 次にPrimeVueをインストールします。 コンフィグファイルからインポート では、ライブラリをインストールしたところで、nuxt.config.tsファイルを開きます。 デフォルトでは何も記載されていません。 ではここにPrimeVueで使うファイルをインポートしていきます。インポートするファイルはPrimeVueの公式ページにあるので必要に応じて確認してください。 Nuxtのプラグインについて Nuxtではpluginsというフォルダーを認識して自動でVueアプリを作成する際にサーバー側でレンダーするかクライアント側でレンダーするか指定することができます。 フォルダーの構成はこのようにできます。 では公式ドキュメンテーションに従い、ファイルをインポートしていきます。 プロジェクトのルート直下にpluginsというフォルダーを作成して、primevue-plugin.jsファイルを作成しましょう。 例としてボタンのコンポーネントを使いたい場合はここで登録しておきます。Vueアプリのmain.jsと似たような感じですね。 ripple:trueはボタンなどで使われるアニメーションのことでデフォルトではfalseになっているので必要に応じて上記のようにtrueに設定してください。 コンポーネントの作成 では、PrimeVueのコンポーネントが登録できたところで、実際にNuxtでボタンを作ってみましょう。 pages/index.vueファイルを作成してデフォルトのランディングページを作成します。 詳しいページの作り方はこちらを参考にしましょう。 これで、テストサーバーを再起動するとPrimeVueのコンポーネントをFlexがちゃんとロードされていることがわかりましたね。 ではお疲れさまでした。

Nuxt.jsを始めよう：ページを追加する

by
Nuxt.js使い方

前回の記事ではNuxt.jsのセットアップの仕方を説明しました。 今日はNuxtを使ってページの追加の仕方、ラウティング（URLの設定）の仕方を説明します。Vueで構築したことがある人は、Nuxtのアプローチの仕方に関心されること間違いなしです。ユニークなレイアウトとroutingの設定方法に驚かされました。 pagesディレクトリ Nuxt.jsのルートディレクトリ（src）と同じ階層にpagesというフォルダを作成してみましょう。その中に例としてabout.vueのファイルを作成します。そうするとNuxtがこのフォルダを読み込みURLのrouting（ラウティング）をしてくれるようになります。 テスト用のウェブサーバーを起動してみてください。 まるで魔法の様です。しかし、これを読み込んでくれるおかげで、もともとあったapp.vueに変更が必要になります。 ではapp.vueを削除して、pagesの直下にindex.vueを作成してください。 このファイルがドメインの読み込み時に表示されるランディングページとして表示されるようになります。URLでいうと”/”です。 へえ。おもしろいですね。 では、URLをもっと複雑に設定したい場合は、pagesディレクトリにさらにフォルダーを作成してその中にvueファイルを作成してみます。 URL/products/index.vueはURL/productsのビューになり、URL/products/item.vueはURL/products/itemのビューになりました。 とても直感的です。 routerのパラメーター 以前にVue－RouterでURLパラメーターを設定できることを説明しました。URLにダイナミックなデータが入力されたときにそのURLのパラメーターを取得する方法です。例でいうとproducts/1やproducts/2などこの数字がユニークな商品のIDになることがあげられます。 このvueファイルは[id].vueの用に作成できます。 ファイル名の[]内にダイナミックにしたい名称を入れます。 これをuseRoute().paramsで呼び出してあげればOKです。 これでダイナミックなURLが完成できましたね。 NuxtLink しかし、このままではユーザーがURLに直接名称を入力しないといけないという非現実的な作業が発生してしまいます。ですのでナビゲーションバーを作成していきます。 NuxtLinkは自動的にインポートされるのでわざわざ<script>からインポートする必要がありません。 例としてトップページのpages/inedx.vueに下記の様にNuxtLinkを記載してみましょう。 ここで理解しておきたいのが<a>タグを使わないのでVueと同じようにSPAと同じように他のURLにアクセスができます。つまりページがリフレッシュされないのでユーザーエクスペリエンスが向上するということです。 レイアウト このままだとすべてのページにナビゲーションバーを設置しないといけないことになりますね。 そこでレイアウトを設定していくことにします。レイアウトはVueでおなじみの<slot/>で解決していきます。 ではプロジェクトのルートにlayoutsという名称でフォルダーを作成します。その中にdefault.vueを作成しましょう。 Nuxtが自動でlayouts/default.vueのファイルを監視して、<slot/>内にpageのビューを表示してくれるようになります。 カスタムレイアウト では、ページによってレイアウトが変わる場合はどうすればよいのでしょうか？ その場合はlayoutsディレクトリ直下に別のレイアウトとなるvueファイルを作成して対応することができます。 例として、アイテムの詳細ページのレイアウトをlayouts/products.vueに作成します。名前は何でも良いです。 参考例として内容を下記の様にしてナビゲーションをフッターに移動しました。 では、このレイアウトを指定したビューに使えるようにするにはどうすれば良いでしょうか？ この場合は、レイアウトを変えたいページのvueファイルに行きdefinePagemeta()を使用します。 参考例として、products/index.vueとproducts/[id].vueに下記のmetaを追加しましょう。 products/index.vue products/[id].vue これで、プロダクトページのレイアウトが変わったことが理解できましたね。 今日はNuxt.jsでページの使い方、レイアウトの使い方を学びました。 お疲れ様でした。

Nuxt.jsを始めよう

by
NuxtJSを始めよう

Reactを使っている人なら聞いたことはあるNext.js。そのVueバージョンがNuxt.jsです。Nuxt.jsはVue.jsをベースに作られたJavaScriptフレームワークです。サーバーサイドレンダリングが可能なので、より早く、SEO対策ができるウェブアプリの開発が可能になります。今日はNuxt.jsのバージョン３について解説していきます。 Nuxt.jsの強み Nuxt.jsの弱み また、ソースコードはGitHubのリポを確認してください。 Nuxt.jsを始める Nuxtのインストレーションガイドは公式サイトを参考にしました。コマンドでプロジェクトを作成していきます。バージョン３をインストールします。（Node.jsがインストールされていることが前提です。） ではライブラリがインストールされたところでデベロップメント用のサーバーを起動します。 これで初期のNuxtのセットアップが完了しました。 ファイル構成 nuxt.config.ts nuxt.config.tsはNuxtのコンフィグで使用するファイルでTypeScriptで構成されています。JavaScriptファイルの方が良い場合は.jsに変更することも可能です。このファイルでモジュールの登録やカスタムメタデータの登録をすることができます。また、ここにAPIキーなどのEnvironment Variable（環境変数）を登録することもできます。 app.vue デフォルトのルートコンポーネントになります。デフォルトでは、NuxtWelcomeのコンポーネントがマウントされるようになっていますが、これらのファイルはモジュールに埋め込まれています。Vueの場合はHelloWorldが通常のディレクトリに置かれているのでいちいち削除する必要がありましたがNuxtの場合は無視して削除する必要はありません。npm i でまたインストールされてしまうので。 .nuxt 開発の際にNuxt側で使われるディレクトリです。そのまま放っておいてください。 package.json おなじみのパッケージが一覧で記載されたコンフィグファイルです。npm i で記載されているライブラリがインストールされますね。 Welcomeページを削除 ではapp.vueにあるNuxtWelcomeを適当に入れ替えてみます。先ほども記載しましたがWelcomeNuxtのコンポーネントは削除しなくて良いです。 これでデフォルトのページがホットリロードされましたね。 お疲れ様でした。

JSひろば開発7日目：Vueアプリのデプロイとデザイン

by
JS-Hiroba-day7

JSひろばアプリもほぼ完成に近づいていきました。今日は最終的にvue-routerを入れて、URLで指定したコードのIDをコンソールに貼り付けできるようにします。これで、これからJSのチュートリアルを作成する際にリンクを貼り付けて、そこからサンプリコードを実行できるようにすることが目的です。 今後はユーザーがコードを登録できたり、シェアできるようにできたら楽しいなと思います。オープンソースなので皆さんでカスタマイズして試してください。 作業日 2022年12月28日 作業にかけた時間 6時間 合計作業時間 30時間 作業内容 モジュールインポートエラーの対応favアイコンの作成英語版に対応させるDBモデルの改修Google Analyrticsの追加ローディング画面の設定Vue-routerの追加 モジュールインポートエラーの対応 Vueアプリをnpm run buildのコマンドでプロダクション用にコンパイルするとデプロイしようとすると下記のエラーが出ました。 調べてみると、npmでインストールしたハイライトのプラグインのCSSをインポートしていることが原因の様でした。rollupでモジュール内のCSSをエクスターナルのファイルとして特例で設定しないといけないようです。 vite.config.jsで下記の様にbuildの部分を追加して再度npm run buildを実行したところ、問題が解決できました。 favアイコンの作成 Adobeのイラストレーターでブックマークに使われるアイコンを作りました。SVGで作成したのでデスクトップのブックマークでも画像がぼやけないようにしました。 英語版に対応させる 日本語だけだとユーザーが限られるので英語版に対応したアプリにさせます。このようにToggle（トグル）させるボタンをつくりRefでisJapaneseがtrueかfalseかを判定させるようにしました。このデータはPiniaに保管されグローバルにアクセスできるようにしています。 DBモデルの改修 では英語版に対応したデータがないのでDjangoのモデルを追加します。英語用のフィールドと難易度をチョイスで追加しました。 Google Analyticsの追加 Google Analyticsを追加しました。特に説明する必要はないと思いますが、headタグ内に用意されたscriptを配置しただけでOKです。　 難易度のフィルター 次にコマンドの例を初級、中級、上級に分けてソートする機能を付けました。 ボタンが順番に表示されるようになり、それに合わせてデータがフィルターされます。 Vue-Routerの追加 最後に、データベースから引っ張ってきたコードはIDでURLの最後にくっつけます。これでブログとかでコードを指定して表示させたい場合は、URLでそのまま引用できるようになります。 で、検索されたコマンドがペーストされた後に、URLにIDを飛ばしました。 URLを監視する Vue-Routerを使う一番の理由である、URLから目的のコードをコピペされた状態にするということを達成するために、watchEffect()を使いました。 これでアプリのイニシャライゼーション（初期読込）の時とURLが変わったときにフェッチしたデータをコンソールにペーストできるようになりました。 とりあえず完成とします。あとは、Django側でデータを入れて、JSの記事に使えるか試してみます。 お疲れ様です。