Migrated to vue unhead.

Refs #156

source/demyo-vue-frontend/package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@mdi/font": "^5.9.55",
+    "@unhead/vue": "^1.9.1",
     "autoprefixer": "^10.4.18",
     "axios": "^1.3.1",
     "currency-symbol-map": "^5.0.1",

source/demyo-vue-frontend/src/App.vue

@@ -11,15 +11,13 @@ import { contextRoot } from '@/myenv'
 export default {
 	name: 'DemyoApp',
 
-	metaInfo() {
-		const self = this
+	head() {
 		return {
-			title: null,
-			titleTemplate: '%s — Demyo',
+			titleTemplate: (title) => !title ? 'Demyo' : `${title} – Demyo`,
 			link: [
 				{
 					rel: 'manifest',
-					href: `${contextRoot}manifest.json?lang=${self.$i18n.locale.replace(/-/, '_')}`
+					href: `${contextRoot}manifest.json?lang=${this.$i18n.locale.replace(/-/, '_')}`
 				}
 			]
 		}

source/demyo-vue-frontend/src/components/SectionCard.vue

@@ -107,7 +107,6 @@ export default {
 	padding-bottom: 0;
 
 	> :last-child {
-		padding-bottom: 0;
 		margin-bottom: 0;
 	}
 }

source/demyo-vue-frontend/src/composables/model-index.js

@@ -1,10 +1,17 @@
 import { useUiStore } from '@/stores/ui'
+import { useHead } from '@unhead/vue'
+import { useI18n } from 'vue-i18n'
 
 /**
  * Composable for simple model indexes loading data from the service.
  * @param {AbstractModelService} serviceInstance The service to use to fetch the data.
+ * @param {string} titleKey the page title key
  */
-export function useSimpleIndex(serviceInstance) {
+export function useSimpleIndex(serviceInstance, titleKey) {
+	useHead({
+		title: useI18n().t(titleKey)
+	})
+
 	const uiStore = useUiStore()
 
 	const modelList = ref([])

source/demyo-vue-frontend/src/i18n.js

@@ -47,7 +47,8 @@ const i18n = createI18n({
 	locale: simpleLocale,
 	fallbackLocale: fallbackLanguage,
 	messages: loadLocaleMessages(),
-	datetimeFormats
+	datetimeFormats,
+	legacy: false
 })
 setHtmlLang(selectedLocale)
 console.log(`Initialized i18n with '${selectedLocale}' as default language and '${fallbackLanguage}' as fallback`)

source/demyo-vue-frontend/src/layouts/DefaultLayout.vue

@@ -146,21 +146,12 @@ export default {
 
 	mixins: [quicksearch],
 
-	metaInfo() {
-		const self = this
-
-		return {
-			changed(newInfo, addedTags, removedTags) {
-				self.pageTitle = newInfo.titleChunk
-			}
-		}
-	},
-
 	data() {
 		return {
 			uiStore: useUiStore(),
 
 			pageTitle: 'Demyo',
+			pageTitleObserver: null,
 			demyoCodename: demyoCodename,
 
 			mainMenu: false,
@@ -189,6 +180,23 @@ export default {
 		}
 	},
 
+	mounted() {
+		// Monitor the page title for changes. unhead doesn't seem to have an event for this
+		this.pageTitleObserver = new MutationObserver((mutations) => {
+			const pageTitle = mutations[0].target.text.replace(/ – Demyo$/, '')
+			this.pageTitle = pageTitle
+		})
+		this.pageTitleObserver.observe(
+			document.querySelector('title'),
+			{ subtree: true, characterData: true, childList: true }
+		)
+	},
+
+	unmounted() {
+		this.pageTitleObserver.disconnect()
+		this.pageTitleObserver = null
+	},
+
 	methods: {
 		enterSearch() {
 			this.$refs.menuSearch.blur()

source/demyo-vue-frontend/src/main.js

@@ -2,6 +2,7 @@ import '@mdi/font/css/materialdesignicons.css'
 import 'roboto-fontface/css/roboto/roboto-fontface.css'
 import { createApp } from 'vue'
 // From https://gitlab.com/totol.toolsuite/vue-3-fullscreen-image
+import { VueHeadMixin, createHead } from '@unhead/vue'
 import { fullscreenImagePlugin } from 'vue-3-fullscreen-image-directive-plugin'
 import 'vue-3-fullscreen-image-directive-plugin/style.css'
 import App from './App.vue'
@@ -29,6 +30,9 @@ app.use(i18n)
 app.use(vuetify)
 app.use(fullscreenImagePlugin)
 
+app.use(createHead())
+app.mixin(VueHeadMixin)
+
 // Add the ID to the body element to ease style overrides
 document.getElementsByTagName('body')[0].id = 'demyo'
 

source/demyo-vue-frontend/src/mixins/model-edit.js

@@ -1,23 +1,23 @@
 import { useUiStore } from '@/stores/ui'
 
 export default {
-	metaInfo() {
-		return {
-			title: this.initialized
-				? (this.parsedId
-					? this.$t(this.mixinConfig.modelEdit.titleKeys.edit)
-					: this.$t(this.mixinConfig.modelEdit.titleKeys.add))
-				: ''
-		}
-	},
-
 	data() {
 		return {
 			initialized: false,
 			parsedId: undefined
 		}
 	},
 
+	computed: {
+		pageTitle() {
+			return this.initialized
+				? (this.parsedId
+					? this.$t(this.mixinConfig.modelEdit.titleKeys.edit)
+					: this.$t(this.mixinConfig.modelEdit.titleKeys.add))
+				: null
+		}
+	},
+
 	watch: {
 		$route: 'fetchDataInternal'
 	},
@@ -106,6 +106,5 @@ export default {
 				this.fetchDataInternal()
 			}
 		}
-
 	}
 }

source/demyo-vue-frontend/src/pages/AboutDemyo.vue

@@ -159,10 +159,15 @@
 </template>
 
 <script setup lang="ts">
-// TODO: Vue 3: Give a two-word component name
 import libs from '@/assets/about-libs.json'
 import { demyoCodename, demyoVersion } from '@/myenv'
 import aboutService from '@/services/about-service'
+import { useHead } from '@unhead/vue'
+import { useI18n } from 'vue-i18n'
+
+useHead({
+	title: useI18n().t('title.about')
+})
 
 const { userAgent } = navigator
 

source/demyo-vue-frontend/src/pages/Home.vue

@@ -26,15 +26,15 @@ export default {
 
 	mixins: [quicksearch],
 
-	metaInfo() {
+	data() {
 		return {
-			title: this.$t('title.home')
+			uiStore: useUiStore()
 		}
 	},
 
-	data() {
+	head() {
 		return {
-			uiStore: useUiStore()
+			title: this.$t('title.home')
 		}
 	},
 

source/demyo-vue-frontend/src/pages/albums/AlbumIndex.vue

@@ -9,8 +9,14 @@
 import { retrieveFilter } from '@/helpers/filter'
 import albumService from '@/services/album-service'
 import { useUiStore } from '@/stores/ui'
+import { useHead } from '@unhead/vue'
+import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 
+useHead({
+	title: useI18n().t('title.index.album')
+})
+
 const uiStore = useUiStore()
 const route = useRoute()
 

source/demyo-vue-frontend/src/pages/albums/AlbumView.vue

@@ -311,12 +311,6 @@ export default {
 
 	mixins: [i18nMixin, modelViewMixin],
 
-	metaInfo() {
-		return {
-			title: this.album.title
-		}
-	},
-
 	data() {
 		return {
 			uiStore: useUiStore(),
@@ -336,6 +330,12 @@ export default {
 		}
 	},
 
+	head() {
+		return {
+			title: this.album.title
+		}
+	},
+
 	computed: {
 		hasAuthors() {
 			return this.album.writers?.length

source/demyo-vue-frontend/src/pages/authors/AuthorEdit.vue

@@ -91,6 +91,10 @@ export default {
 		}
 	},
 
+	head() {
+		return { title: this.pageTitle }
+	},
+
 	methods: {
 		async fetchData() {
 			if (this.parsedId) {

source/demyo-vue-frontend/src/pages/authors/AuthorIndex.vue

@@ -15,5 +15,5 @@
 import { useSimpleIndex } from '@/composables/model-index'
 import authorService from '@/services/author-service'
 
-const { modelList } = useSimpleIndex(authorService)
+const { modelList } = useSimpleIndex(authorService, 'title.index.author')
 </script>