Vue

Examples of common tiun SDK patterns in Vue 3. Each section is standalone — use what applies to your integration.

For Nuxt (SSR), see the Nuxt example.

---

Initialize

Initialize the SDK in onMounted of your root component (typically App.vue).

<script setup>
import { tiun } from '@tiun/sdk';
import { onMounted } from 'vue';

onMounted(() => {
  tiun.init({
    snippetId: 'YOUR_SNIPPET_ID',
    language: 'en', // 'en' | 'de' | 'fr'
  });
});
</script>

<template>
  <!-- your app -->
</template>

You don't need to call tiun.destroy() from the root — the root only unmounts when the page is gone. See Lifecycle and destroy() for when teardown is needed.

---

Checkout

Trigger checkout on a button click. Pass the product ID from your dashboard.

<script setup>
import { tiun } from '@tiun/sdk';
</script>

<template>
  <div>
    <button @click="tiun.checkout({ productId: 'p-live-light' })">
      Light — EUR 19/mo
    </button>
    <button @click="tiun.checkout({ productId: 'p-live-pro' })">
      Pro — EUR 199/mo
    </button>
  </div>
</template>

---

Listen for user changes

Track authentication and access state with userChange. Store it in reactive refs so your components update automatically.

<script setup>
import { tiun } from '@tiun/sdk';
import { ref, onMounted } from 'vue';

const isAuthenticated = ref(false);
const user = ref(null);

onMounted(() => {
  // Register before init so the initial userChange ('init') fires into your handler.
  tiun.on('userChange', (data) => {
    isAuthenticated.value = data.isAuthenticated;
    user.value = data.user;
  });

  tiun.init({ snippetId: 'YOUR_SNIPPET_ID', language: 'en' });
});
</script>

<template>
  <p v-if="isAuthenticated">Logged in as {{ user.email }}</p>
  <p v-else>Not logged in</p>
</template>

---

Gate content

Show or hide content based on productAccess.

<script setup>
import { tiun } from '@tiun/sdk';
import { ref, computed, onMounted } from 'vue';

const isAuthenticated = ref(false);
const user = ref(null);

onMounted(() => {
  tiun.on('userChange', (data) => {
    isAuthenticated.value = data.isAuthenticated;
    user.value = data.user;
  });
});

const hasPro = computed(() =>
  user.value?.productAccess?.includes('p-live-pro')
);
</script>

<template>
  <div v-if="!isAuthenticated">
    <p>Please log in or subscribe.</p>
  </div>

  <div v-else-if="hasPro">
    <!-- Pro content -->
  </div>

  <div v-else>
    <button @click="tiun.checkout({ productId: 'p-live-pro' })">
      Upgrade to Pro
    </button>
  </div>
</template>

---

Login and logout

Add authentication buttons to your navigation.

<script setup>
import { tiun } from '@tiun/sdk';
import { ref, onMounted } from 'vue';

const isAuthenticated = ref(false);
const user = ref(null);

onMounted(() => {
  tiun.on('userChange', (data) => {
    isAuthenticated.value = data.isAuthenticated;
    user.value = data.user;
  });
});
</script>

<template>
  <nav v-if="isAuthenticated">
    <span>{{ user.email }}</span>
    <button @click="tiun.logout()">Log out</button>
  </nav>

  <nav v-else>
    <button @click="tiun.login()">Log in</button>
  </nav>
</template>

---

Paywall events (time-based)

For time-based billing, use paywallShow and paywallHide to control access.

<script setup>
import { tiun } from '@tiun/sdk';
import { ref, onMounted } from 'vue';

const hasAccess = ref(false);

onMounted(() => {
  tiun.on('paywallHide', () => { hasAccess.value = true; });
  tiun.on('paywallShow', () => { hasAccess.value = false; });
});
</script>

<template>
  <div v-if="!hasAccess">
    <h2>Premium content</h2>
    <button @click="tiun.start()">
      Get access
    </button>
  </div>

  <slot v-else />
</template>

---

Content management (time-based)

Call setContent() on route changes to keep billing accurate.

<script setup>
import { tiun } from '@tiun/sdk';
import { watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

watch(
  () => route.path,
  (path) => {
    const isPaid = isPaidContent(path);
    tiun.setContent({
      type: isPaid ? 'active' : 'inactive',
      contentId: path
    });
  },
  { immediate: true }
);
</script>