短時間でできるNuxt3入門（Vue3, Naive UI, Tailwind CSS, pinia）
Nuxtの最新バージョンを使ってサンプルアプリを作りました。 Nuxt3の最新機能を豊富に使っています。 APIにはjsonplaceholderを使って、ユーザーやポストの情報を管理できるようなシステムとなっています。 下記が本プロジェクトの環境です。 - Nuxt 3.12.2 - pinia 2.1.7 - tailwindcss 3.4.4 - naive-ui 2.38.2 動画で学習できるコースも出してるので、ぜひご覧ください。 https://www.udemy.com/course/nuxt3-introduction/?referralCode=70826E31016926E92545
Chapters
Nuxt3のプロジェクトを作成しよう
Tailwind CSSを導入しよう
Naive UIを導入しよう
useFetchを使ってjsonplaceholderからデータを取得しよう
取得したデータをテーブル形式で表示しよう
Naive UIを使ってサイドバーを実装しよう
Tailwind CSSを使って見た目を整えよう
ユーザー一覧と同じようにポストの一覧も取得しよう
サイドバークリック時の画面遷移を実装しよう
Nuxt3のcomposables, pluginsを使ってbaseURLを共通化しよう
ログインページのUIを作成しよう
バリデーションを実装しよう
入力内容からユーザーの情報を取得しよう
piniaを導入してログインしているユーザーをストアに保存しよう
ログイン中のユーザーを画面に表示しよう
middlewareを使ってリダイレクト機能を実装しよう
ログアウト機能を実装しよう
ユーザー一覧から詳細へ遷移できるようにしよう
テーブルコンポーネントを共通化しよう
ユーザーの詳細情報を取得しよう
ローディング機能を実装しよう
ダイアログ機能を実装しよう
ユーザー詳細画面の見た目を整えよう
ユーザーの基本情報を表示しよう
ユーザーに紐づくポストの一覧を表示しよう
ユーザーに紐づくアルバムの一覧を表示しよう
ユーザーに紐づくTodoの一覧を表示しよう
ポストの詳細情報を取得して表示しよう
ユーザー新規登録ページを追加しよう
新規登録ページの見た目を整えよう
ユーザーの入力内容を取得し、バリデーションを実装しよう
フォームサブミット時にPOSTリクエストを送ろう
ユーザー編集ページを追加しよう
編集フォームの初期値にAPIから取得した値をセットしよう
ユーザー編集時にPATCHリクエストを送ろう
ユーザー削除ボタンクリック時に確認ダイアログを表示しよう
ユーザー削除時にDELETEリクエストを送ろう
Author
Topics
- 公開
- 文章量
- 約62,963字
- 価格
- 1,500円