NodeJS Example using Vue Framework and Nuxt library with Server Side Rendering

Example: Basic Code to use NodeJS Split SDK 10.15.0 or latest with Vue Framework and Nuxt Library using Server Side Rendering.

Environment:

• Nuxt 2.0.0
• Node 10.15.3
• Vue 2.6.12

Steps to Run the app:

1- Download the zip file from link below and extract it in new folder

2- Run the command below to install dependencies:

npm install

3- The Split NodeJS SDK is loaded as a Vue plugin in /plugins/splitAPI.server.js, the file name contain "server" to force load the SDK only in server side.
4- Note that we had to set the authorizationKey parameter after the object is created as once the factory object initialize, all the config values are emptied

5- To initialize the Split factory object as singleton (only once), we stored the factory object in Vue instance property, and then just re-use the same property afterwards. Make sure to replace the 'SDK API Key' with a valid API Key type "sdk".

import Vue from 'vue'
import { SplitFactory } from '@splitsoftware/splitio';

if (!Vue.prototype.hasOwnProperty('$factory')) {
    let factory = SplitFactory({
        core: {
            authorizationKey: '',
        },
    });
    factory.Logger.enable();
    factory.settings.core.authorizationKey = 'SDK API KEY'
    Vue.prototype.$factory = factory
}
export default (context, inject) => {
    inject('factory', Vue.prototype.$factory)
    context.$factory = Vue.prototype.$factory
}

5- The store/index.js has the calculate the treatment code, note that we used "client.ready()" which is a promise that client object resolve when the SDK is ready, and reject if the time out is reached, make sure to replace the user key and Split name:

import Vuex from 'vuex'
export const state = () => ({
  treatment: null
})
export const mutations = {
  SET_TREATMENT(state, treatment){
    state.treatment = treatment
  }
}
export const actions = {
  async nuxtServerInit({ commit }) {
    let client = this.$factory.client();
    await client.ready()
    let treatment  = client.getTreatment('john', 'sample_feature');
    commit('SET_TREATMENT', treatment);
  }
}

6- To run the sample app:

npm run dev

Download Source