Nuxt (SSR)

Since Nuxt renders pages on the server first, the tiun SDK must only initialize on the client. The recommended approach is to set up everything in your app.vue using onMounted.

For plain Vue 3 (no SSR), see the Vue example.

---

Initialize

Initialize tiun inside onMounted in your app.vue. The !tiun.isInitialized guard prevents double initialization, which can happen in Nuxt during development.

<!-- app.vue -->
<script setup>
import { tiun } from '@tiun/sdk';
import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  if (!tiun.isInitialized) {
    tiun.init({
      snippetId: 'YOUR_SNIPPET_ID',
      language: 'en', // set to your site's language
    });
  }
});

onUnmounted(() => {
  tiun.destroy();
});
</script>

<template>
  <NuxtPage />
</template>

---

Checkout

Trigger checkout from any component. The SDK is already initialized in app.vue, so you can call methods directly.

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

---

Shared state with useState

Use Nuxt's useState to create reactive state that any component can read. This is SSR-safe and works across the app without prop drilling.

<!-- app.vue -->
<script setup>
import { tiun } from '@tiun/sdk';
import { onMounted, onUnmounted } from 'vue';

const isAuthenticated = useState('isAuthenticated', () => false);
const user = useState('user', () => null);

onMounted(() => {
  if (!tiun.isInitialized) {
    tiun.init({
      snippetId: 'YOUR_SNIPPET_ID',
      language: 'en',
    });
  }

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

onUnmounted(() => {
  tiun.destroy();
});
</script>

Any component can then read the shared state:

<script setup>
const isAuthenticated = useState('isAuthenticated');
const user = useState('user');
</script>

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

---

Gate content

Use useState values in any page or component to show or hide content based on productAccess.

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

const isAuthenticated = useState('isAuthenticated');
const user = useState('user');
</script>

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

  <div v-else-if="user?.productAccess?.includes('p-live-pro')">
    <!-- Pro content -->
  </div>

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

---

Paywall events (time-based)

For time-based billing, use paywallShow and paywallHide to control access. Wire them to shared state in app.vue.

<!-- app.vue -->
<script setup>
import { tiun } from '@tiun/sdk';
import { onMounted, onUnmounted } from 'vue';

const showPaywall = useState('showPaywall', () => true);

onMounted(() => {
  if (!tiun.isInitialized) {
    tiun.init({
      snippetId: 'YOUR_SNIPPET_ID',
      language: 'en',
    });
  }

  tiun.on('paywallShow', () => {
    showPaywall.value = true;
  });

  tiun.on('paywallHide', () => {
    showPaywall.value = false;
  });
});

onUnmounted(() => {
  tiun.destroy();
});
</script>

Then in any component:

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

const showPaywall = useState('showPaywall');
</script>

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

  <article v-else>
    <!-- premium content -->
  </article>
</template>

---

Content management (time-based)

Track route changes to keep billing accurate. Use router.afterEach with an import.meta.client guard so it only runs in the browser. Send the initial content state when the SDK is ready.

<!-- app.vue -->
<script setup>
import { tiun } from '@tiun/sdk';
import { onMounted, onUnmounted } from 'vue';

const router = useRouter();

onMounted(() => {
  if (!tiun.isInitialized) {
    tiun.init({
      snippetId: 'YOUR_SNIPPET_ID',
      language: 'en',
    });
  }

  tiun.on('ready', () => {
    sendContentState(router.currentRoute.value);
  });
});

onUnmounted(() => {
  tiun.destroy();
});

function sendContentState(route) {
  const isPaid = route.path !== '/';
  tiun.setContent({
    type: isPaid ? 'active' : 'inactive',
    contentId: route.params?.slug || route.path
  });
}

if (import.meta.client) {
  router.afterEach((to) => {
    if (!tiun.isReady) return;
    sendContentState(to);
  });
}
</script>

---

Alternative: plugin approach

Instead of app.vue, you can initialize tiun in a Nuxt plugin. The .client.ts suffix ensures it only runs in the browser.

// plugins/tiun.client.ts
import { tiun } from '@tiun/sdk';

export default defineNuxtPlugin(() => {
  tiun.init({
    snippetId: 'YOUR_SNIPPET_ID',
    language: 'en',
  });
});

This runs before any component mounts, but you lose the onUnmounted cleanup. The app.vue approach gives you more control over the full lifecycle.