PronounsPage/pages/nouns/templates.vue

<script setup lang="ts">
import { useNuxtApp } from 'nuxt/app';

import useConfig from '~/composables/useConfig.ts';
import useSimpleHead from '~/composables/useSimpleHead.ts';

definePageMeta({
    translatedPaths: (config) => {
        if (!config.nouns.enabled || !config.nouns.templates.enabled || !config.nouns.templates.route) {
            return [];
        }
        return [`/${encodeURIComponent(config.nouns.templates.route)}`];
    },
});

const NounsNav = useLocaleComponent('nouns', 'NounsNav');

const { $translator: translator } = useNuxtApp();
useSimpleHead({
    title: translator.translate('nouns.headerLonger'),
    description: translator.translate('nouns.description'),
}, translator);

const config = useConfig();

const filter = ref('');
</script>

<template>
    <Page>
        <NounsNav />

        <h2>
            <Icon v="book" />
            <T>nouns.headerLonger</T>
        </h2>

        <section>
            <T>nouns.intro</T>

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

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

        <FilterBar v-if="config.nouns.templates?.filter" v-model="filter" />

        <NounsTemplatesTable :filter="filter" />
    </Page>
</template>