How To Read Post Request Parameters In Nuxtjs? November 26, 2023 Post a Comment is there some simple way how to read POST request parameters in nuxtjs asyncData function? Here's an example: Form.vue: I needed to add server middleware server-middleware/postRequestHandler.jsconst querystring = require('querystring'); module.exports = function (req, res, next) { let body = ''; req.on('data', (data) => { body += data; }); req.on('end', () => { req.body = querystring.parse(body) || {}; next(); }); }; Copynuxt.config.jsserverMiddleware: [ { path: '/clickout', handler: '~/server-middleware/postRequestHandler.js' }, ], CopyClickout.vueasyncasyncData(context) { const id = context.req.body.id; return { id } } CopySolution 2: I recommend to not use the default behavior of form element, try to define a submit handler as follows :<template><form @submit.prevent="submit"><inputtype="hidden"name="id"v-model="item.id" /><inputtype="submit"value="submit" /></form></template>Copyand submit method as follows :methods:{ submit(){ this.$router.push({ name: 'clickout', params: { id: this.item.id } }) } } Copyin the target component do:asyncData(context) { returnthis.$route.params.id; } CopySolution 3: When asyncData is called on server side, you have access to the req and res objects of the user request.exportdefault { async asyncData({ req, res }){ // Please check if you are on the server side before// using req and resif (process.server) { return { host: req.headers.host } } return {} } } Copyref. https://nuxtjs.org/guide/async-data/#use-code-req-code-code-res-code-objectsSolution 4: Maybe it is a little bit late but I think this might help.In your .vue file get the nuxt router route object:this.$route CopyIt stores some useful information like the path, hash, params and the query.Take a look at this for more details on this. Share Post a Comment for "How To Read Post Request Parameters In Nuxtjs?"