Nuxt ルーティングでURLの一覧を確認する方法
Nuxtはディレクトリ構成でルーティングを自動で設定してくれるので、どういうURLが生成せれたのか確認したいことがある。 サーバーサイドのフレームワークは大抵起動するとログにURL一覧を出力してくれる。 しかし、Nuxtはnpm run devで起動すると、以下のように起動したポートは表示しれくれるものの、URL一覧を出力してくれない。 ℹ ...
Nuxt ルーティングでURLパスのidを数値チェックする
Nuxtでhttp://localhost:3000/users/:idのようにURLのパスが数値であることを検証する方法を記載する。 validateメソッドを使うことで検証できる。 環境構築 Nuxtアプリケーションをインストールする。 ルーティングはデフォルトで入っているので、特別必要なプラグインはない。 なお、ここでは`@nux ...
Composition APIでTypeScriptを使いv-modelで扱える簡易なフォームコンポーネントを作る
Composition APIでTypeScriptを使って、フォームを作るサンプルコードを書いた。 フォームのコンポーネントとしてinput[type=text]、textarea、checkbox、radio、selectの簡易なものを用意した。 フォームのコンポーネントは親コンポーネントと子コンポーネント間のデータのやりとりがハマりどころだ。だから`v- ...
nuxt-i18nで日本語と英語に対応する
nuxt-i18nでブラウザの言語を自動で検知し、日本語と英語に対応する。 locales、langDir、lazy、defaultLocale、fallbackLocale、detectBrowserLanguage、strategyオプションを設定して動作を確認していく。 環境準備 `nuxt ...
Nuxt Composition APIでv2との書き方の違いを確認した
Composition APIを使うことになったので、今までの書き方がComposition APIではどう書けばいいのか確認した。 1つのコンポーネント内での違い(data, computed, methods, watch, created, mounted)と、親子のコンポーネント間の違い(v-model, prop, emit, sync)をコー ...