Creating Vue.js Application using Nuxt.js and NGINX

Vue.js is one of the UI framework that highly in demand nowadays. It is very powerfull to build a Single Page Application along with other tools. Nuxt.js is also a framework build on top vue.js. Why bother to use Nuxt.js over Vue.js itself?
 Derick has explain very well about this:

So now, we need to install the prerequisites first:
 Node.js (>=6.x, 8.x preferred), npm version 3+ and Git.

Install vue-cli latest stable

$ npm install -g vue-cli

Install vue-cli dev branch

$ npm install -g @vue/cli


Lets do the part to install Nuxt.js:
 Nuxt.js is really easy to get started with. A simple project only needs the nuxt dependency. You can start with starter template that been prepared by the team:

$ vue init nuxt-community/starter-template <projectname>

then install the dependencies:

$ cd <project-name> $ npm install

and launch the project with:

$ npm run dev

The application is now running on by default http://localhost:3000.

There are several ways to change the default port that nuxt.js serve, you need to edit config in the package.json file. Please refer here:

Or, you can start manually create. The guide well explained here:

Serving node.js app with NGINX

I have tried to implement to serve Nuxt.js in one of my subdomain and subdirectory. It is amazing. You can build a simple SPA in a matter of time.
 The steps that works for me to let NGINX serve Nuxt.js app:

  1. Make unit systemd service
  2. Configure NGINX configuration

Make unit systemd service This service will automate to run node.js application in the background.

Create unit file in /etc/systemd/system/, lets name it myvueapp.service

Description=My Vue Server

ExecStart=/usr/bin/npm run dev 
# Restart service after 10 seconds if node service crashes RestartSec=10 
# Output to syslog 
#User=<alternate user> #Group=<alternate group>

Reload systemd daemon

$ sudo systemctl daemon-reload

Enable and start service

$ sudo systemctl enable myvueapp && sudo systemctl start myvueapp

Check the status of the service

$ sudo systemctl status myvueapp

The status of one of my vue app service

See also  Install Wildcard SSL certificate using NGINX and Cloudflare
Nuxt.js and NginX application controlled via Systemd

Configure NGINX config
 To serve different service, I use proxy_pass feature, just add this snippet to your server block:

#example from # rest of the server block ... location / { 
# rest of the server block ....

Or if you serve vue app using subdirectory:

#example from #rest of the server block .... location ~ ^/cv(?:/(.*))?$ { 
rewrite ^/(.*)/$ /$1 permanent; 
rewrite ^/cv(?:/(.*))?$ /$1 break; 
#rest of the server block .....

The question mark is a regular expression quantifier and should tell nginx to match zero or one of the previous character (the slash).
 The first rewrite is to remove trailing slash at the end of URL. Then remove the subdirectory withour changing URL.

Restart Nginx

$ sudo systemctl restart nginx

Then, try to open the vue app url.

Done! Happy Coding 🙂

About wahyuway

Check Also

Comment Systems for Your Blog

Commenting systems is one of the features that cannot be separated in a blog. This …

Leave a Reply