Skip to main content

Getting Started with Vue

This guide will build upon Getting Started with Uniform Optimize, which discusses setting up the packages inside your project and initializing a default version of your project's tracker. Please complete the steps in that guide before proceeding through this one.

Install Package#

First, we need to install the Vue components package.

npm install @uniformdev/optimize-tracker-vue

Install Uniform Optimize Plugin#

note

Ensure that you can create a tracker instance.

Create a tracker instance
import { createDefaultTracker } from '@uniformdev/optimize-tracker-browser';import intentManifest from './intentManifest.json';
const localTracker = createDefaultTracker({  intentManifest,});
export default localTracker;

Install the UniformOptimizePlugin where you normally declare Vue plugins via Vue.use:

import Vue from 'vue';import { UniformOptimizePlugin } from '@uniformdev/optimize-tracker-vue';import trackerInstance from '../lib/localTracker';
Vue.use(UniformOptimizePlugin, {  trackerInstance,});
new Vue({  // ...app options});

With the UniformOptimizePlugin plugin installed, you have global access to the tracker instance via this.$uniformOptimizeContext.tracker in your Vue app.

tip

The Optimize tracker instance needs to be initialized before it can be used. The UniformOptimizePlugin will automatically initialize the tracker instance for you if not already initialized. However, tracker initialization is asynchronous, and therefore initial rendering of any personalized components may need a loading indicator. You can avoid this by initializing the tracker before installing the UniformOptimizePlugin and creating/mounting the Vue instance.

import Vue from 'vue';import { UniformOptimizePlugin } from '@uniformdev/optimize-tracker-vue';import trackerInstance from '../lib/localTracker';
trackerInstance.initialize().then(() => {  Vue.use(UniformOptimizePlugin, {    trackerInstance,  });
  new Vue({    // ...app options  });});

Personalization#

The <personalize/> Vue component is the gateway to selecting the most relevant content to the current visitor based on a list of variations. Learn more about the <personalize/> component.

Behavior Tracking#

Visitor behavior is determined by being shown content tagged with one or more intents. This tracking requires a React hook. Learn more about behavior tracking.