@kinetis/vector-ui 0.0.0-stage → 0.9.0

package/app/pages/r/[resource]/[id]/index.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import type { VectorAction } from '#vector/app/types/vector'
+
+definePageMeta({ layout: 'vector', middleware: 'vector-auth', key: route => route.fullPath })
+
+const { t, noun } = useVectorT()
+const route = useRoute()
+const appConfig = useAppConfig()
+const { load, resource: find } = useVectorSchema()
+await load()
+
+const slug = computed(() => String(route.params.resource))
+const id = computed(() => String(route.params.id))
+const resource = computed(() => find(slug.value))
+const client = useVectorResource(slug)
+const base = computed(() => `${appConfig.vector.basePath}/r/${slug.value}`)
+const { confirm } = useConfirm()
+const notifications = useVectorNotifications()
+
+const { data: response, status, error, refresh } = await useAsyncData(() => `vector.${slug.value}.${id.value}`, () => client.show(id.value))
+
+const title = computed(() => {
+    const value = response.value?.data?.[resource.value?.titleField ?? 'id']
+    return value === undefined || value === null ? `#${id.value}` : String(value)
+})
+
+const trashed = computed(() => response.value?.data?._trashed === true)
+const { schema } = useVectorSchema()
+const impersonation = useVectorImpersonation()
+const canImpersonate = computed(() => appConfig.vector.usersResource === slug.value && schema.value?.capabilities.impersonation === true && String(response.value?.data.id) !== String(useVectorAuthStore().user?.id))
+
+async function impersonate() {
+    if (!resource.value || !response.value) return
+
+    if (!await confirm({ title: t('record.impersonate.title', { title: title.value }), text: t('record.impersonate.text'), confirmText: t('record.impersonate.action') })) return
+
+    try {
+        await impersonation.start(response.value.data.id)
+        notifications.success(t('record.impersonate.started', { title: title.value }))
+        await navigateTo(appConfig.vector.basePath || '/')
+    } catch (caught) {
+        notifications.error(vectorErrorMessage(caught))
+    }
+}
+// Every collection the show page shows gets a relation panel.
+const collections = computed(() => (resource.value?.fields ?? []).filter(f => (f.type === 'hasMany' || f.type === 'manyToMany') && f.views.includes('show')))
+const actions = computed<VectorAction[]>(() => (resource.value?.actions ?? []).filter(a => a.showOnDetail && !a.standalone && (response.value?.permissions.actions ?? []).includes(a.name)))
+const dialogAction = ref<VectorAction | null>(null)
+
+useHead({ title: () => resource.value ? `${title.value} · ${resource.value.label}` : '' })
+
+async function remove(force = false) {
+    if (!resource.value) return
+    const soft = resource.value.softDelete !== null && !force
+
+    const ok = await confirm({
+        title: t(force ? 'record.deleteForeverTitle' : 'record.deleteTitle', { noun: noun(resource.value.labelSingular), title: title.value }),
+        text: soft ? t('record.deleteSoftText') : t('record.deleteHardText'),
+        confirmText: t('common.delete'),
+        destructive: true,
+    })
+
+    if (!ok) return
+
+    try {
+        if (force) await client.forceRemove(id.value)
+        else await client.remove(id.value)
+        notifications.success(t(soft ? 'record.trashed' : 'record.deleted', { label: resource.value.labelSingular }))
+
+        if (soft) await refresh()
+        else await navigateTo(base.value)
+    } catch (caught) {
+        notifications.error(vectorErrorMessage(caught))
+    }
+}
+
+async function restore() {
+    if (!resource.value) return
+
+    try {
+        await client.restore(id.value)
+        notifications.success(t('record.restored', { label: resource.value.labelSingular }))
+        await refresh()
+    } catch (caught) {
+        notifications.error(vectorErrorMessage(caught))
+    }
+}
+</script>
+
+<template>
+    <div v-if="resource">
+        <v-breadcrumbs class="pa-0 mb-2" :items="[{ title: resource.label, to: base }, { title }]" />
+        <div class="d-flex align-center flex-wrap ga-2 mb-4">
+            <h1 class="text-h4">{{ title }}</h1>
+            <v-chip size="small" variant="tonal">{{ resource.labelSingular }}</v-chip>
+            <v-chip v-if="trashed" size="small" color="error" variant="tonal" prepend-icon="mdi-delete-clock-outline">{{ t('record.inTrash') }}</v-chip>
+            <v-spacer />
+            <template v-if="response">
+                <v-menu v-if="actions.length">
+                    <template #activator="{ props: activator }">
+                        <v-btn v-bind="activator" variant="tonal" append-icon="mdi-menu-down">{{ t('common.actions') }}</v-btn>
+                    </template>
+                    <v-list density="compact">
+                        <v-list-item v-for="action in actions" :key="action.name" :title="action.label" :prepend-icon="action.icon ?? undefined" :base-color="action.destructive ? 'error' : undefined" @click="dialogAction = action" />
+                    </v-list>
+                </v-menu>
+                <v-btn v-if="canImpersonate" prepend-icon="mdi-account-switch-outline" variant="tonal" @click="impersonate">{{ t('record.impersonate.action') }}</v-btn>
+                <v-btn v-if="resource.permissions.create && resource.replicable !== false && !trashed" :to="`${base}/create?from=${encodeURIComponent(id)}`" prepend-icon="mdi-content-copy" variant="tonal">{{ t('record.duplicate') }}</v-btn>
+                <v-btn v-if="response.permissions.update" :to="`${base}/${id}/edit`" prepend-icon="mdi-pencil-outline" color="primary">{{ t('common.edit') }}</v-btn>
+                <v-btn v-if="response.permissions.restore" prepend-icon="mdi-restore" color="primary" variant="tonal" @click="restore">{{ t('common.restore') }}</v-btn>
+                <v-btn v-if="response.permissions.forceDelete" prepend-icon="mdi-delete-forever-outline" color="error" variant="tonal" @click="remove(true)">{{ t('common.deleteForever') }}</v-btn>
+                <v-btn v-if="response.permissions.delete" prepend-icon="mdi-delete-outline" color="error" variant="tonal" @click="remove()">{{ t('common.delete') }}</v-btn>
+            </template>
+        </div>
+
+        <v-skeleton-loader v-if="status === 'pending'" type="article" />
+        <v-alert v-else-if="error" type="error" variant="tonal" :text="vectorErrorMessage(error)" />
+        <template v-else-if="response">
+            <VxResourceShow :resource="resource" :record="response.data" />
+            <VxResourceRelationPanel
+                v-for="field in collections"
+                :key="field.name"
+                :owner="resource"
+                :record="response.data"
+                :field="field"
+                :can-update="response.permissions.update"
+                @changed="refresh()"
+            />
+            <VxResourceAudit :id="id" :resource="resource" :can-update="response.permissions.update" @reverted="refresh()" />
+        </template>
+
+        <VxActionDialog
+            v-if="dialogAction && response"
+            :resource="resource"
+            :action="dialogAction"
+            :selection="{ ids: [response.data.id] }"
+            :count="1"
+            @done="dialogAction = null; refresh()"
+            @cancel="dialogAction = null"
+        />
+    </div>
+    <v-empty-state v-else icon="mdi-help-circle-outline" :title="t('record.unknownResource')" />
+</template>

package/app/pages/r/[resource]/create.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { VectorRecord } from '#vector/app/types/vector'
+import type { SaveVariant } from '#vector/app/components/Vx/Resource/Form.vue'
+
+definePageMeta({ layout: 'vector', middleware: 'vector-auth', key: route => route.fullPath })
+
+const { t, noun } = useVectorT()
+const route = useRoute()
+const appConfig = useAppConfig()
+const { load, resource: find } = useVectorSchema()
+await load()
+
+const slug = computed(() => String(route.params.resource))
+const resource = computed(() => find(slug.value))
+
+// ?from={id}: a copy of that record (Duplicate on its page)
+const from = computed(() => typeof route.query.from === 'string' && route.query.from !== '' ? route.query.from : null)
+const client = useVectorResource(slug)
+const { data: source, error: sourceError } = await useAsyncData(() => `vector.${slug.value}.copy.${from.value}`, () => from.value ? client.show(from.value) : Promise.resolve(null))
+const base = computed(() => `${appConfig.vector.basePath}/r/${slug.value}`)
+
+useHead({ title: () => resource.value ? `${t('record.newTitle', { label: noun(resource.value.labelSingular) })} · ${resource.value.label}` : '' })
+
+const form = ref<{ dirty: boolean, reset: () => void } | null>(null)
+useLeaveGuard(() => form.value?.dirty === true)
+
+function saved(record: VectorRecord, variant: SaveVariant) {
+    if (variant === 'another') {
+        // another one starts empty, even after a copy
+        if (from.value) return navigateTo(`${base.value}/create`)
+        form.value?.reset()
+        window.scrollTo({ top: 0 })
+        return
+    }
+
+    const at = `${base.value}/${encodeURIComponent(String(record.id))}`
+    navigateTo(variant === 'continue' ? `${at}/edit` : at)
+}
+</script>
+
+<template>
+    <div v-if="resource">
+        <v-breadcrumbs class="pa-0 mb-2" :items="[{ title: resource.label, to: base }, { title: t('record.new') }]" />
+        <h1 class="text-h4 mb-4">{{ t('record.newTitle', { label: noun(resource.labelSingular) }) }}</h1>
+        <v-alert v-if="!resource.permissions.create" type="warning" variant="tonal" :text="t('record.createNotAllowed')" />
+        <v-alert v-else-if="sourceError" type="error" variant="tonal" :text="vectorErrorMessage(sourceError)" />
+        <template v-else>
+            <v-alert v-if="source" type="info" variant="tonal" density="compact" class="mb-4" :text="t('record.copyOf', { title: String(source.data[resource.titleField] ?? `#${source.data.id}`) })" />
+            <VxResourceForm ref="form" :resource="resource" operation="create" :copy-of="source?.data" variants @saved="saved" @cancel="navigateTo(base)" />
+        </template>
+    </div>
+    <v-empty-state v-else icon="mdi-help-circle-outline" :title="t('record.unknownResource')" />
+</template>

package/app/pages/r/[resource]/index.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'vector', middleware: 'vector-auth', key: route => route.fullPath })
+
+const route = useRoute()
+const { load, resource: find } = useVectorSchema()
+await load()
+
+const { t, noun } = useVectorT()
+const appConfig = useAppConfig()
+const slug = computed(() => String(route.params.resource))
+const resource = computed(() => find(slug.value))
+
+useHead({ title: () => resource.value?.label ?? '' })
+</script>
+
+<template>
+    <div v-if="resource">
+        <div class="d-flex align-center mb-4">
+            <v-icon v-if="resource.icon" :icon="resource.icon" class="me-2" />
+            <h1 class="text-h4">{{ resource.label }}</h1>
+            <v-spacer />
+            <v-btn v-if="resource.permissions.create" :to="`${appConfig.vector.basePath}/r/${resource.slug}/create`" prepend-icon="mdi-plus" color="primary">
+                {{ t('list.page.create', { noun: noun(resource.labelSingular) }) }}
+            </v-btn>
+        </div>
+        <VxResourceTable :key="resource.slug" :resource="resource" />
+    </div>
+    <v-empty-state v-else icon="mdi-help-circle-outline" :title="t('list.page.unknown')" :text="t('list.page.unknownText', { slug })" />
+</template>

package/app/pages/settings.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { languageName } from '#vector/app/i18n'
+import type { SubmitEventPromise } from 'vuetify'
+import type { VectorSettingsGroup } from '#vector/app/types/vector'
+
+definePageMeta({ layout: 'vector', middleware: 'vector-auth' })
+
+// Every settings group this user may manage, one tab each, rendered
+// from the group's field list through the same registry as a form.
+const api = useVectorApi()
+const notifications = useVectorNotifications()
+const { t } = useVectorT()
+const { load: loadSchema } = useVectorSchema()
+
+// fetched again in a new language, whose labels the server translates
+const { current: locale } = useVectorLocale()
+const { data, refresh } = await useAsyncData('vector.settings', () => api<{ data: VectorSettingsGroup[] }>('/vector/settings'), { watch: [locale] })
+// Vector's own Languages group: each language keeps its own name, with its name in the admin's language beneath
+const groups = computed(() => (data.value?.data ?? []).map(group => group.name === 'languages' ? withLanguageNames(group, locale.value) : group))
+// what each group held when it was loaded: a group edited since keeps its edits when the page is fetched again
+const loaded: Record<string, string> = {}
+const tab = ref<string | null>(null)
+const values = reactive<Record<string, Record<string, unknown>>>({})
+const serverErrors = reactive<Record<string, Record<string, string[]>>>({})
+const formError = ref<string | null>(null)
+const saving = ref(false)
+
+watch(groups, (list) => {
+    for (const group of list) {
+        const edited = values[group.name] !== undefined && loaded[group.name] !== undefined && JSON.stringify(values[group.name]) !== loaded[group.name]
+        if (!edited) values[group.name] = { ...group.values }
+        loaded[group.name] = JSON.stringify(group.values)
+        serverErrors[group.name] ??= {}
+    }
+    tab.value ??= list[0]?.name ?? null
+}, { immediate: true })
+
+useHead({ title: () => t('settings.pageTitle') })
+
+async function save(group: VectorSettingsGroup, event: SubmitEventPromise) {
+    const { valid } = await event
+    if (!valid) return
+
+    saving.value = true
+    formError.value = null
+    const errors = serverErrors[group.name]!
+    for (const key of Object.keys(errors)) delete errors[key]
+
+    try {
+        await api(`/vector/settings/${encodeURIComponent(group.name)}`, { method: 'PUT', body: values[group.name] })
+        delete loaded[group.name] // saved: the server's answer replaces the form, normalised as stored
+        notifications.success(t('settings.saved', { label: group.label }))
+        await refresh()
+        await loadSchema(true) // branding rides with the descriptor
+    } catch (error) {
+        formError.value = applyViolations(error, values[group.name]!, errors)
+    } finally {
+        saving.value = false
+    }
+}
+
+/** The Languages group as shown: a switch's hint and the default's options name each language in the admin's language too. */
+function withLanguageNames(group: VectorSettingsGroup, inLanguage: string): VectorSettingsGroup {
+    return {
+        ...group,
+        fields: group.fields.map((field) => {
+            if (field.type === 'boolean') {
+                return { ...field, help: languageName(field.name, inLanguage, field.label) ?? field.help }
+            }
+            if (field.name === 'default' && field.options) {
+                return { ...field, options: field.options.map(option => ({ ...option, label: [option.label, languageName(String(option.value), inLanguage, option.label)].filter(Boolean).join(' — ') })) }
+            }
+            return field
+        }),
+    }
+}
+</script>
+
+<template>
+    <div>
+        <h1 class="text-h4 mb-4">{{ t('settings.heading') }}</h1>
+        <v-empty-state v-if="groups.length === 0" icon="mdi-cog-off-outline" :title="t('settings.empty.title')" :text="t('settings.empty.text')" />
+        <v-card v-else>
+            <v-tabs v-model="tab" color="primary">
+                <v-tab v-for="group in groups" :key="group.name" :value="group.name" :prepend-icon="group.icon ?? undefined">{{ group.label }}</v-tab>
+            </v-tabs>
+            <v-divider />
+            <v-tabs-window v-model="tab">
+                <v-tabs-window-item v-for="group in groups" :key="group.name" :value="group.name">
+                    <v-form validate-on="blur lazy" @submit.prevent="(e: SubmitEventPromise) => save(group, e)">
+                        <v-card-text>
+                            <v-alert v-if="formError && tab === group.name" type="error" variant="tonal" class="mb-4" :text="formError" />
+                            <VxFieldsForm v-if="values[group.name]" :fields="group.fields" :values="values[group.name]!" :server-errors="serverErrors[group.name] ?? {}" @clear="(name: string) => delete serverErrors[group.name]![name]" />
+                        </v-card-text>
+                        <v-card-actions>
+                            <v-spacer />
+                            <v-btn type="submit" color="primary" :loading="saving">{{ t('common.save') }}</v-btn>
+                        </v-card-actions>
+                    </v-form>
+                </v-tabs-window-item>
+            </v-tabs-window>
+        </v-card>
+    </div>
+</template>

package/app/plugins/vector-csp.client.ts

@@ -0,0 +1,14 @@
+/**
+ * Hosted under a strict Content-Security-Policy, the shell hands the
+ * bundle the response's nonce; Vuetify puts it on the style element it
+ * creates for the theme, so `style-src 'nonce-…'` admits it.
+ */
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.hook('vuetify:before-create', ({ vuetifyOptions }) => {
+        const nonce = window.__VECTOR__?.cspNonce
+
+        if (nonce) {
+            vuetifyOptions.theme = { ...(typeof vuetifyOptions.theme === 'object' ? vuetifyOptions.theme : {}), cspNonce: nonce }
+        }
+    })
+})

package/app/plugins/vector-extensions.client.ts

@@ -0,0 +1,84 @@
+import * as vue from 'vue'
+import { Extension as TiptapExtension, Mark as TiptapMark, Node as TiptapNode, mergeAttributes } from '@tiptap/core'
+import { VAlert, VAutocomplete, VBtn, VCard, VCheckbox, VChip, VIcon, VProgressLinear, VRating, VSelect, VSwitch, VTable, VTextField, VTextarea } from 'vuetify/components'
+
+/**
+ * Runtime UI extensions (§4.15 tier 2). `window.Vector` is the
+ * registration API an extension module calls; the URLs come from the
+ * hosted shell (`VECTOR_UI_EXTENSIONS`) or from runtime config in
+ * standalone mode, and are imported after the app is created. Vue and a
+ * curated set of Vuetify components are handed over so an extension
+ * needs no bundler and no copy of either library.
+ */
+export default defineNuxtPlugin(() => {
+    const registries = useVectorExtensions()
+    const i18n = useNuxtApp().$vectorI18n
+    const api$ = useVectorApi()
+    const notifications = useVectorNotifications()
+    const appConfig = useAppConfig()
+    const config = useRuntimeConfig()
+    // VTable for a custom page's tables: its wrapper, not a bare <table>, carries Vuetify's table styles
+    const vuetify = { VAlert, VAutocomplete, VBtn, VCard, VCheckbox, VChip, VIcon, VProgressLinear, VRating, VSelect, VSwitch, VTable, VTextField, VTextarea }
+
+    const api = {
+        version: 1,
+        vue,
+        vuetify,
+        // what a rich-text extension is built from, so one needs no bundler of its own
+        tiptap: { Node: TiptapNode, Mark: TiptapMark, Extension: TiptapExtension, mergeAttributes },
+        defineCell: (name: string, component: vue.Component) => registries.cells.set(name, vue.markRaw(component)),
+        defineInput: (name: string, component: vue.Component) => registries.inputs.set(name, vue.markRaw(component)),
+        defineWidget: (type: string, component: vue.Component) => registries.widgets.set(type, vue.markRaw(component)),
+        /**
+         * A rich-text node or mark type (a Tiptap extension) a field's `features` may then name. The server
+         * accepts it only when the application registered the same name with Document::extend().
+         */
+        defineRichTextExtension: (name: string, extension: import('@tiptap/core').AnyExtension) => registries.richText.set(name, vue.markRaw(extension)),
+        /** Adds or overrides UI messages for a locale: defineMessages('de', { common: { save: 'Speichern' } }). */
+        defineMessages: (locale: string, messages: Record<string, unknown>) => i18n.global.mergeLocaleMessage(locale, messages),
+        /** A custom page at `/p/{name}`, listed in the menu: definePage('stock', { title: 'Stock', icon: 'mdi-warehouse', component }). */
+        definePage: (name: string, page: { title: string, icon?: string, group?: string, component: vue.Component }) => {
+            if (!/^[a-z0-9][a-z0-9-]*$/.test(name)) throw new Error(`Vector page name "${name}" must be lowercase letters, digits and dashes.`)
+            registries.pages.set(name, { ...page, component: vue.markRaw(page.component) })
+        },
+        /** The admin's API client, with its credentials, for extensions calling the application's own endpoints. */
+        api: api$,
+        notify: {
+            success: (message: string) => notifications.success(message),
+            error: (message: string) => notifications.error(message),
+        },
+        navigate: (path: string) => navigateTo(`${appConfig.vector.basePath}${path}`),
+        /** The admin's translator, for an extension's own messages (defineMessages) or the admin's. */
+        t: (key: string, params: Record<string, unknown> = {}, plural?: number) => vt(key, params, plural),
+    }
+
+    window.Vector = api
+
+    const urls = [...(window.__VECTOR__?.extensions ?? []), ...((config.public.vector as { extensions?: string[] }).extensions ?? [])]
+
+    Promise.allSettled(urls.map(url => import(/* @vite-ignore */ url)
+        .then(module => (typeof module.default === 'function' ? module.default(api) : undefined))
+        .catch(error => console.error(`Vector extension ${url} failed to load`, error))))
+        .then(() => { registries.ready.value = true })
+})
+
+declare global {
+    interface Window {
+        Vector?: {
+            version: number
+            vue: typeof vue
+            vuetify: Record<string, vue.Component>
+            tiptap: { Node: typeof TiptapNode, Mark: typeof TiptapMark, Extension: typeof TiptapExtension, mergeAttributes: typeof mergeAttributes }
+            defineCell: (name: string, component: vue.Component) => void
+            defineInput: (name: string, component: vue.Component) => void
+            defineWidget: (type: string, component: vue.Component) => void
+            defineRichTextExtension: (name: string, extension: import('@tiptap/core').AnyExtension) => void
+            defineMessages: (locale: string, messages: Record<string, unknown>) => void
+            definePage: (name: string, page: { title: string, icon?: string, group?: string, component: vue.Component }) => void
+            api: import('nitropack').$Fetch
+            notify: { success: (message: string) => void, error: (message: string) => void }
+            navigate: (path: string) => unknown
+            t: (key: string, params?: Record<string, unknown>, plural?: number) => string
+        }
+    }
+}

package/app/plugins/vector-i18n.ts

@@ -0,0 +1,76 @@
+import { createI18n } from 'vue-i18n'
+import type { VectorI18n } from '#vector/app/utils/translate'
+import { bundledMessages, isRtl, pluralRule, rtlLanguages, vuetifyLocale } from '#vector/app/i18n'
+
+/**
+ * The admin's own strings, translated through vue-i18n, in the language
+ * the user chose. The descriptor's labels arrive translated by the server.
+ *
+ * The UI ships English and sixteen machine-translated locales. It starts in
+ * the hosted shell's language (the server's answer for this user), else
+ * the one this browser last used, else app config `vector.locale`, else
+ * English; the descriptor then confirms it, and the language menu in the
+ * app bar changes it (useVectorLocale). A key a locale lacks falls back to
+ * English. An application adds or overrides messages in app config
+ * `vector.messages` ({ de: { common: { save: 'Speichern' } } }), and a
+ * runtime extension through `window.Vector.defineMessages()`. Vuetify's
+ * own component strings and the page's direction follow the same locale.
+ */
+export default defineNuxtPlugin({
+    name: 'vector-i18n',
+    enforce: 'pre',
+    setup(nuxtApp) {
+        const appConfig = useAppConfig()
+        const hosted = import.meta.client ? window.__VECTOR__?.locale : undefined
+        let remembered: string | null = null
+        try {
+            remembered = import.meta.client ? window.localStorage.getItem('vector.locale') : null
+        } catch {
+            // storage may be unavailable (a private window, blocked site data)
+        }
+        const locale = hosted || remembered || appConfig.vector.locale || 'en'
+
+        // each language's own plural forms (pluralCategories): one, few, many for Russian; one form for Japanese
+        const locales = [...new Set([...Object.keys(bundledMessages), ...Object.keys(appConfig.vector.messages ?? {}), locale])]
+
+        const i18n = createI18n({
+            legacy: false,
+            locale,
+            fallbackLocale: 'en',
+            messages: { ...bundledMessages },
+            pluralRules: Object.fromEntries(locales.map(code => [code, pluralRule(code)])),
+            missingWarn: false,
+            fallbackWarn: false,
+        })
+
+        for (const [code, messages] of Object.entries(appConfig.vector.messages ?? {})) {
+            i18n.global.mergeLocaleMessage(code, messages as Record<string, unknown>)
+        }
+
+        nuxtApp.vueApp.use(i18n)
+        const vectorI18n = i18n as VectorI18n
+        setVectorI18n(vectorI18n)
+        setFormatLocale(locale)
+
+        if (import.meta.client) {
+            document.documentElement.lang = locale
+            document.documentElement.dir = isRtl(locale) ? 'rtl' : 'ltr'
+        }
+
+        // Vuetify's component strings (pagination, "No data available", …) for every language it knows, switched at runtime.
+        nuxtApp.hook('vuetify:before-create', async ({ vuetifyOptions }) => {
+            const all = await import('vuetify/locale') as Record<string, unknown>
+            const messages = Object.fromEntries(Object.entries(all).filter(([, value]) => value && typeof value === 'object' && !Array.isArray(value)))
+            const current = messages[vuetifyLocale(locale)] ? vuetifyLocale(locale) : (messages[locale.split('-')[0]!] ? locale.split('-')[0]! : 'en')
+            vuetifyOptions.locale = {
+                ...(typeof vuetifyOptions.locale === 'object' ? vuetifyOptions.locale : {}),
+                locale: current,
+                fallback: 'en',
+                messages: messages as never,
+                rtl: Object.fromEntries(rtlLanguages.map(code => [code, true])),
+            }
+        })
+
+        return { provide: { vectorI18n } }
+    },
+})