Skip to content

Latest commit

 

History

History
 
 

nuxtjs

README.md

Nuxt.js

This is an example project showing how to use the universal @bugsnag/js notifier to track both server and browser errors on a Nuxt.js project.

We recommend creating two projects in your dashboard, one for the server errors and one for the browser errors.

Usage

Clone the repo and cd into the directory of this example:

git clone [email protected]:bugsnag/bugsnag-js.git
cd bugsnag-js/examples/nuxtjs

Take a look at…

  • modules/bugsnag/index.js for how to integrate Bugsnag using the Nuxt module system. This file is run on the server, so includes the server-side setup of Bugsnag. It also dynamically registers modules/bugsnag/client.js as a browser plugin.
  • modules/bugsnag/client.js to see the client-side setup. Almost identical to the Vue example, this version uses the Nuxt-specific inject() function which means Bugsnag is available in as this.$bugsnag in Vue components, and as context.app.$bugsnag in cases before Vue has started – e.g. in the asyncData method of a component.
  • nuxt.config.js to see how you can centralize your configuration, including your Bugsnag API keys
  • pages/index.vue and pages/borked.vue to see how the pages are rendered and how the server error is triggered
  • components/BadButtons.vue to see how the client errors are triggered

With docker

The project includes a Dockerfile. If you're familiar with docker, this is the easiest way to start the example. Otherwise, skip ahead to the without docker section.

docker build -t bugsnag-js-example-nuxt . && \
docker run -p 3000:3000 -it bugsnag-js-example-nuxt

Note: remember to replace the API keys in nuxt.config.js with your own!

Without docker

Ensure you have a version of Node.js >=4 on your machine.

npm install
npm run build
npm start

Note: remember to replace the API keys in nuxt.config.js with your own!