---
title: "Typescript"
slug: "typescript"
updated: 2024-03-21T13:23:37Z
published: 2024-03-21T13:23:37Z
canonical: "docs.mapp.com/typescript"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mapp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Typescript

Vue3 provides native typescript support. Mapp Intelligence can be implemented like this:

```javascript
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import WebtrekkSmartpixelVue, {
	WebtrekkSmartpixelVueOptions,
} from "@webtrekk-smart-pixel/vue";

const webtrekkConfig: WebtrekkSmartpixelVueOptions = {
	trackId: "136699033798929",
	trackDomain: "analytics01.wt-eu02.net",
	activateLinkTracking: true,
	activateAutoTracking: router,
	activateTeaserTracking: true,
	activateProductListTracking: true,
	activateContentEngagement: true,
	secureCookie: false,
};

createApp(App)
	.use(store)
	.use(router)
	.use(WebtrekkSmartpixelVue, webtrekkConfig)
	.mount("#app");
```

You can use Smart Pixel in your components as described above. A simple component could look like this:

```xml
<template>
	<div>
		<h2>{{ content.title }}</h2>
		<p v-html="content.content"></p>
		<Child />
	</div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { getFixtureData } from "@/helpers/fixture";
import Child from "@/components/Child.vue";

export default defineComponent({
	name: "Home",
	components: {
		Child
	},
	data() {
		return {
			content: {},
			webtrekk: {
				page: {
					parameter: {
						1: "Homepage"
					}
				}
			}
		};
	},
	beforeCreate() {
		getFixtureData("pages/slug/home").then(data => {
			this.content = data[0];
		});
	}
});
</script>
```