Nuxtはディレクトリ構成でルーティングを自動で設定してくれるので、どういうURLが生成せれたのか確認したいことがある。 サーバーサイドのフレームワークは大抵起動するとログにURL一覧を出力してくれる。 しかし、Nuxtはnpm run devで起動すると、以下のように起動したポートは表示しれくれるものの、URL一覧を出力してくれない。 ℹ ...

Nuxtでhttp://localhost:3000/users/:idのようにURLのパスが数値であることを検証する方法を記載する。 validateメソッドを使うことで検証できる。 環境構築 Nuxtアプリケーションをインストールする。 ルーティングはデフォルトで入っているので、特別必要なプラグインはない。 なお、ここでは`@nux ...

Composition APIでTypeScriptを使って、フォームを作るサンプルコードを書いた。 フォームのコンポーネントとしてinput[type=text]、textarea、checkbox、radio、selectの簡易なものを用意した。 フォームのコンポーネントは親コンポーネントと子コンポーネント間のデータのやりとりがハマりどころだ。だから`v- ...

nuxt-i18nでブラウザの言語を自動で検知し、日本語と英語に対応する。 locales、langDir、lazy、defaultLocale、fallbackLocale、detectBrowserLanguage、strategyオプションを設定して動作を確認していく。 環境準備 `nuxt ...

Composition APIを使うことになったので、今までの書き方がComposition APIではどう書けばいいのか確認した。 1つのコンポーネント内での違い(data, computed, methods, watch, created, mounted)と、親子のコンポーネント間の違い(v-model, prop, emit, sync)をコー ...