cpm-nuxt/App.vue

<template>
  <img id="banner-media" src="/images/header-banalites.jpg"/>
  <header>
    <CPMMenu :items="contents.sections"/>
  </header>

  <main>
    <section v-for="section in innerSections" v-html="section.content">
    </section>
  </main>

</template>


<script setup>

    const contents = await $fetch('/api/contents');
    const innerSections = contents.sections.filter((item) => item.content);

</script>


<style lang="scss">

  * {
    margin : 0;
    padding: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
  }

  #banner-media {
    width: 100vw;
  }

  main {
    width : 80vw;
    margin: auto;

    section {
      margin-top: 50px;

      h1 {
        font-size : 1.5rem;
      }

      h2 {
        font-size : 1.3rem;
      }

      figure {
        margin-bottom : 25px;
        img {
          width : 100%;
        }
        figcaption {
          text-align: center;
          color: white;
          background-color: black;
        }
      }
    }
  }
</style>