Digital Situation Reports for UN OCHA. Vue+Nuxt produces a SSR+Hydration architecture, ensuring that we serve full HTML responses while taking advantage of modern JS tools for client-side interactivity. We use Contentful as our CMS, offloading all data entry responsibilities to a paid service.

# install node dependencies
$ npm install

# local development with hot reload at localhost:3000
$ npm run dev

For detailed explanation on how things work, checkout the Nuxt.js docs.

Be aware: While the Nuxt development mode is quite useful, ultimately this app has to run inside Docker for your feature to deploy smoothly. Before submitting a PR be sure to rebuild within Docker and run the server using the commands in the Docker section below.

All content is stored on Contentful. To access the service you need a Space ID and a Content Delivery API key.

Place them in a file at the repo root called .env:

CTF_SPACE_ID=0123456789ab
CTF_ENVIRONMENT=master
CTF_CDA_ACCESS_TOKEN=0123456789abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqr

They will be copied to .contentful.json during the docker build step (see below).

When the CTF_HOST AND CTF_CDA_PREVIEW_TOKEN environment variables are present, the app will configure itself to display all edits and new entries immediately, regardless of whether they have been published.

# first-time setup
$ docker-compose build

# run server and view logs
$ docker-compose up

# run server detached so that logs are not shown on screen
$ docker-compose up -d

In the components/_Global.vue we have a prop called ga — any component or page which uses _Global as a mixin automatically can send events to GA using this.ga.send():

  // Our coding standards use Capitalized Labels
  this.ga.send('event', 'Category', 'Action', 'Label', myValue);

In case the ga() function cannot be found or loaded, we mock the function so that any invocations will result in debug output instead of errors:

ga.send() not found, but we would have sent: event category action label [myValue]