Typescript
- 1 Minute to read
- Print
- DarkLight
Typescript
- 1 Minute to read
- Print
- DarkLight
Article summary
Did you find this summary helpful?
Thank you for your feedback
Vue3 provides native typescript support. Mapp Intelligence can be implemented like this:
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:
<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>
Was this article helpful?