AppDividend
Latest Code Tutorials

Nuxt js Tutorial For Beginners 2018

4,138

Get real time updates directly on you device, subscribe now.

Nuxt js Tutorial is the topic, we will discuss today. Nuxt.js is the framework for creating Universal Vue js Applications. The nuxt’s primary scope is UI rendering while abstracting away the client-server distribution.  Remember, Nuxt js is not a server-side framework like Laravel or Express. It merely pre-renders the HTML page on the server and then serves to the client. Nuxt.js bundle all the shapes together for us to make elegant server-side rendered Vue js application. Nuxt.js comes with many features to help us in our development between the client side and server side such as an asynchronous data, middleware, layouts, etc. Nuxt js includes the following different components and libraries to create a vibrant and robust web application development:

Note: Nuxt.js is server rendered application, not a server-side application like Express or Laravel.

Nuxt.js Features

  • Write Vue Files (*.vue).
  • Automatic Code Splitting.
  • Server-Side Rendering.
  • Powerful Routing System with Asynchronous Data.
  • Static File Serving.
  • ES6/ES7 Transpilation.
  • Bundling and minifying of your JS & CSS.
  • Managing <head> element (<title>, <meta>, etc.)
  • Hot module replacement in Development.
  • Pre-processor: Sass, Less, Stylus, etc.
  • HTTP/2 push headers ready.
  • Extending with Modular architecture.

Why we need Nuxt.js?

Vue.js application workflow is the following.

  1. The client first requests the server.
  2. The server returns a response with the index.html file with the Vue code on it.
  3. Now, if you are using single page application then you will not send another page request though can send the AJAX request via fetch or axios or other HTTP libraries. But not entirely HTML page request, just an AJAX request that returns the JSON data.
  4. Now, this is fine for a single page application, in which, when you change the route, the client sends the AJAX request to the server, and it returns a JSON response, and then client manages that data and display to the user.
  5. But from the Search Engine Optimization, It is not good. When search engine crawlers send a request, it gets JSON data and not getting any HTML page. So meta description and another SEO strategy will not work, and you can not index your pages on any search engine.
  6. To resolve this problem, Nuxt.js will come into the picture.
  7. It pre-renders any page and then sends to the client with the server data. It will not query any server data like we are manipulating the database in a server-side framework. It just pre-renders all the dynamic data on the server and then sends that page to the client.
  8. So when web crawlers try to request that page, it gets HTML page fully with all meta tags and descriptions.

Nuxt js Tutorial

First, we need to install the nuxt.js project by the following command.

vue init nuxt-community/starter-template nuxt-tutorial

Remember, you need to have installed vue-cli globally in your system if not then hit the following command in your terminal in administrator mode.

npm install -g vue-cli

After that, you need to install nuxt.js. So it will not give any dependency errors. If the starter-template downloads successfully then go into that folder and type the following.

npm install

It installs all the dependencies that required by Nuxt.js.

Figuring out the folder structure.

Your folder structure looks like this.

Beginners Guide To Setup Nuxt js Tutorial

A project has so many folders. We are not much deep dive into that. If you want to read more then check out this link. We are right now only interested in pages folder. If we’re going to display another route then just first make a file inside the pages folder called appdividend.vue file.

// appdividend.vue

<template>
  <h1>AppDividend Blog</h1>
</template>

Define the HTML template. Now, if we want to render in the browser then just go to the browser and hit the following link.

http://localhost:3000/appdividend

Hurray!! We can see our page. So we do not need to do any route configuration manually. It all handled by Nuxt.js Framework. We just need to create the pages inside the pages directory and then take that file name and place that name after root route.

Nuxt js Components.

In the folder structure, there is one folder called components and in that folder, create one element called Box.vue file.

// Box.vue

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

<script>
export default {
  props: ['title', 'description']
}
</script>

Box.vue file contains two properties.

  1. title
  2. description

These properties are either get from parent component or AJAX request defined in the services page or any other page. So we are right now just hard code the values from the parent vue component. Nuxt components have behaved like a general Vue component. It has template and Javascript. We just need to include this component in our pages files. In our case, it is appdividend.vue file.

Related Posts
1 of 14
// appdividend.vue

<template>
  <Box title = "Nuxt application" description = "This is simple Nuxt Universal application" />
</template>

<script>
import Box from '~/components/Box.vue'
export default {
  components : {
    Box
  }
}
</script>

So here, we have passed the two properties in the Box.vue component. Box component takes this property and renders inside its HTML template. We can give any dynamic values in this flow. Also if we throw any data to the upward components, then we can use the vuex store to do that. Now, go to the following URL.

http://localhost:3000/appdividend

You can see our page has both of that property and if you press Ctrl + u then you can see the page source and in that you can see the full HTML page loaded. So this is how you can build a server-side rendered application using Nuxt.js. We will deep dive into Nuxt.js in the future articles. Nuxt js Tutorial For Beginners 2018 is over for today. Stay tuned for next articles.

 

 

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.