Skip to content

Commit 8050ebe

Browse files
aster-mnchubugeeei
andauthored
docs: remove file operations instructions
* fix(composition-api): Remove instructions for file operations from tutorial * fix(routing): Remove instructions for file operations from tutorial * fix(auto-import): Remove instructions for file operations from tutorial * fix(rendering-modes): Remove instructions for file operations from tutorial --------- Co-authored-by: Ubugeeei <[email protected]>
1 parent 8cc4329 commit 8050ebe

File tree

9 files changed

+27
-8
lines changed

9 files changed

+27
-8
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// Challenge

content/1.vue/4.composition-api/index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ Nuxt では、`composables/` ディレクトリに Composables なロジック
1515
それでは、これらの特徴を踏まえて以下のステップでロジックを Composables として切り出し、再利用してみましょう。
1616

1717
1. 既存の vue ファイル(`app.vue`)の確認してください。
18-
2. カウンターロジックを Composable として切り出してください。具体的には `composables/` フォルダを作成し、その中に `useCounter.ts` というファイルを作成してください
18+
2. カウンターロジックを `composables/useCounter.ts` に切り出してください
1919
3. `app.vue` に 2 で切り出したロジックを適用してください。
2020

2121
## ヒント
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!-- Challenge -->

content/2.concepts/3.routing/index.md

+3-5
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,13 @@ console.log(route.params.id)
3838

3939
## チャレンジ
4040

41-
`/posts/[id]` というルートを作成し`/`, `/foo` からナビゲーション出来るように実装してみましょう。
41+
`/posts/[id]` というルートに対して`/`, `/foo` からナビゲーション出来るように実装してみましょう。
4242
`/posts/[id]` では、ルートパラメータから `id` を読み取り、その値を画面に表示してみましょう。
4343

4444
そのためには:
4545

46-
1. `pages` ディレクトリに `posts` ディレクトリを作成します。
47-
2. `pages/posts` ディレクトリ内に `[id].vue` ファイルを作成します。
48-
3. `[id].vue` ファイル内で `useRoute()` を使って params から `id` を取得し、画面に表示します。
49-
4. `pages/index.vue``pages/foo.vue``<NuxtLink>` コンポーネントを使って `/posts/[id]` にナビゲーションするリンクを作成します。\
46+
1. `pages/posts/[id].vue` ファイル内で `useRoute()` を使って params から `id` を取得し、画面に表示します。
47+
2. `pages/index.vue``pages/foo.vue``<NuxtLink>` コンポーネントを使って `/posts/[id]` にナビゲーションするリンクを作成します。\
5048
ここでは例として、`/posts/1` にナビゲーションするリンクを作成してみましょう。\
5149
(実際には値は任意のもので構いません)
5250

Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// Challenge

content/2.concepts/4.auto-imports/index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export default defineNuxtConfig({
4343

4444
## チャレンジ
4545

46-
実際に utils ディレクトリを作成して、Auto Import 可能な関数を実装してみましょう。
46+
実際に utils/double.ts ファイルに対して、Auto Import 可能な関数を実装してみましょう。
4747

4848
関数は任意のもので構いませんが、例として「与えられた数値を二倍にして返す `double()` 関数」を実装してみましょう。\
4949
関数が実装できたら、`app.vue` 内の template で使用して、2 倍された数値を画面に表示してみましょう。
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<h1>Rendering Modes</h1>
3+
<p>Foo</p>
4+
<p>
5+
<NuxtLink to="/">
6+
Index
7+
</NuxtLink>
8+
</p>
9+
</template>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<h1>Rendering Modes</h1>
3+
<p>Index</p>
4+
<p>
5+
<NuxtLink to="/foo">
6+
Foo
7+
</NuxtLink>
8+
</p>
9+
</template>

content/2.concepts/8.rendering-modes/index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ export default defineNuxtConfig({
113113
そのためには:
114114

115115
1. `app.vue``NuxtPage` コンポーネントを使って、ページをレンダリングします。
116-
2. `/pages/index.vue``/pages/foo.vue` を作成し`script setup` 内コンソールの出力を行います。(内容は任意のもので構いません)
116+
2. `/pages/index.vue``/pages/foo.vue` `script setup` 内コンソールの出力を行います。(内容は任意のもので構いません)
117117
3. `nuxt.config``routeRules` を設定し、`/``/foo` に対して異なるキャッシュ ルールとレンダリングモードを設定します。\
118118
今回は、`/foo``ssr: false` を設定してみましょう。
119119
4. `/` にアクセスし、コンソールの出力がサーバーとクライアントの両方で行われていることを確認します。

0 commit comments

Comments
 (0)