From 57ea6a88d1d4e8d58062fbd10246eaa5fa0ab3a8 Mon Sep 17 00:00:00 2001
From: Riyyi <riyyi3@gmail.com>
Date: Sun, 30 Mar 2025 12:55:52 +0200
Subject: [PATCH] Add page title

---
 src/app.vue                   |  8 ++++++++
 src/pages/articles/[slug].vue | 22 +++++++++++-----------
 src/pages/articles/index.vue  |  6 +++---
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/app.vue b/src/app.vue
index 6b42d39..908c564 100644
--- a/src/app.vue
+++ b/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>
diff --git a/src/pages/articles/[slug].vue b/src/pages/articles/[slug].vue
index 56c7692..d984f53 100644
--- a/src/pages/articles/[slug].vue
+++ b/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(
-	 `article-${params.slug}`,
-	 () => queryCollection("content").path("/articles/" + params.slug).first()
- );
+const { data: article } = await useAsyncData(
+	`article-${params.slug}`,
+	() => queryCollection("content").path("/articles/" + params.slug).first()
+);
 
- useSeoMeta({
-	 title: article.value?.title,
-	 description: article.value?.description
- })
+useSeoMeta({
+	title: article.value?.title,
+	description: article.value?.description
+})
 
- console.log(article);
+console.log(article);
 </script>
diff --git a/src/pages/articles/index.vue b/src/pages/articles/index.vue
index 5d0f231..b3e6ea4 100644
--- a/src/pages/articles/index.vue
+++ b/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>