@plutocms/pluto 0.12.0 → 0.14.0

package/app/composables/pluto-admin-nav.ts

@@ -1,3 +1,5 @@
+import { contentTextFor } from './internal/content-text'
+
 // The old `NavigationMenuItem`/`NavigationMenuChildItem` shape (from
 // `@plutocms/utils`) always carries a plain `href`, never Nuxt's typed `to`.
 // This narrows just the field the bridge below reads.
@@ -22,6 +24,11 @@ interface LegacyHrefLink {
  *    when `type.capabilities.read` is unset, the entry is always visible;
  *    when it is set, `can(...)` decides.
  *
+ * Labels are key-or-literal. They resolve with `tx()` after the legacy dedupe
+ * above, which compares the raw labels. A content type's labels come from
+ * `usePlutoContentText`, so the convention keys apply. The `computed` reads
+ * the active locale, so a locale switch updates the labels.
+ *
  * `entry.enabled` is read and enforced uniformly across all three sources
  * here. Source 1 already filters on it a second time, inside
  * `createOwnedRegistry` itself (see
@@ -35,6 +42,8 @@ export function usePlutoAdminNav() {
   const legacy = useSidebarAdminActions()
   const { items: contentTypes } = usePlutoContentTypes()
   const { can } = usePlutoPermissions()
+  const i18n = usePlutoI18n()
+  const { t, tx } = i18n
 
   const items = computed<PlutoNavItem[]>(() => {
     const registered = registry.nav.list.value
@@ -55,27 +64,35 @@ export function usePlutoAdminNav() {
         })),
       }))
 
+    // Resolve the labels now, after the dedupe above has compared the raw ones.
+    const resolveLabels = (item: PlutoNavItem): PlutoNavItem => ({
+      ...item,
+      label: tx(item.label),
+      children: item.children?.map((child) => ({ ...child, label: tx(child.label) })),
+    })
+
     const contentNav: PlutoNavItem[] = contentTypes.value
       .filter((entry) => entry.type.autoRoutes !== false)
       .map((entry) => {
         const type = entry.type
+        const text = contentTextFor(type, i18n)
         const basePath = type.basePath ?? `/admin/content/${type.name}`
 
         return {
           id: `content:${type.name}`,
           order: type.navOrder ?? 100,
-          label: type.labelPlural,
+          label: text.labelPlural,
           icon: type.icon,
           to: basePath,
           enabled: () => !type.capabilities?.read || can(type.capabilities.read),
           children: [
-            { label: `All ${type.labelPlural}`, to: basePath },
-            { label: `Create new ${type.label}`, to: `${basePath}/new` },
+            { label: t('pluto.content.all', { labelPlural: text.labelPlural }), to: basePath },
+            { label: t('pluto.content.createNew', { label: text.label }), to: `${basePath}/new` },
           ],
         }
       })
 
-    return [...registered, ...bridged, ...contentNav]
+    return [...registered.map(resolveLabels), ...bridged.map(resolveLabels), ...contentNav]
       .filter((item) => item.enabled?.() ?? true)
       .sort((a, b) => (a.order ?? 100) - (b.order ?? 100))
   })

package/app/composables/pluto-admin-pages.ts

@@ -1,3 +1,5 @@
+import { contentTextFor } from './internal/content-text'
+
 /**
  * Metadata for admin pages, registered on top of routes Nuxt already
  * creates from files, plus two synthesized entries per auto-routed content
@@ -5,32 +7,40 @@
  * page-metadata equivalent of the nav entry `usePlutoAdminNav` synthesizes
  * for the same content type. No layer registers page metadata today, so
  * the registry bucket itself has no legacy bridge.
+ *
+ * Titles are key-or-literal. They resolve with `tx()` inside the `computed`,
+ * so a locale switch updates them.
  */
 export function usePlutoAdminPages() {
   const registry = usePlutoRegistry()
   const route = useRoute()
   const { items: contentTypes } = usePlutoContentTypes()
+  const i18n = usePlutoI18n()
+  const { t, tx } = i18n
 
   const items = computed<PlutoAdminPage[]>(() => {
     const contentPages: PlutoAdminPage[] = contentTypes.value
       .filter((entry) => entry.type.autoRoutes !== false)
       .flatMap((entry) => {
         const type = entry.type
+        const text = contentTextFor(type, i18n)
         const basePath = type.basePath ?? `/admin/content/${type.name}`
         const navId = `content:${type.name}`
 
         return [
-          { id: `${navId}:list`, path: basePath, title: type.labelPlural },
+          { id: `${navId}:list`, path: basePath, title: text.labelPlural },
           {
             id: `${navId}:new`,
             path: `${basePath}/new`,
-            title: `Create new ${type.label}`,
+            title: t('pluto.content.createNew', { label: text.label }),
             parent: navId,
           },
         ]
       })
 
-    return [...registry.pages.list.value, ...contentPages]
+    const registered = registry.pages.list.value.map((page) => ({ ...page, title: tx(page.title) }))
+
+    return [...registered, ...contentPages]
   })
 
   const current = computed(() => items.value.find((page) => page.path === route.path))

package/app/composables/pluto-command-palette.ts

@@ -1,4 +1,5 @@
 import type { CommandPaletteGroup, CommandPaletteItem } from '@nuxt/ui'
+import { contentTextFor } from './internal/content-text'
 
 /**
  * Builds the admin command palette groups (`UDashboardSearch` in the
@@ -19,7 +20,12 @@ export function usePlutoCommandPalette() {
   const { items: navItems } = usePlutoAdminNav()
   const { items: contentTypes } = usePlutoContentTypes()
   const { can } = usePlutoPermissions()
+  const i18n = usePlutoI18n()
+  const { t, tx } = i18n
 
+  // Everything the palette shows resolves inside the `computed`, so a locale
+  // switch updates it. Nav labels arrive resolved from `usePlutoAdminNav`.
+  // `tx()` leaves a resolved label as it is.
   return computed<CommandPaletteGroup<CommandPaletteItem>[]>(() => {
     const seen = new Set<string>()
 
@@ -38,22 +44,23 @@ export function usePlutoCommandPalette() {
         return []
       }
       const basePath = type.basePath ?? `/admin/content/${type.name}`
-      return command(`New ${type.label}`, type.newPath ?? `${basePath}/new`, {
+      const text = contentTextFor(type, i18n)
+      return command(text.newLabel, type.newPath ?? `${basePath}/new`, {
         icon: 'lucide:plus',
-        suffix: type.labelPlural,
+        suffix: text.labelPlural,
       })
     })
 
     const goTo = navItems.value.flatMap((item) => [
-      ...(item.to ? command(item.label, item.to, { icon: item.icon }) : []),
+      ...(item.to ? command(tx(item.label), item.to, { icon: item.icon }) : []),
       ...(item.children ?? []).flatMap((child) =>
-        child.to ? command(child.label, child.to, { icon: item.icon, suffix: item.label }) : []
+        child.to ? command(tx(child.label), child.to, { icon: item.icon, suffix: tx(item.label) }) : []
       ),
     ])
 
     return [
-      { id: 'pluto-create', label: 'Create', items: create },
-      { id: 'pluto-go-to', label: 'Go to', items: goTo },
+      { id: 'pluto-create', label: t('pluto.common.create'), items: create },
+      { id: 'pluto-go-to', label: t('pluto.palette.goTo'), items: goTo },
     ].filter((group) => group.items.length > 0)
   })
 }

package/app/composables/pluto-content-actions.ts

@@ -3,15 +3,19 @@
  * placement. Matches an entry whose `contentType` is `typeName` or `'*'`,
  * the same matching rule `usePlutoContentFieldWidget` uses for field type.
  * `placement` defaults to 'toolbar', matching `PlutoContentAction.placement`.
+ * The label is key-or-literal. It resolves with `tx()` inside the `computed`.
  */
 export function usePlutoContentActions(typeName: string, placement: 'toolbar' | 'aside' = 'toolbar') {
   const registry = usePlutoRegistry()
+  const { tx } = usePlutoI18n()
 
   return computed(() =>
-    registry.contentActions.list.value.filter(
-      (action) =>
-        (action.contentType === typeName || action.contentType === '*') &&
-        (action.placement ?? 'toolbar') === placement
-    )
+    registry.contentActions.list.value
+      .filter(
+        (action) =>
+          (action.contentType === typeName || action.contentType === '*') &&
+          (action.placement ?? 'toolbar') === placement
+      )
+      .map((action) => ({ ...action, label: tx(action.label) }))
   )
 }

package/app/composables/pluto-content-list.ts

@@ -1,3 +1,13 @@
+export interface PlutoContentListOptions {
+  /**
+   * Rows per request. Set it to load the list page by page: the first page
+   * on creation, the next pages through `loadMore()`. Leave it unset for one
+   * request that returns every row (an adapter can cap that request; the
+   * Supabase adapter returns at most 1000 rows).
+   */
+  pageSize?: number
+}
+
 /**
  * Fetches one content type's list of items, for the generic list page
  * (`PlutoContentList`).
@@ -15,25 +25,86 @@
  * of `await`ing the composable's own return value through a hand-rolled
  * `.then()`.
  */
-export function usePlutoContentList(typeName: string) {
+export function usePlutoContentList(typeName: string, options: PlutoContentListOptions = {}) {
+  const { pageSize } = options
+  const url = `/api/_pluto/content/${typeName}`
+
   const items = ref<PlutoContentItem[]>([])
   const total = ref<number | undefined>(undefined)
   const pending = ref(false)
+  const loadingMore = ref(false)
+  /** `true` while more pages exist. Always `false` without `pageSize`. */
+  const hasMore = ref(false)
   const error = ref<unknown>(null)
 
+  // A refresh() while a page is in flight makes that page stale. Each fetch
+  // remembers the generation it started in, and drops its result when a
+  // newer refresh() has started since.
+  let generation = 0
+
+  function fetchPage(offset: number): Promise<PlutoContentListResult> {
+    return pageSize === undefined
+      ? $fetch<PlutoContentListResult>(url)
+      : $fetch<PlutoContentListResult>(url, { query: { limit: pageSize, offset } })
+  }
+
+  function updateHasMore(lastPageLength: number) {
+    if (pageSize === undefined) {
+      hasMore.value = false
+      return
+    }
+    // Without a total, a full page means there may be another one.
+    hasMore.value = total.value === undefined ? lastPageLength === pageSize : items.value.length < total.value
+  }
+
   async function refresh(): Promise<void> {
+    const current = ++generation
     pending.value = true
     error.value = null
 
     try {
-      const result = await $fetch<PlutoContentListResult>(`/api/_pluto/content/${typeName}`)
+      const result = await fetchPage(0)
+      if (current !== generation) {
+        return
+      }
       items.value = result.data
       total.value = result.total
+      updateHasMore(result.data.length)
     } catch (caught) {
-      error.value = caught
+      if (current === generation) {
+        error.value = caught
+      }
+      throw caught
+    } finally {
+      if (current === generation) {
+        pending.value = false
+      }
+    }
+  }
+
+  /** Appends the next page. Does nothing without `pageSize`, without more pages, or while a fetch runs. */
+  async function loadMore(): Promise<void> {
+    if (!hasMore.value || pending.value || loadingMore.value) {
+      return
+    }
+    const current = generation
+    loadingMore.value = true
+
+    try {
+      const result = await fetchPage(items.value.length)
+      if (current !== generation) {
+        return
+      }
+      items.value = [...items.value, ...result.data]
+      total.value = result.total ?? total.value
+      updateHasMore(result.data.length)
+    } catch (caught) {
+      if (current === generation) {
+        error.value = caught
+      }
       throw caught
     } finally {
-      pending.value = false
+      loadingMore.value = false
     }
   }
 
@@ -47,14 +118,24 @@ export function usePlutoContentList(typeName: string) {
 
   async function remove(id: string | number): Promise<void> {
     try {
-      await $fetch(`/api/_pluto/content/${typeName}/${id}`, { method: 'DELETE' })
+      await $fetch(`${url}/${id}`, { method: 'DELETE' })
     } catch (caught) {
       error.value = caught
       throw caught
     }
 
-    await refresh()
+    if (pageSize === undefined) {
+      await refresh()
+      return
+    }
+
+    // Paged: drop the row in place, so the user keeps the pages already
+    // loaded and the scroll position.
+    items.value = items.value.filter((item) => item.id !== id)
+    if (total.value !== undefined) {
+      total.value = Math.max(0, total.value - 1)
+    }
   }
 
-  return { items, total, pending, error, refresh, remove }
+  return { items, total, pending, loadingMore, hasMore, error, refresh, loadMore, remove }
 }

package/app/composables/pluto-content-text.ts

@@ -0,0 +1,28 @@
+import { createContentText } from './internal/content-text'
+
+/**
+ * The translated text of one content type. Each value is the convention key
+ * (`content.<name>.label`, `.labelPlural`, `.new`, `.fields.<field>.label`
+ * and more) when the key exists, else the English literal of the type. A type
+ * with no keys keeps its English text.
+ *
+ * Read the values inside a template or a `computed`, so a locale switch
+ * updates them. Server code and code that reads `type.label` directly keep
+ * the English text.
+ */
+export function usePlutoContentText(type: MaybeRefOrGetter<PlutoContentType | undefined>) {
+  const { t, te, locale } = usePlutoI18n()
+  return createContentText(() => toValue(type), { t, te, locale })
+}
+
+/**
+ * Returns a function that gives the translated text of a content type by its
+ * `name`. Use it where one component shows many types, such as the dashboard
+ * tiles. See `usePlutoContentText`.
+ */
+export function usePlutoContentTexts() {
+  const { t, te, locale } = usePlutoI18n()
+  const { byName } = usePlutoContentTypes()
+
+  return (name: string) => createContentText(() => byName(name), { t, te, locale })
+}

package/app/composables/pluto-dashboard.ts

@@ -1,5 +1,18 @@
-/** Widgets shown on the admin dashboard (`/admin/home`). */
+/**
+ * Widgets shown on the admin dashboard (`/admin/home`). A widget title is
+ * key-or-literal. It resolves with `tx()` inside the `computed`, so a locale
+ * switch updates it.
+ */
 export function usePlutoDashboardWidgets() {
   const registry = usePlutoRegistry()
-  return { items: registry.dashboardWidgets.list }
+  const { tx } = usePlutoI18n()
+
+  const items = computed<PlutoDashboardWidget[]>(() =>
+    registry.dashboardWidgets.list.value.map((widget) => ({
+      ...widget,
+      title: widget.title === undefined ? undefined : tx(widget.title),
+    }))
+  )
+
+  return { items }
 }

package/app/composables/pluto-error.ts

@@ -0,0 +1,13 @@
+import { DEFAULT_ERROR_KEY, resolveErrorText } from './internal/error-text'
+
+/**
+ * Returns a function that turns an error into text for the admin. It prefers
+ * the translation key that a server `createPlutoError` sent (`data.i18n`),
+ * then the server `statusMessage` or `message`, then the fallback key. The
+ * default fallback is `pluto.errors.unknown`.
+ */
+export function usePlutoErrorText() {
+  const { t, te } = usePlutoI18n()
+
+  return (error: unknown, fallbackKey: string = DEFAULT_ERROR_KEY): string => resolveErrorText(error, fallbackKey, { t, te })
+}

package/app/composables/pluto-extension.ts

@@ -20,6 +20,10 @@ export function definePlutoExtension(definition: PlutoExtension): void {
     definition.id,
     definition.settingsDriver ? [definition.settingsDriver] : []
   )
+  registry.localeDrivers.set(
+    definition.id,
+    definition.localeDriver ? [definition.localeDriver] : []
+  )
   registry.dashboardWidgets.set(definition.id, definition.dashboardWidgets ?? [])
   registry.capabilities.set(definition.id, definition.capabilities ?? [])
   registry.permissionsDrivers.set(

package/app/composables/pluto-i18n.ts

@@ -0,0 +1,171 @@
+import type { MessageParams } from './internal/i18n-core'
+import {
+  createTranslator,
+  formatDate,
+  formatNumber,
+} from './internal/i18n-core'
+import {
+  ADMIN_LOCALE_COOKIE,
+  detectAdminLocale,
+  getConfig,
+  loadPlutoLocale,
+  messageCache,
+  readAdminPreference,
+  SITE_LOCALE_COOKIE,
+  uiLocaleCache,
+  useLocaleCookie,
+} from './internal/i18n-runtime'
+
+/** Missing keys already reported. Shared, so a key warns once per process. */
+const warnedKeys = new Set<string>()
+
+function warnOnce(message: string) {
+  if (import.meta.dev && !warnedKeys.has(message)) {
+    warnedKeys.add(message)
+    console.warn(message)
+  }
+}
+
+/**
+ * The state both scopes share: the active locale, the translator, the
+ * formatters, and the Nuxt UI locale object. The admin and the site keep a
+ * separate active locale and a shared message cache.
+ */
+function useLocaleScope(scope: 'admin' | 'site') {
+  const config = getConfig()
+  const state = useState<string>(`pluto-${scope}-locale`, () => config.defaultLocale)
+  const locales = scope === 'admin' ? config.adminLocales : config.siteLocales
+
+  const { t, te, tx } = createTranslator({
+    locale: () => state.value,
+    fallbackLocale: 'en',
+    messages: (code) => messageCache.get(code),
+    warn: warnOnce,
+  })
+
+  return {
+    state,
+    locales,
+    locale: computed(() => state.value),
+    uiLocale: computed(() => uiLocaleCache.get(state.value) ?? uiLocaleCache.get('en')),
+    t: (key: string, params?: MessageParams | number) => t(key, params),
+    tx: (value: string, params?: MessageParams | number) => tx(value, params),
+    te,
+    n: (value: number, options?: Intl.NumberFormatOptions) => formatNumber(state.value, value, options),
+    d: (value: Date | number | string, options?: Intl.DateTimeFormatOptions) => formatDate(state.value, value, options),
+  }
+}
+
+/**
+ * Translation for the admin. The admin locale is per user: a stored choice
+ * (cookie, and the registered locale driver), else the browser language, else
+ * the default locale.
+ *
+ * `tx(value)` translates a key-or-literal string. It translates only when the
+ * value looks like a key and the key exists. Any other value returns as it is.
+ */
+export function usePlutoI18n() {
+  const scope = useLocaleScope('admin')
+  const registry = usePlutoRegistry()
+  const cookie = useLocaleCookie(ADMIN_LOCALE_COOKIE)
+  const driver = computed(() => registry.localeDrivers.list.value.at(-1) ?? null)
+
+  /** The stored choice. Null means Automatic. */
+  const preference = useState<string | null>('pluto-admin-locale-preference', () => readAdminPreference())
+
+  async function switchTo(code: string) {
+    await loadPlutoLocale(code)
+    scope.state.value = code
+  }
+
+  /**
+   * Switches the admin language at once. A code is an explicit choice. Null is
+   * Automatic: the browser language is detected again. The cookie keeps the
+   * explicit code, or is cleared for Automatic. Then the registered locale
+   * driver, if any, saves the choice. A driver error rejects the promise, and
+   * the switch stays.
+   */
+  async function setLocale(code: string | null) {
+    if (code !== null && !scope.locales.includes(code)) {
+      return
+    }
+    await switchTo(code ?? detectAdminLocale())
+    preference.value = code
+    cookie.value = code
+    await driver.value?.save(code)
+  }
+
+  /**
+   * Reads the user's stored language from the locale driver. A stored code
+   * switches the admin to it and sets the cookie. No stored code means
+   * Automatic: the cookie is cleared, and the browser language applies. With
+   * no driver, or on a driver error, nothing changes.
+   */
+  async function syncUserLocale() {
+    if (!driver.value) {
+      return
+    }
+    let stored: string | null
+    try {
+      stored = await driver.value.load()
+    } catch (error) {
+      warnOnce(`[pluto-i18n] Could not load the user's language: ${error instanceof Error ? error.message : String(error)}`)
+      return
+    }
+    if (stored && scope.locales.includes(stored)) {
+      await switchTo(stored)
+      preference.value = stored
+      cookie.value = stored
+    } else {
+      await switchTo(detectAdminLocale())
+      preference.value = null
+      cookie.value = null
+    }
+  }
+
+  return {
+    locale: scope.locale,
+    locales: computed(() => scope.locales),
+    uiLocale: scope.uiLocale,
+    preference: computed(() => preference.value),
+    t: scope.t,
+    tx: scope.tx,
+    te: scope.te,
+    n: scope.n,
+    d: scope.d,
+    setLocale,
+    syncUserLocale,
+  }
+}
+
+/**
+ * Translation for the public site. The site locale belongs to the app: the
+ * `pluto-site-locale` cookie, else the `plutoI18n.siteLocale` option, else the
+ * default locale. It does not follow the admin language.
+ */
+export function usePlutoSiteI18n() {
+  const scope = useLocaleScope('site')
+  const cookie = useLocaleCookie(SITE_LOCALE_COOKIE)
+
+  /** Switches the site language, and keeps it in the `pluto-site-locale` cookie. */
+  async function setLocale(code: string) {
+    if (!scope.locales.includes(code)) {
+      return
+    }
+    await loadPlutoLocale(code)
+    scope.state.value = code
+    cookie.value = code
+  }
+
+  return {
+    locale: scope.locale,
+    locales: computed(() => scope.locales),
+    uiLocale: scope.uiLocale,
+    t: scope.t,
+    tx: scope.tx,
+    te: scope.te,
+    n: scope.n,
+    d: scope.d,
+    setLocale,
+  }
+}

package/app/composables/pluto-permissions.ts

@@ -1,7 +1,21 @@
-/** Capabilities declared by every layer, in registry order. */
+/**
+ * Capabilities declared by every layer, in registry order. The label and the
+ * description are key-or-literal. They resolve with `tx()` inside the
+ * `computed`, so a locale switch updates them.
+ */
 export function usePlutoCapabilities() {
   const registry = usePlutoRegistry()
-  return { items: registry.capabilities.list }
+  const { tx } = usePlutoI18n()
+
+  const items = computed<PlutoCapability[]>(() =>
+    registry.capabilities.list.value.map((capability) => ({
+      ...capability,
+      label: tx(capability.label),
+      description: capability.description === undefined ? undefined : tx(capability.description),
+    }))
+  )
+
+  return { items }
 }
 
 /**

package/app/composables/pluto-registry.ts

@@ -20,6 +20,7 @@ export function usePlutoRegistry(): PlutoRegistry {
       pages: createOwnedRegistry<PlutoAdminPage>(),
       settingsPanels: createOwnedRegistry<PlutoSettingsPanel>(),
       settingsDrivers: createOwnedRegistry<PlutoSettingsDriver>(),
+      localeDrivers: createOwnedRegistry<PlutoLocaleDriver>(),
       dashboardWidgets: createOwnedRegistry<PlutoDashboardWidget>(),
       capabilities: createOwnedRegistry<PlutoCapability>(),
       permissionsDrivers: createOwnedRegistry<PlutoPermissionsDriver>(),

package/app/composables/pluto-settings.ts

@@ -1,7 +1,21 @@
-/** Settings panels registered by every layer, in registry order. */
+/**
+ * Settings panels registered by every layer, in registry order. The title and
+ * the description are key-or-literal. They resolve with `tx()` inside the
+ * `computed`, so a locale switch updates them.
+ */
 export function usePlutoSettingsPanels() {
   const registry = usePlutoRegistry()
-  return { items: registry.settingsPanels.list }
+  const { tx } = usePlutoI18n()
+
+  const items = computed<PlutoSettingsPanel[]>(() =>
+    registry.settingsPanels.list.value.map((panel) => ({
+      ...panel,
+      title: tx(panel.title),
+      description: panel.description === undefined ? undefined : tx(panel.description),
+    }))
+  )
+
+  return { items }
 }
 
 /**

package/app/layouts/admin.vue

@@ -34,6 +34,7 @@ const menu = computed<SidebarMenuItem[]>(() => navItems.value.map(toMenuItem))
 const isSidebarOpen = useState<boolean>('pluto-admin-sidebar-open', () => false)
 
 const commandGroups = usePlutoCommandPalette()
+const { t } = usePlutoI18n()
 
 // Keep the consumer app's public-site theme out of the admin.
 usePlutoAdminTheme()
@@ -95,6 +96,6 @@ const groupStyle = { top: 'var(--ui-header-height)' }
     </UDashboardPanel>
 
     <!-- Cmd/Ctrl+K. See usePlutoCommandPalette for the commands. -->
-    <UDashboardSearch :groups="commandGroups" placeholder="Search pages and actions…" />
+    <UDashboardSearch :groups="commandGroups" :placeholder="t('pluto.palette.placeholder')" />
   </UDashboardGroup>
 </template>

package/app/pages/admin/content/[type]/[id].vue

@@ -3,14 +3,16 @@ const route = useRoute()
 const typeName = route.params.type as string
 
 const { byName } = usePlutoContentTypes()
+const { t } = usePlutoI18n()
 const type = byName(typeName)
+const text = usePlutoContentText(type)
 
 if (!type) {
   throw createError({ statusCode: 404, statusMessage: 'Content type not found.', fatal: true })
 }
 
 useHead({
-  title: `Edit ${type.label}`,
+  title: () => t('pluto.content.edit', { label: text.label }),
 })
 </script>