nuxt.md

title	Nuxt

Installation

::: tip Demo Site In this guide, we will be using this Nuxt demo website to install the Variate Nuxt module. Feel free to clone the repo, and run it locally (reference the readme). :::

Install the Variate for Nuxt package

npm install @variate/nuxt

Quick Start

Create a starter config file

Create a file called variate.json in the source directory of your Nuxt project (as seen here) with valid json to get started:

// app/variate.json
{}

Create Variate middleware

Create a middleware/variate.js file. It will be used to initialize Variate, pass in the route object and any targeting values of your choice:

export default function ({ app: { $variate }, route }) {
  if($variate) {
    $variate.initialize({
      view: route,
      targeting: {
        ...
      }
    });
  }
};

Initialize the plugin

In nuxt.config.js, add the following:

/*
  ** Plugins to load before mounting the App
  */
  plugins: [...],

  variate: {
    debug: true,
    pageview: false,
    tracking: {
        enabled: true,
        default: false,
        reporter: async() => true
    }, 
  }

  router: {
    middleware: 'variate'
  },

  /*
  ** Nuxt.js modules
  */
  modules: [
      '@variate/nuxt'
  ],

To verify that Variate has been initialized, open Chrome Dev Tools. This is the message that should appear there: