diff --git a/components/PoisList/PoisList.vue b/components/PoisList/PoisList.vue index 90a78f060..f8e733de2 100644 --- a/components/PoisList/PoisList.vue +++ b/components/PoisList/PoisList.vue @@ -76,6 +76,9 @@ export default defineNuxtComponent({ categoryId() { this.pois = undefined + // Send new categoryId to parent in order to update meta title + this.$emit('categoryUpdate', this.categoryId) + // Change history directly to avoid resetup the page with this.$router.push history.pushState({}, '', `/category/${this.categoryId}`) diff --git a/pages/category/[id].vue b/pages/category/[id].vue index f653498b9..c5135f35e 100644 --- a/pages/category/[id].vue +++ b/pages/category/[id].vue @@ -7,7 +7,7 @@ import { definePageMeta } from '#imports' import PoisList from '~/components/PoisList/PoisList.vue' import type { ContentEntry } from '~/lib/apiContent' import { getContents } from '~/lib/apiContent' -import type { MenuItem } from '~/lib/apiMenu' +import type { ApiMenuCategory, MenuItem } from '~/lib/apiMenu' import { getMenu } from '~/lib/apiMenu' import type { ApiPois } from '~/lib/apiPois' import { getPoiByCategoryId } from '~/lib/apiPois' @@ -116,19 +116,6 @@ export default defineNuxtComponent({ if (this.menuItems) menuStore().fetchConfig(this.menuItems) - // Fetching category by ID - // TODO: Has to be done in setup() but menuItems is touched in created() hook - const category = menuStore().getCurrentCategory(useRoute().params.id as string) - if (!category) { - throw createError({ - statusCode: 404, - statusMessage: 'Category Not Found', - }) - } - - this.settings.themes[0].title = category.category.name - useHead(headerFromSettings(this.settings)) - this.globalSettings = this.settings this.globalContents = this.contents this.globalTranslations = this.propertyTranslations @@ -144,6 +131,26 @@ export default defineNuxtComponent({ mounted() { this.locale = this.$i18n.locale + this.handleCategoryUpdate(useRoute().params.id as string) + }, + methods: { + getCategory(categoryId: string): ApiMenuCategory { + // Fetching category by ID + // TODO: Has to be done in setup() but menuItems is touched in created() hook + const category = menuStore().getCurrentCategory(categoryId) + if (!category) { + throw createError({ + statusCode: 404, + statusMessage: 'Category Not Found', + }) + } + return category + }, + handleCategoryUpdate(categoryId: number | string) { + const category = this.getCategory(categoryId.toString()) + this.settings.themes[0].title = category.category.name + useHead(headerFromSettings(this.settings)) + }, }, }) @@ -155,6 +162,7 @@ export default defineNuxtComponent({ :initial-category-id="parseInt(id)" :initial-pois="pois" class="page-index" + @category-update="handleCategoryUpdate" />