Running NUXT in parallel with Express

NUXT is an awesome server-side framework for rendering Vue.js applications via the server. I prefer NUXT over a client-side only Vue.js implementation when I’m concerned about SEO. NUXT renders each “route” from the server and therefore search engine bots and crawlers have an easy time understanding and indexing the page.

Now that we’re building a server-side application, you’ll prob want the ability to do all the fun and powerful server-side operations you’re familiar with. This is where Express comes into play. Express is a fantastic Node.js framework for building REST APIs. Let’s let NUXT focus on what the user sees (the view), and Express to focus on backend operations (database, 3rd-party API requests, email, etc.).

Let’s get started…

1. Install NUXTJS. I’ve named my project nuxt-with-express but you can name it whatever you’d like:

yarn create nuxt-app <project-name>

2. Select Express as the project’s server-side framework

3. No UI framework required

4. No testing framework required

5. Add Axios module

6. Run project

cd <project-name>
yarn dev

7. If you’re seeing an application run successfully at http://localhost:3000/ continue on..

Configure Express endpoint

Add a route to your ExpressJS server to fetch a movie from OMDb API and display the details in your NUXT application.

1. Open server/index.js
2. Insert the following endpoint above app.use(nuxt.render)

Configure NUXT view

1. Create a new .vue file within the pages directory. I’m going to use index.vue

2. Save file, have a look at browser - http://localhost:3000

There you have it! You’ve created a NUXTJS application with an ExpressJS server backend.

GitHub repository can be found here