Skip to main content

Getting Started with Vue

Optimize Deprecation

Uniform Optimize has been deprecated and replaced by Context, a more powerful and flexible personalization solution. Optimize is not being discontinued at this time, but it will not receive updates or new features.

We do not recommend starting a new project with Optimize. If you have an existing project that uses Optimize, you can upgrade your project to Context at no cost using our upgrade guide. If you have any issues with this process you can contact our team.

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.