How to start express project in Nuxt 2.x

by user

I did research on how Vue in a Nuxt project interacts with Express, and figured out the relationship. Here are some tips to start an Express project with Nuxt.js. First of all, let’s take a look at your Nuxt version to see if it is supported.

<article class="post-item">
  <h2 class="post-title"><a href="/welcome/">Welcome to Ghost</a></h2>
  <p>Welcome, it's great to have you here...</p>
  <a class="read-more" href="/welcome/">Read more</a>
</article>

For your information, my current version is v2.4.2.


Navigation to “Hello World”

  • Create a Nuxt project
npx create-nuxt-app <project-name>
  • Create anapiFolder in the project root.
  • Create an index.js in the folder with the following code.
const app = require('express')()module.exports = { path: '/api', handler: app }
app.get('/hello', (req, res) => {    console.log('hello nuxt in text')    res.send('world')})

NOTE!!

Notice, there is no /api prefix in the app.get(), above. This is because in module.exports we already specified the “global” prefix as /api for this whole express router instance.
This means to set the global path for “app.get” followed by /api.

Add serverMiddleware in nuxt.config.js

  • Make sure the property is NOTmiddleware
serverMiddleware: ['~/api/index.js'],

Reboot by adding the above code. The added severMiddleware file is not watch target. Manually, add the file to “watch” property or simply reboot Nuxt.

  • Access to localhost:3000/api/hello andworld will appear in the browser, which means success.
  • Certainly, an output called console.log(‘hello nuxt in text’)will not appear in browser console, but in the terminal console.

Welcome onboard! You’ve got connection to Vue and Express. Just access to localhost:3000/api/hello , or obtain json or other content via Express on your own API.

You may also like

Leave a Comment

* By using this form you agree with the storage and handling of your data by this website.

Close Bitnami banner
Bitnami