How to Create and Deploy a Nuxt.JS Application

Introduction

Nuxt.JS is a framework for creating Vue.JS applications, you can choose between Universal, Static Generated or Single Page application.

Why Nuxt.JS?

  • Nuxt.JS create a framework flexible enough that can be used as a main project base or in addition to your current project based on it. Nuxt.JS focuses on UI rendering while abstracting away the client / server distribution.
  • Nuxt.JS create single page applications (SPA mode) quickly, useful to keep Nuxt features while working on back office applications.
  • Nuxt.JS comes with a lot of features to help you in your development between the client side and the server side such as Asynchronous Data, Middleware, Layouts, Pages, Plugins etc.
  • Nuxt.JS presets all the configuration needed to make your development of a server rendered Vue.JS application more enjoyable.

Resources

The following resources were used in this tutorial:

Under the hood Nuxt.JS uses Webpack with vue-loader and babel-loader to bundle, code-split and minify your code.

Setup

Create a Nuxt.JS project by running the following command on your terminal:

Or with yarn:

It will ask you some questions:

  1. Choose between integrated server-side frameworks:

Select None for this tutorial

2. Choose your favorite UI framework:

Select Vuetify for this tutorial

3.  Choose your favorite testing framework:

  • None (feel free to add one later)
  • Jest
  • AVA

Select None as we won’t be testing.

4. The Nuxt mode you want (Universal or SPA)

5.  Add axios module to make HTTP request easily into your application.

6.  Add EsLint to Lint your code on save.

7.  Add Prettier to prettify your code on save.

When answered, it will install all the dependencies so the next step is to navigate to the project folder and launch it with:

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

NOTE: Nuxt.js listens to changes in the pages directory so there is no need to restart the application when adding new pages.

Here is what the applications looks like on port http://localhost:3000.

Here is what the directory structure looks like on Visual Studio Code editor.

For the majority of the tutorial we would most work with within the layout > default.vue file and the pages > index.vue and pages > inspire.vue files respectively.

First, remove one of the drawers, icons and rename the app to NewsApp.

Lastly, adding a route and making modification on the inspire route to news, below is a code sample to effect the changes:

Building a News App

Now lets make modification to the pages > index.vue. We include a carousel / slider to display images from a cdn to our News Web App. See the sample code below:

Now we need to sign up for an account on the official News API website for real time new top headlines.

A key would be generated once sign up has been successful hence users can make real time GET REQUEST to fetch data.

Moving on we need to modify the pages > news.vue to enable us make a GET request to our News API.

Installing Axios and Font Awesome Icons

From the snippet above, I made use of my generated API key so you should feel free to replace it with once you have already signed up.

Up next, we need to tidy up our codes on the layouts > default.vue file such that relevant social media links to our profile be added including loading in of various brand icons.

To work with fonts in Nuxt we need to install Nuxt Font Awesome. Feel free to read the documentation.

We also need to setup Axios to enable us make successful request. Feel free to read documentation and setup.

Now we need to modify the nuxt.config.js and add our new installed configuration.

Adding Social Media Icons to Default Page

Lastly, add the existing features to the layouts > default.vue to include Social Media icons and our fetched news headlines.

About Us Page

A brief information can also be added to the pages > about.vue.

Each time you make changes the Nuxt.JS recompiles and serves the app on localhost:3000. If it does not  you can always do npm run dev to start development server.

Now here is what our application looks pretty much like.

Welcome Page 

News Page 

Build and Deploy Using Surge

We need to run npm run generate in the command line interface. this will help build and generate the static files required to be deployed on Surge.

Installing Surge

To install Surge run npm install –global surge. This allows Surge to be installed globally and readily available any other time there is a need to deploy. For more information see the Surge online documentation.

Once installation is complete run surge. This will start the deployment and you will be required to set a path which is always in the \dist and generate a domain url through which the application will be accessed.

Useful Links:

News App is Live

News API with Nuxt.JS on GitHub

Related Posts