My endpoints aren't working, and most likely because the server on which express is isn't running correctly. I run my files with npm run dev and my express files are in /middleware. The endpoint which I'm trying to fetch data from is in a route in /middleware/routes/crash.js. In my vue file I have axios preforming a get request to localhost:3000/api/crash/:id, however axios returns a 400 error indicating that the file hasn't been found running on the server.

package.json:

"scripts": {
  "dev": "nuxt"
}

/middleware/index.js:

const express = require('express')
const app = express()

const crash = require('./routes/crash')
app.use(crash)

module.exports = {
  path: '/middleware',
  handler: app
}

/middleware/routes/crash.js:

const { Router } = require('express')
const router = Router()
const crypto = require("crypto");
...
router.get('/api/crash/:id')

My endpoints aren't working, and most likely because the server on which express is isn't running correctly. I run my files with npm run dev and my express files are in /middleware. The endpoint which I'm trying to fetch data from is in a route in /middleware/routes/crash.js. In my vue file I have axios preforming a get request to localhost:3000/api/crash/:id, however axios returns a 400 error indicating that the file hasn't been found running on the server.

package.json:

"scripts": {
  "dev": "nuxt"
}

/middleware/index.js:

const express = require('express')
const app = express()

const crash = require('./routes/crash')
app.use(crash)

module.exports = {
  path: '/middleware',
  handler: app
}

/middleware/routes/crash.js:

const { Router } = require('express')
const router = Router()
const crypto = require("crypto");
...
router.get('/api/crash/:id')

• javascript
• node.js
• vue.js
• express
• nuxt.js

Share Improve this question Follow edited May 16, 2022 at 7:43 kissu 47k1616 gold badges9090 silver badges189189 bronze badges asked May 3, 2022 at 13:57 gggggggggggggggggggg 12722 silver badges99 bronze badges 5

• Is it a 400 error or a 404? – Robbe Claessens Commented May 3, 2022 at 14:02
• Do you have a minimal reproducible example or a github repo for this one? – kissu Commented May 3, 2022 at 14:42
• 1 Also, did you pay attention to Do not add serverMiddleware to the middleware/ directory in the documentation regarding the link I gave you on your latest question? nuxtjs/docs/configuration-glossary/… – kissu Commented May 3, 2022 at 14:44
• Hi, did my answer helped somehow? – kissu Commented May 4, 2022 at 13:03
• @kissu Somehow, yes. I'm still having issues with initializing express.js. Absolutely no clue what the cause of it is. I made a new post and a github repo regarding it. – gggggggggg Commented May 4, 2022 at 23:21

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You need to have at least this in your
nuxt.config.js file

export default {
  ssr: true,
  target: 'server',
  modules: [
    '@nuxtjs/axios',
  ],
  serverMiddleware: [
    { path: '/api', handler: '~/server-middleware/rest.js' },
  ],
}

And a /server-middleware/rest.js file with

const app = require('express')()

app.get('/what-is-my-name/:name', (req, res) => {
  res.json({ name: req.params.name, age: 12 })
})

module.exports = app

Then, you can use it like this in any .vue file

<template>
  <div>
    <input id="name" v-model="name" type="text" name="name" />
    <button @click="callNuxtApi">try local Nuxt API</button>
    <div>
      Response from the backend:
      <pre>{{ response }}</pre>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AccordionList',
  data() {
    return {
      name: 'bob',
      response: {},
    }
  },
  methods: {
    async callNuxtApi() {
      const response = await this.$axios.$get(
        `/api/what-is-my-name/${this.name}`
      )
      this.response = response
    },
  },
}
</script>

Then, this will successfully work locally (I'm using a dynamic name here).

---

Then, you'll need to deploy it on a VPS, but there is a small gotcha: you will need to deploy your app and push the server-middleware directory yourself as explained here: https://github./nuxt/nuxt.js/issues/9158#issuement-820676790

Hence why, platform like Render. or Heroku are probably not the easiest ones for this kind of task (I'm not even sure that this is possible).

Some homemade VPS or using Nuxt3 would probably be more easily overall IMO.