PronounsPage/pages/terminology.vue

<template>
    <Page>
        <CommunityNav />

        <h2>
            <Icon v="flag" />
            <T>terminology.headerLong</T>
        </h2>

        <section>
            <T>terminology.info</T>
            <Share :title="$t('terminology.headerLong')" />
        </section>

        <ModerationRules type="rulesTerminology" emphasise />

        <AdPlaceholder :phkey="['content-0', 'content-mobile-0']" />

        <TermsDictionary ref="termsdictionary" load />
    </Page>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useNuxtApp } from 'nuxt/app';
import useSimpleHead from '../composables/useSimpleHead.ts';
import type TermsDictionary from '../components/TermsDictionary.vue';
import useConfig from '../composables/useConfig.ts';
import useHash from '../composables/useHash.ts';

interface Refs {
    termsdictionary: InstanceType<typeof TermsDictionary> | undefined;
}

export default defineComponent({
    setup() {
        definePageMeta({
            translatedPaths: (config) => translatedPathByConfigModule(config.terminology),
        });

        const { $translator: translator } = useNuxtApp();
        useSimpleHead({
            title: translator.translate('terminology.headerLong'),
            description: translator.translate('terminology.info')[0],
        }, translator);
        const { handleHash } = useHash();
        return {
            config: useConfig(),
            handleHash,
        };
    },
    computed: {
        $tRefs(): Refs {
            return this.$refs as unknown as Refs;
        },
    },
    mounted() {
        this.handleHash(this.config.terminology.hashNamespace || '', (filter) => {
            this.$tRefs.termsdictionary?.setFilter(filter);
        });
    },
});
</script>