# 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](/sdk/examples/nuxt.md).

***

## Initialize

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

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

{% hint style="info" %}
You don't need to call `tiun.destroy()` from the root — the root only unmounts when the page is gone. See [Lifecycle and `destroy()`](/sdk/getting-started/initialization.md#lifecycle-and-destroy) for when teardown is needed.
{% endhint %}

***

## Checkout

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

```vue
<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.

```vue
<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`.

```vue
<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.

```vue
<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.

```vue
<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.

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tiun.io/sdk/examples/vue.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.