NewRelic application config for Vue Storefront Cloud

Vue Storefront when hosted on VSF cloud can be configured to support the following features of New Relic;

  • Application Performance Monitoring (APM)
  • Browser monitoring
  • Log ingestion


Installation & Configuration

  1. Setup License keys and APM
  2. Setup Log Management (Fluentd)
  3. Setup Browser Agent (optional)

Setup License keys and APM

As VSF is deployed in a Docker Container we will instrument VSF this way.

  1. Add newrelic to your package.json:
"newrelic": "latest",
  1. Select some application name you will use for communicating with NewRelic services and prepare your license key

Update your environment via Farmer API to add new environment variables Use either PATCH (opens new window) or PUT (opens new window) requests

and ensure that env_var field in payload contains at least

   "env_var": [
        "is_secret": true,
        "name": "NEW_RELIC_LICENSE_KEY",
        "value": "some_key"
        "name": "NEW_RELIC_APP_NAME",
        "value": "some_key"
        "name": "NEW_RELIC_NO_CONFIG_FILE",
        "value": "true"

you can optionally enable distributed tracing by adding this environment variable:

        "value": "true"

Setup Log Management (Fluentd)

  1. Install required packages:
  • @newrelic/winston-enricher
  • nuxt-winston-log

Make changes to nuxt.config.js:

add the following imports and variables at the top:

import { transports, format } from 'winston'
import path from 'path'

const newrelicFormatter = require('@newrelic/winston-enricher')
const { combine, timestamp, prettyPrint } = format
const logFile = path.resolve(process.cwd(), './logs', 'app.log');

Add nuxt-winston-log to the top of the modules array:

export default {modules: [

...and add a winstonLog object into the bottom of the default object:

  winstonLog: {
    loggerOptions: {
      transports: [
        new transports.Console(),
        new transports.File(
            filename: logFile,
            handleExceptions: true,
            format: combine(

Push these changes, wait for the site to build and deploy and then visit the site. Logs in New Relic should now have data.

Setup Browser Agent (optional)

  1. Visit

    Step 1: Select Copy/Paste Javascript code

    Step 3: Select Yes and search for your APM application name (as set in NEW_RELIC_APP_NAME above), click Enable

    Copy the script to clipboard

  2. Create a new file /static/newrelic.js and paste the content (removing <script> tags)

  3. In nuxt.config.js within the head object, add a script array (or prepend if existing):

script: [
    src: "/newrelic.js",
    async: true

Push these changes, wait for the site to build and deploy and then visit the site. Browser monitoring in New Relic should now have data.