framit/app/app.vue

<template>
  <UApp :locale="locales[locale]">
    <AppNavbar />
    <UMain>
      <NuxtPage />
    </UMain>
    <AppFooter />
  </UApp>
</template>

<script setup lang="ts">
import * as locales from '@nuxt/ui/locale';
const { locale } = useI18n();
const lang = computed(() => locales[locale.value].code);
const dir = computed(() => locales[locale.value].dir);
const { urlBase, fediverseCreator } = useRuntimeConfig().public;
const route = useRoute();
const url = computed(() => urlBase.replace(/\/+$/, '') + route.fullPath);

useHead({
  htmlAttrs: {
    dir,
    lang,
  },
  link: [
    { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
    { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
    { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
    { rel: 'manifest', href: '/site.webmanifest' },
  ],
  meta: fediverseCreator !== '' ? [{ name: 'fediverse:creator', content: fediverseCreator + '' }] : [],
});

useSeoMeta({
  ogImage: '/leon.png',
  twitterImage: '/leon.png',
  ogUrl: url,
});
</script>