Add page titles

app/app.vue

@@ -1,3 +1,14 @@
+<script setup lang="ts">
+const { currentSong, isPlaying } = usePlayer()
+
+useHead({
+	titleTemplate: (titleChunk) =>
+		currentSong.value && isPlaying.value
+			? `${currentSong.value.name} - Now Playing - Music`
+			: `${titleChunk || "Home"} - Music`,
+})
+</script>
+
 <template>
 	<ToastContainer />
 	<NuxtLayout>

app/pages/admin.vue

@@ -2,6 +2,7 @@
 definePageMeta({
 	layout: "admin",
 })
+useHead({ title: "Admin" })
 </script>
 
 <template>

app/pages/admin/albums.vue

@@ -137,6 +137,7 @@ const show = (id?: string) => {
 
 	showModal.value = true
 }
+useHead({ title: "Admin - Albums" })
 </script>
 
 <template>

app/pages/admin/artists.vue

@@ -87,6 +87,7 @@ const show = (id?: string) => {
 
 	showModal.value = true
 }
+useHead({ title: "Admin - Artists" })
 </script>
 
 <template>

app/pages/admin/genre.vue

@@ -79,6 +79,7 @@ const show = (id?: string) => {
 
 	showModal.value = true
 }
+useHead({ title: "Admin - Genres" })
 </script>
 
 <template>

app/pages/admin/index.vue

@@ -1,3 +1,4 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">useHead({ title: "Admin" })
+</script>
 
 <template></template>

app/pages/admin/songs.vue

@@ -219,6 +219,7 @@ const show = (id?: string) => {
 
 	showModal.value = true
 }
+useHead({ title: "Admin - Songs" })
 </script>
 
 <template>

app/pages/album/[id].vue

@@ -9,6 +9,7 @@ const { data: tracksData } = await useApiFetch<Track[]>(
 )
 
 const { playAlbum, playShuffledAlbum, playAlbumAtIndex } = usePlayer()
+useHead({ title: computed(() => albumData.value ? `${albumData.value.name} - Album` : "Album") })
 </script>
 
 <template>

app/pages/artist/[id]/index.vue

@@ -36,6 +36,7 @@ const scrollWidth = () => {
 }
 
 const { playAlbum, playShuffledAlbum, playAlbumAtIndex } = usePlayer()
+useHead({ title: computed(() => artistData.value ? `${artistData.value.name} - Artist` : "Artist") })
 </script>
 
 <template>

app/pages/artist/[id]/tracks.vue

@@ -7,6 +7,7 @@ const { data: tracksData } = await useApiFetch<Track[]>(
 )
 
 const { playAlbumAtIndex } = usePlayer()
+useHead({ title: "Artist Songs" })
 </script>
 
 <template>

app/pages/auth.vue

@@ -2,6 +2,7 @@
 definePageMeta({
 	layout: false,
 })
+useHead({ title: "Sign In" })
 </script>
 
 <template>

app/pages/auth/signin.vue

@@ -15,6 +15,7 @@ const submit = async (e: any) => {
 		toast.show(e, "error")
 	}
 }
+useHead({ title: "Sign In" })
 </script>
 
 <template>

app/pages/index.vue

@@ -1,4 +1,5 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">useHead({ title: "Home" })
+</script>
 
 <template>
 	<h1>Home</h1>

app/pages/library/albums.vue

@@ -1 +1,5 @@
+<script setup lang="ts">
+useHead({ title: "Albums" })
+</script>
+
 <template></template>

app/pages/library/artists.vue

@@ -1 +1,5 @@
+<script setup lang="ts">
+useHead({ title: "Artists" })
+</script>
+
 <template></template>

app/pages/library/songs.vue

@@ -1 +1,5 @@
+<script setup lang="ts">
+useHead({ title: "Songs" })
+</script>
+
 <template></template>

app/pages/search.vue

@@ -80,6 +80,7 @@ watch(currentSong, (track) => {
 const playResult = (result: SearchResult | Track) => {
 	if ("album" in result && result.album) playAlbum([result as Track])
 }
+useHead({ title: computed(() => query.value ? `Search: ${query.value}` : "Search") })
 </script>
 
 <template>