8000 feat: content/2.concepts/6.layout (#50) · vuejs-jp/learn.nuxt.com@ce9314f · GitHub
[go: up one dir, main page]
Skip to content
This repository was archived by the owner on May 1, 2025. It is now read-only.

Commit ce9314f

Browse files
ubugeeeiubugeeei
authored
feat: content/2.concepts/6.layout (#50)
1 parent ee4c356 commit ce9314f

File tree

7 files changed

+139
-1
lines changed

7 files changed

+139
-1
lines changed

‎content/2.concepts/6.layout/.template/files/app.vue

Lines changed: 5 additions & 0 deletions
< 8000 /tbody>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<NuxtLayout>
3+
<NuxtPage />
4+
</NuxtLayout>
5+
</template>

‎content/2.concepts/6.layout/.template/files/layouts/default.vue

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div class="view">
3+
<header>
4+
header
5+
</header>
6+
<main>
7+
<slot />
8+
</main>
9+
<footer>
10+
footer
11+
</footer>
12+
</div>
13+
</template>
14+
15+
<style scoped>
16+
.view {
17+
display: flex;
18+
flex-direction: column;
19+
height: 100vh;
20+
width: 100vw;
21+
}
22+
23+
header {
24+
background-color: #333;
25+
color: white;
26+
padding: 1rem;
27+
}
28+
29+
main {
30+
flex: 1;
31+
padding: 1rem;
32+
}
33+
34+
footer {
35+
background-color: #333;
36+
color: white;
37+
padding: 1rem;
38+
}
39+
</style>

‎content/2.concepts/6.layout/.template/files/layouts/no-header.vue

8000 Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<div class="view">
3+
<main>
4+
<slot />
5+
</main>
6+
<footer>
7+
footer
8+
</footer>
9+
</div>
10+
</template>
11+
12+
<style scoped>
13+
.view {
14+
display: flex;
15+
flex-direction: column;
16+
height: 100vh;
17+
width: 100vw;
18+
}
19+
20+
main {
21+
flex: 1;
22+
padding: 1rem;
23+
}
24+
25+
footer {
26+
background-color: #333;
27+
color: white;
28+
padding: 1rem;
29+
}
30+
</style>

‎content/2.concepts/6.layout/.template/files/pages/foo.vue

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script setup lang="ts">
2+
definePageMeta({
3+
layout: 'no-header',
4+
})
5+
</script>
6+
7+
<template>
8+
<h1>Foo</h1>
9+
<NuxtLink to="/">
10+
/Index
11+
</NuxtLink>
12+
</template>

‎content/2.concepts/6.layout/.template/files/pages/index.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<template>
2+
<h1>Index</h1>
3+
<NuxtLink to="/foo">
4+
/Foo
5+
</NuxtLink>
6+
</template>

‎content/2.concepts/6.layout/.template/index.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import type { GuideMeta } from '~/types/guides'
2+
3+
export const meta: GuideMeta = {
4+
startingFile: 'pages/index.vue',
5+
features: {
6+
fileTree: true,
7+
},
8+
}

‎content/2.concepts/6.layout/index.md

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,42 @@
22
ogImage: true
33
---
44

5-
# Layout
5+
# レイアウト
6+
7+
Nuxt は UI パターンを再利用可能にするための機能を提供しています。\
8+
layout は `~/layouts` デイレクトリに実装され、`app.vue` で `NuxtLayout` を使用することで適応されます。\
9+
layout は各ページごとに `definePageMeta` を通して選択することができます。
10+
11+
```
12+
-| layouts/
13+
---| default.vue
14+
---| custom.vue
15+
```
16+
17+
```vue
18+
<!-- layouts/custom.vue -->
19+
<template>
20+
<div>
21+
<p>Some default layout content shared across all pages</p>
22+
<slot />
23+
</div>
24+
</template>
25+
```
26+
27+
```vue
28+
<!-- app.vue -->
29+
<template>
30+
<NuxtLayout>
31+
<NuxtPage />
32+
</NuxtLayout>
33+
</template>
34+
```
35+
36+
```vue
37+
<!-- pages/about.vue -->
38+
<script setup lang="ts">
39+
definePageMeta({
40+
layout: 'custom'
41+
})
42+
</script>
43+
```

0 commit comments

Comments
 (0)
0