Using Jitsu with Nuxt.js

Install Jitsu#

Add Jitsu as a plugin#

If you used Create Nuxt App to build your Nuxt project, your directory structure should look something like this

Navigate to the /plugins directory inside your Nuxt project and create a new jitsu.js file

Inside your jitsu.js plugin file you should import jitsu and initialize it

const { jitsuClient } = require('@jitsu/sdk-js')
const jitsu = jitsuClient({
  key: "[CLIENT_KEY]",
})

export default (context, inject) => {
  inject('jitsu', jitsu)
}

Now you need to add your newly created plugin to you project configuration

// nuxt.config.js

  plugins: [
    { src: '~/plugins/jitsu', mode: 'client' },
  ],

Make sure the Jitsu plugin is set to client mode so it doesn't throw an error trying to detect window objects

Implement Jitsu#

Jitsu should now be available globally in your project, here's an example of accessing the jitsu client in a Nuxt page

<template>
    <button @click="trackClick">
        Buy Now
    </button>
</template>

<script>
    methods: {
        trackClick() {
            this.$jitsu.track('buy_button_click', {
                product_id: '1e48fb70-ef12-4ea9-ab10-fd0b910c49ce',
                product_price: 399,
                price_currency: 'USD'
            });
        }
    },
</script>