mahee-auffret/app.vue

<template>
  <Header />
  <main>
    <NuxtPage />
  </main>
</template>

<script setup>
  const { getItems } = useDirectusItems();
  const global = ref([]);
  onMounted(async () => {
    const items = await getItems({ collection: "global" });
    global.value = items;
  });

  provide('globalData', global);

  useSeoMeta({
    ogImage: '/card.jpg',
    ogImageAlt: global.value.contact_image_titre,
    twitterImage: '/card.jpg',
  });

  useHead({
    htmlAttrs: {
      lang: 'fr'
    },
    link: [
      {
        rel: 'icon',
        type: 'image/png',
        href: 'favicon.png'
      }
    ]
  });
</script>

<style lang="scss">
  @font-face {
      font-family: 'Latitude';
      src: url('assets/fonts/latitude-webfont.woff2') format('woff2'),
           url('assets/fonts/latitude-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  }

  * {
    margin: 0;
    box-sizing: border-box;
    font-family: 'Latitude', serif;
    font-size: 1.1rem;
    font-weight: normal;
    text-decoration: none;
    color: #0e312f;
  }

  body {
    padding: 1rem;
    header {
      z-index: 1;
    }
    main {
      z-index: 0;
    }
  }

  .page-enter-active,
  .page-leave-active {
    transition: all 0.2s;
  }
  .page-enter-from,
  .page-leave-to {
    opacity: 0;
  }
</style>