HomeMap.vue

<template>
  <section id="map">
    <div class="container flex items-end mb-3 pl-8">
      <FaviconMap class="w-12 h-12 mr-3 fill-current dark:text-gray-100" />
      <a
        href="https://carte.monnaie-libre.fr"
        target="_blank"
        class="
          group
          bg-clip-text bg-gradient-to-r
          font-extrabold
          from-purple-800
          hover:underline
          text-4xl text-transparent
          to-blue-600
          uppercase
        "
        rel="noopener noreferrer"
      >
        Carte
        <fa
          icon="external-link-alt"
          class="w-3 ml-1.5 text-gray-500 opacity-0 group-hover:opacity-75"
        />
      </a>
    </div>

    <iframe
      :src="intersected ? $config.map_url : null"
      class="w-full bg-gray-200"
      style="height: 50vh; min-height: 600px"
      title="Carte monnaie-libre"
    />
  </section>
</template>

<script>
import FaviconMap from '~/static/img/favicon-map-g1.svg?inline'

export default {
  components: {
    FaviconMap,
  },
  data() {
    return {
      observer: null,
      intersected: false,
    }
  },
  mounted() {
    this.observer = new IntersectionObserver(
      (entries) => {
        const item = entries[0]
        if (item.isIntersecting) {
          this.intersected = true
          this.observer.disconnect()
        }
      },
      {
        rootMargin: '500px',
      }
    )

    this.observer.observe(this.$el)
  },
  destroyed() {
    this.observer.disconnect()
  },
}
</script>