hochzeit/src/components/Components.vue

<template>
  <div v-for="component in componentStore.components" :key="component.id">
    <div v-if="component.bg === true" class="component component-bg-top"> </div>
    <div :class="`component component-padding ${component.type}`">
        <h3>{{component.label}}</h3>
        <Content :jsonContent="component.content" />
    </div>
    <div v-if="component.bg === true" class="component component-bg-bottom"> </div>
  </div>
</template>

<script lang="ts">
 import { useComponentStore } from '@/stores/component'
 import { useI18n } from 'vue-i18n'
 import Content from '@/components/Content.vue'

  export default {
      components:{Content},
      setup(){
        const { t, locale } = useI18n({
          inheritLocale: true
        })
        const componentStore = useComponentStore()

        return{
          t,
          locale,
          componentStore
        }
      }
  }
</script>