[Vuejs]-Use new NuxtJS app with an existing Express API

by

0👍

✅

This solution works in my case scenario, an adjustment might be needed to make it work for you.

First is you need to create the middleware function, you can follow the 2nd answer on this thread.

My folder structure looks like this: 

vuejs-app/
    | --- api/ <-- ( my express server folder )
    | --- assets/
    | --- ...

Then I added this line on my nuxt.config.js: 

rootDir: __dirname,

because my nuxtjs.config is outside my api folder.

Then in your express server, install NuxtJS.

(Note: The version of NuxtJS in your Express server should be equal to the version of your vuejs app) This is important, because the app won’t compile properly.

Then add your nuxtjs middleware as your express middleware.

import nuxtjs-middleware from "/path/to/your/nuxts-middleware"
app.use(nuxtjs-middleware);

After that start your express api server.

Additional Note:

  1. You might also need to adjust your api endpoints ( or your app to use your endpoint).
  2. This works in my scenario, you might need to approach based on your scenario.
  3. I’m not a node/express/nuxtjs expert, I just solved this by trial-and-error approach. There might be a better approach out there, but as of the time of writing, this approach solves my problem.

Leave a comment