Vue 3-Leitfaden

Nutzen Sie die Composition API für eine nahtlose Integration in Ihre Vue 3 App. Dieser Ansatz gewährleistet Reaktivität und korrektes DOM-Mounting.

✓

Composition API

Saubere script setup Syntax.

✓

Scoped Styles

Shadow DOM verhindert Style-Überlaufe.

Komponenten Code

Zurück zum Konfigurator

<script setup lang="ts">
import { onMounted } from 'vue';

onMounted(() => {
  // Load the widget script
  const script = document.createElement('script');
  script.src = 'https://thecalendarweek.com/embed.js';
  script.async = true;
  
  script.onload = () => {
    // Initialize widget after script loads
    if (window.TheCalendarWeek) {
      window.TheCalendarWeek.init();
    }
  };
  
  document.body.appendChild(script);
});
</script>

<template>
  <div
    class="tcw-embed"
    data-design="dashboard"
    data-variant="weekdays"
  />
</template>