Add page title

src/app.vue

@@ -4,3 +4,11 @@
 	</NuxtLayout>
 	<Toast />
 </template>
+
+<script setup lang="ts">
+useHead({
+	titleTemplate: (titleChunk) => {
+		return titleChunk ? `${titleChunk} - website-vue` : 'website-vue';
+	}
+})
+</script>

src/pages/articles/[slug].vue

@@ -13,19 +13,19 @@
 </template>
 
 <script setup lang="ts">
- const { params } = useRoute();
+const { params } = useRoute();
 
- console.log(params);
+console.log(params);
 
- const { data: article } = await useAsyncData(
+const { data: article } = await useAsyncData(
-	 `article-${params.slug}`,
+	`article-${params.slug}`,
-	 () => queryCollection("content").path("/articles/" + params.slug).first()
+	() => queryCollection("content").path("/articles/" + params.slug).first()
- );
+);
 
- useSeoMeta({
+useSeoMeta({
-	 title: article.value?.title,
+	title: article.value?.title,
-	 description: article.value?.description
+	description: article.value?.description
- })
+})
 
- console.log(article);
+console.log(article);
 </script>

src/pages/articles/index.vue

@@ -2,17 +2,17 @@
 	<div>
 		<h1>Articles</h1>
 		<ul>
-			<li v-for="article in articles" :key="article._path">
+			<li v-for="article in articles" :key="article.path">
 				<NuxtLink :to="article.path">{{ article.title }}</NuxtLink>
 			</li>
 		</ul>
 
-		<div v-for="article in articles" :key="article._path">
+		<div v-for="article in articles" :key="article.path">
 			<pre>{{ article }}</pre>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
- const { data: articles } = await useAsyncData("articles", () => queryCollection("content").all())
+const { data: articles } = await useAsyncData("articles", () => queryCollection("content").all())
 </script>