diff --git a/content/1.vue/4.composition-api/.template/files/composables/useCounter.ts b/content/1.vue/4.composition-api/.template/files/composables/useCounter.ts new file mode 100644 index 0000000..0705fd4 --- /dev/null +++ b/content/1.vue/4.composition-api/.template/files/composables/useCounter.ts @@ -0,0 +1 @@ +// Challenge diff --git a/content/1.vue/4.composition-api/index.md b/content/1.vue/4.composition-api/index.md index c3462ca..ccd9e18 100644 --- a/content/1.vue/4.composition-api/index.md +++ b/content/1.vue/4.composition-api/index.md @@ -15,7 +15,7 @@ Nuxt では、`composables/` ディレクトリに Composables なロジック それでは、これらの特徴を踏まえて以下のステップでロジックを Composables として切り出し、再利用してみましょう。 1. 既存の vue ファイル(`app.vue`)の確認してください。 -2. カウンターロジックを Composable として切り出してください。具体的には `composables/` フォルダを作成し、その中に `useCounter.ts` というファイルを作成してください。 +2. カウンターロジックを `composables/useCounter.ts` に切り出してください。 3. `app.vue` に 2 で切り出したロジックを適用してください。 ## ヒント diff --git a/content/2.concepts/3.routing/.template/files/pages/posts/[id].vue b/content/2.concepts/3.routing/.template/files/pages/posts/[id].vue new file mode 100644 index 0000000..b2a2bbf --- /dev/null +++ b/content/2.concepts/3.routing/.template/files/pages/posts/[id].vue @@ -0,0 +1 @@ + diff --git a/content/2.concepts/3.routing/index.md b/content/2.concepts/3.routing/index.md index 6c0f0ba..879865b 100644 --- a/content/2.concepts/3.routing/index.md +++ b/content/2.concepts/3.routing/index.md @@ -38,15 +38,13 @@ console.log(route.params.id) ## チャレンジ -`/posts/[id]` というルートを作成し、 `/`, `/foo` からナビゲーション出来るように実装してみましょう。 +`/posts/[id]` というルートに対して、 `/`, `/foo` からナビゲーション出来るように実装してみましょう。 `/posts/[id]` では、ルートパラメータから `id` を読み取り、その値を画面に表示してみましょう。 そのためには: -1. `pages` ディレクトリに `posts` ディレクトリを作成します。 -2. `pages/posts` ディレクトリ内に `[id].vue` ファイルを作成します。 -3. `[id].vue` ファイル内で `useRoute()` を使って params から `id` を取得し、画面に表示します。 -4. `pages/index.vue` と `pages/foo.vue` に `` コンポーネントを使って `/posts/[id]` にナビゲーションするリンクを作成します。\ +1. `pages/posts/[id].vue` ファイル内で `useRoute()` を使って params から `id` を取得し、画面に表示します。 +2. `pages/index.vue` と `pages/foo.vue` に `` コンポーネントを使って `/posts/[id]` にナビゲーションするリンクを作成します。\ ここでは例として、`/posts/1` にナビゲーションするリンクを作成してみましょう。\ (実際には値は任意のもので構いません) diff --git a/content/2.concepts/4.auto-imports/.template/files/utils/double.ts b/content/2.concepts/4.auto-imports/.template/files/utils/double.ts new file mode 100644 index 0000000..0705fd4 --- /dev/null +++ b/content/2.concepts/4.auto-imports/.template/files/utils/double.ts @@ -0,0 +1 @@ +// Challenge diff --git a/content/2.concepts/4.auto-imports/index.md b/content/2.concepts/4.auto-imports/index.md index 51dce70..2b11b32 100644 --- a/content/2.concepts/4.auto-imports/index.md +++ b/content/2.concepts/4.auto-imports/index.md @@ -43,7 +43,7 @@ export default defineNuxtConfig({ ## チャレンジ -実際に utils ディレクトリを作成して、Auto Import 可能な関数を実装してみましょう。 +実際に utils/double.ts ファイルに対して、Auto Import 可能な関数を実装してみましょう。 関数は任意のもので構いませんが、例として「与えられた数値を二倍にして返す `double()` 関数」を実装してみましょう。\ 関数が実装できたら、`app.vue` 内の template で使用して、2 倍された数値を画面に表示してみましょう。 diff --git a/content/2.concepts/8.rendering-modes/.template/files/pages/foo.vue b/content/2.concepts/8.rendering-modes/.template/files/pages/foo.vue new file mode 100644 index 0000000..ef5ccaf --- /dev/null +++ b/content/2.concepts/8.rendering-modes/.template/files/pages/foo.vue @@ -0,0 +1,9 @@ + diff --git a/content/2.concepts/8.rendering-modes/.template/files/pages/index.vue b/content/2.concepts/8.rendering-modes/.template/files/pages/index.vue new file mode 100644 index 0000000..0cfaf38 --- /dev/null +++ b/content/2.concepts/8.rendering-modes/.template/files/pages/index.vue @@ -0,0 +1,9 @@ + diff --git a/content/2.concepts/8.rendering-modes/index.md b/content/2.concepts/8.rendering-modes/index.md index 8bea9b0..b6cfc3c 100644 --- a/content/2.concepts/8.rendering-modes/index.md +++ b/content/2.concepts/8.rendering-modes/index.md @@ -113,7 +113,7 @@ export default defineNuxtConfig({ そのためには: 1. `app.vue` で `NuxtPage` コンポーネントを使って、ページをレンダリングします。 -2. `/pages/index.vue` と `/pages/foo.vue` を作成し、`script setup` 内コンソールの出力を行います。(内容は任意のもので構いません) +2. `/pages/index.vue` と `/pages/foo.vue` で、`script setup` 内コンソールの出力を行います。(内容は任意のもので構いません) 3. `nuxt.config` に `routeRules` を設定し、`/` と `/foo` に対して異なるキャッシュ ルールとレンダリングモードを設定します。\ 今回は、`/foo` に `ssr: false` を設定してみましょう。 4. `/` にアクセスし、コンソールの出力がサーバーとクライアントの両方で行われていることを確認します。