Vue 3 Guide

Use the Composition API to seamlessly integrate the widget into your Vue 3 application. This approach ensures reactivity and proper DOM mounting.

✓

Composition API

Clean script setup syntax.

✓

Scoped Styles

Shadow DOM ensures no style leakage.

Component Code

Back to Configurator

<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>