File tree 9 files changed +27
-8
lines changed
.template/files/composables
.template/files/pages/posts
9 files changed +27
-8
lines changed Original file line number Diff line number Diff line change
1
+ // Challenge
Original file line number Diff line number Diff line change @@ -15,7 +15,7 @@ Nuxt では、`composables/` ディレクトリに Composables なロジック
15
15
それでは、これらの特徴を踏まえて以下のステップでロジックを Composables として切り出し、再利用してみましょう。
16
16
17
17
1 . 既存の vue ファイル(` app.vue ` )の確認してください。
18
- 2 . カウンターロジックを Composable として切り出してください。具体的には ` composables/ ` フォルダを作成し、その中に ` useCounter.ts ` というファイルを作成してください 。
18
+ 2 . カウンターロジックを ` composables/useCounter.ts ` に切り出してください 。
19
19
3 . ` app.vue ` に 2 で切り出したロジックを適用してください。
20
20
21
21
## ヒント
Original file line number Diff line number Diff line change
1
+ <!-- Challenge -->
Original file line number Diff line number Diff line change @@ -38,15 +38,13 @@ console.log(route.params.id)
38
38
39
39
## チャレンジ
40
40
41
- ` /posts/[id] ` というルートを作成し 、 ` / ` , ` /foo ` からナビゲーション出来るように実装してみましょう。
41
+ ` /posts/[id] ` というルートに対して 、 ` / ` , ` /foo ` からナビゲーション出来るように実装してみましょう。
42
42
` /posts/[id] ` では、ルートパラメータから ` id ` を読み取り、その値を画面に表示してみましょう。
43
43
44
44
そのためには:
45
45
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] ` にナビゲーションするリンクを作成します。\
50
48
ここでは例として、` /posts/1 ` にナビゲーションするリンクを作成してみましょう。\
51
49
(実際には値は任意のもので構いません)
52
50
Original file line number Diff line number Diff line change
1
+ // Challenge
Original file line number Diff line number Diff line change @@ -43,7 +43,7 @@ export default defineNuxtConfig({
43
43
44
44
## チャレンジ
45
45
46
- 実際に utils ディレクトリを作成して 、Auto Import 可能な関数を実装してみましょう。
46
+ 実際に utils/double.ts ファイルに対して 、Auto Import 可能な関数を実装してみましょう。
47
47
48
48
関数は任意のもので構いませんが、例として「与えられた数値を二倍にして返す ` double() ` 関数」を実装してみましょう。\
49
49
関数が実装できたら、` app.vue ` 内の template で使用して、2 倍された数値を画面に表示してみましょう。
Original file line number Diff line number Diff line change
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 number Diff line number Diff line change
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 >
Original file line number Diff line number Diff line change @@ -113,7 +113,7 @@ export default defineNuxtConfig({
113
113
そのためには:
114
114
115
115
1 . ` app.vue ` で ` NuxtPage ` コンポーネントを使って、ページをレンダリングします。
116
- 2 . ` /pages/index.vue ` と ` /pages/foo.vue ` を作成し 、` script setup ` 内コンソールの出力を行います。(内容は任意のもので構いません)
116
+ 2 . ` /pages/index.vue ` と ` /pages/foo.vue ` で 、` script setup ` 内コンソールの出力を行います。(内容は任意のもので構いません)
117
117
3 . ` nuxt.config ` に ` routeRules ` を設定し、` / ` と ` /foo ` に対して異なるキャッシュ ルールとレンダリングモードを設定します。\
118
118
今回は、` /foo ` に ` ssr: false ` を設定してみましょう。
119
119
4 . ` / ` にアクセスし、コンソールの出力がサーバーとクライアントの両方で行われていることを確認します。
You can’t perform that action at this time.
0 commit comments