PronounsPage/routes/inclusive.vue

<template>
    <Page>
        <CommunityNav />

        <h2>
            <Icon v="book-heart" />
            <T>inclusive.headerLong</T>
        </h2>

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

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

        <InclusiveDictionary ref="inclusivedictionary" load />
    </Page>
</template>

<script lang="ts">
import { head } from '../src/helpers.ts';
import hash from '../plugins/hash.ts';
import type InclusiveDictionary from '../components/InclusiveDictionary.vue';

interface Refs {
    inclusivedictionary: InstanceType<typeof InclusiveDictionary> | undefined;
}

export default hash.extend({
    head() {
        return head({
            title: this.$t('inclusive.headerLong'),
            description: this.$t('inclusive.info')[0],
        }, this.$translator);
    },
    computed: {
        $tRefs(): Refs {
            return this.$refs as unknown as Refs;
        },
    },
    mounted() {
        this.handleHash(this.$config.inclusive.hashNamespace || '', (filter) => {
            this.$tRefs.inclusivedictionary?.setFilter(filter);
        });
    },
});
</script>