0

The situation is, I have an existing Express API. Then my team member has his VueJS app powered by NuxtJS. We built them separately, the API and the app.

The question is, how can I integrate / SSR the Vue/NuxtJS app with my express API?

I saw and tried to follow this similar question but I can't seem to make it work. The express API is launching, but I cannot find what path and how can I access the Vue/NuxtJS app.

Anyone with similar situation?

cankentcode
  • 460
  • 1
  • 5
  • 20
  • You can just launch them separately and work like normal backend and frontend – Aldarund Dec 18 '18 at 10:26
  • @Aldarund because of some business requirements, we need to do it that way. I think I solved it, going to try it first then comment my answer later if proven true. – cankentcode Dec 18 '18 at 10:35

1 Answers1

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.
cankentcode
  • 460
  • 1
  • 5
  • 20