From 1cfb903b67df442fd8b0bd2a25d3cd95082c5383 Mon Sep 17 00:00:00 2001 From: aster-mnch Date: Mon, 29 Jul 2024 17:50:39 +0900 Subject: [PATCH 1/4] fix(composition-api): Remove instructions for file operations from tutorial --- .../4.composition-api/.template/files/composables/useCounter.ts | 1 + content/1.vue/4.composition-api/index.md | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 content/1.vue/4.composition-api/.template/files/composables/useCounter.ts 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 で切り出したロジックを適用してください。 ## ヒント From a7092563c22249c5cfe95d465bfcf512e6b5e0f2 Mon Sep 17 00:00:00 2001 From: aster-mnch Date: Mon, 29 Jul 2024 17:57:32 +0900 Subject: [PATCH 2/4] fix(routing): Remove instructions for file operations from tutorial --- .../3.routing/.template/files/pages/posts/[id].vue | 1 + content/2.concepts/3.routing/index.md | 8 +++----- 2 files changed, 4 insertions(+), 5 deletions(-) create mode 100644 content/2.concepts/3.routing/.template/files/pages/posts/[id].vue 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` にナビゲーションするリンクを作成してみましょう。\ (実際には値は任意のもので構いません) From 24782f9ba90c00a70224da12f0c1f9d63fd58624 Mon Sep 17 00:00:00 2001 From: aster-mnch Date: Mon, 29 Jul 2024 18:00:14 +0900 Subject: [PATCH 3/4] fix(auto-import): Remove instructions for file operations from tutorial --- .../2.concepts/4.auto-imports/.template/files/utils/double.ts | 1 + content/2.concepts/4.auto-imports/index.md | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 content/2.concepts/4.auto-imports/.template/files/utils/double.ts 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 倍された数値を画面に表示してみましょう。 From 6613be5b4ae29c4121258e545f41e0983adc20fb Mon Sep 17 00:00:00 2001 From: aster-mnch Date: Mon, 29 Jul 2024 18:05:21 +0900 Subject: [PATCH 4/4] fix(rendering-modes): Remove instructions for file operations from tutorial --- .../8.rendering-modes/.template/files/pages/foo.vue | 9 +++++++++ .../8.rendering-modes/.template/files/pages/index.vue | 9 +++++++++ content/2.concepts/8.rendering-modes/index.md | 2 +- 3 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 content/2.concepts/8.rendering-modes/.template/files/pages/foo.vue create mode 100644 content/2.concepts/8.rendering-modes/.template/files/pages/index.vue 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 90b1909..a1772fe 100644 --- a/content/2.concepts/8.rendering-modes/index.md +++ b/content/2.concepts/8.rendering-modes/index.md @@ -114,7 +114,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. `/` にアクセスし、コンソールの出力がサーバーとクライアントの両方で行われていることを確認します。