Fabio Vedovelli

At this point of my life, purely Javascript!

Configure Mirage JS in a Nuxt.js project

March 02, 2020

No oficial documentation

At the day of this writing the oficial Mirage JS documentation contains no installation instructions for Nuxt.

But it it very easy to make them work together. We will be using Mirage JS Starter Kit, an unnoficial boilerplate to start a Mirage server. Just follow the download instructions.

In your Nuxt project, within plugins/ directory, create a mirage.js file and include the following:

// /plugins/mirage.js

if (process.env.NODE_ENV === 'development') {
  require('../miragejs/server').makeServer();
}

Finally in your nuxt.config.js include a reference to the plugin you created:

  // /nuxt.config.js

  ...
  plugins: ['@/plugins/mirage.js'],
  ...

And that’s it. Now in development mode all your HTTP requests will be gladly hijacked by Mirage server!

Enjoy building your lovely app!

Share this post