Nuxt.js

こんにちは、かつコーチです。Nuxtシリーズもいよいよ最終回です。これまでpages・layouts・composables・server/apiなど、各ディレクトリの役割を個別に解説してきました。今回はそれらを俯瞰し、大規模プロジェクトで...

こんにちは、かつコーチです。先日、案件で作っていた管理画面で、useFetchが同じAPIを2回叩いていることに気づきました。ネットワークタブを見ても1回しか通信していないのに、サーバーログには同じリクエストが2件記録されていました。原因を...

こんにちは、かつコーチです。これまでNuxt.jsシリーズでは、ルーティングやデータ取得、サーバーAPIなど基本機能を一通り解説してきました。ここからは少し毛色を変えて、実践Tips・つまずき解決編です。今回は、Nuxtを触っていると本当に...

こんにちは、かつコーチです。ローカルで動くようになったNuxtアプリを、いよいよ世界に公開したいというタイミングだと思います。Nuxtアプリのデプロイ先としてよく選ばれるのが、VercelとNetlifyという2つのホスティングサービスです...

こんにちは、かつコーチです。コンポーネントを作るたびに、ブラウザで手動確認していませんか。画面が増えてくると、修正のたびに全ページを目視確認するのは現実的ではなくなります。そこで今回は、Nuxtの公式テストツールである@nuxt/test-...

こんにちは、かつコーチです。Nuxtでアプリを作っていると、必ずぶつかるのが認証機能の実装です。自前でCookieやセッションを設計してもいいのですが、OAuth連携やパスワードハッシュ化まで含めると、意外と実装コストが高くなります。今回は...

こんにちは、かつコーチです。前回は server/api を使って、Nuxtアプリの中に自前のAPIを作る方法を解説しました。今回は、そのAPIから取得したデータや、ログイン情報のようにアプリ全体で使い回したい状態を管理する Pinia（P...

こんにちは、かつコーチです。前回は useFetch ・ useAsyncData を使ってAPIからデータを取得する方法を解説しました。今回はその取得先、つまり「APIそのもの」をNuxtアプリの中に作る方法を扱います。「バックエンドを別...

こんにちは、かつコーチです。Nuxt.jsでAPIからデータを取得しようとすると、必ず出てくるのが useFetch と useAsyncData という2つのComposable（Composable：Vueの合成関数。状態やロジックをま...

こんにちは、かつコーチです。前回は.vueを使った動的ルート・ネストされたルートの書き方を解説しました。今回は「ログインしていないユーザーを弾く」など、ページ遷移そのものを制御するルートミドルウェアを扱います。「未ログインなのに管理画面が見...

こんにちは、かつコーチです。前回はlayouts/を使った共通レイアウトの管理方法を解説しました。今回は一歩進んで「/posts/1のようにIDが変わるページ」を作る動的ルートを扱います。「ブログ記事の詳細ページってどう作るの」という悩みを...

こんにちは、かつコーチです。前回はpages/ディレクトリのファイルベースルーティングを解説しました。今回は、ヘッダーやフッターなど「全ページ共通の見た目」をまとめるlayouts/ディレクトリを扱います。「ページごとに同じヘッダーをコピペ...

こんにちは、かつコーチです。前回、Nuxt.jsのプロジェクトを実際に作成しました。今回は、Nuxtの中でも特につまずきやすい「ルーティング」の仕組みを解説します。Vue Router（Vue.js標準のルーティングライブラリ）を自分で設定...

こんにちは、かつコーチです。前回、Nuxt.jsがどんなフレームワークなのかを解説しました。今回はいよいよ、実際に手元でNuxt.jsのプロジェクトを作成していきます。コマンドをコピペするだけでも動きますが、意味も理解しながら進めましょう。...