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 devFor 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=0123456789abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrThey 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 -dIn 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]