目次

はじめに

  • Nuxt.js 3とは: Nuxt.jsの基本的な概念、Vue 3との関係性、なぜNuxt.jsを学ぶ価値があるのかについて解説します。
  • 環境構築: Nuxt.js 3プロジェクトの始め方、必要なツールや環境のセットアップについて案内します。

基本概念

  • ディレクトリ構造: Nuxt.jsのプロジェクト構造と主要なディレクトリの役割について学びます。
  • ページとルーティング: ページコンポーネントの作成方法、Nuxt.jsによる自動ルーティングの仕組みについて説明します。
  • データフェッチング: asyncDataとfetchを使用して、サーバーサイドとクライアントサイドでデータを取得する方法を習得します。

応用

  • コンポジションAPIの利用: Vue 3のコンポジションAPIをNuxt.jsプロジェクトで効果的に使用する方法について詳しく見ていきます。
  • ステート管理: Vuexの代わりにPiniaを使用したステート管理のアプローチを学びます。
  • ミドルウェア: 認証やデータの前処理など、異なるユースケースでミドルウェアを使う方法を解説します。

最適化とデプロイ

  • パフォーマンス最適化: 画像最適化、コードスプリッティング、SSRと静的サイト生成(SSG)のベストプラクティスについて学びます。
  • SEOとメタデータ管理: Nuxt.jsでのSEO対策とメタデータ管理の方法を理解します。
  • デプロイメント: VercelやNetlifyをはじめとする主要なプラットフォームへのデプロイ方法について説明します。

実践練習

  • 実践練習: 学んだ知識を活かして、実際のプロジェクトを一から構築します。このプロジェクトは、理解を深めるための最良の方法です。