このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 Nuxtを使ってみよう (02:21) 無料公開中
- 概要
- レッスンの構成
- 学習環境
-
#02 Codespaceを起動しよう (01:58) 無料公開中
- Codespaceの起動
- Codespaceの使い方
-
#03 VS Codeで開発していこう (01:52) 無料公開中
- VS Codeからの接続
- 拡張機能のインストール
-
#04 アプリケーションを起動しよう (02:09)
- ファイル構成の確認
- ターミナルの起動
- アプリケーションの起動
- ブラウザでの確認
-
#05 useHead()でページタイトルを設定しよう (02:21)
- app.vueの確認
- NuxtWelcome
- useHead()
-
#06 複数ページを作ってみよう (01:53)
- pagesフォルダの作成
- index.vueの作成
- about.vueの作成
-
#07 NuxtPageでページを埋め込もう (02:49)
- NuxtPage
- faviconの設定
-
#08 nuxt.config.tsに設定を加えよう (02:42)
- nuxt.config.ts
- ファビコンの設定
- 言語設定
-
#09 NuxtLinkでリンクを設定しよう (01:16)
- NuxtLink
- 動作確認
-
#10 ヘッダーとフッターを組み込もう (02:25)
- Header.vueの作成
- Footer.vueの作成
- Header、Footerコンポーネントの利用
-
#11 NuxtLayoutを使ってみよう (02:32)
- NuxtLayout
- layouts/default.vueの作成
- slot
-
#12 サイト全体のスタイルを設定しよう (02:24)
- assets/style.cssの作成
- サイト全体のスタイル設定
- nuxt.config.tsの設定
