Nuxt JS Tutorial For Beginners Step by Step

Basically Nuxt.js is the framework of Vue JS. Yes, this a framework of Vue. But Why need this lets me explain. 

In this Vue Js, many things are shuffle and not a proper page for routes. Nuxt.js helps you write universal apps more simply. Here some benefits of Nuxt.js.

  1. Create universal apps easier.

  2. A Great project structure by default

  3. Easily set up routes for pages and many other benefits.

  4. SEO Improvements

So Let's start to build an awesome Nuxt.js App.

Step:1  Create a new Nuxt.Js app

Run a simple command to create a NuxtApp.

npx create-nuxt-app nuxtapp

it takes some time. based on your internet speed.

During creating a new Nuxt.js project asking some project information such as project name (if you want to change), programming language, package manager, UI framework, and much other information. 

After successfully create a Nuxt.JS Project. go to the file directory.

cd nuxtapp 

Step: 2 Run Nuxt Js Project

Run the Nuxt application using the following command.

npm run dev

By default, it runs on //localhost:3000/ 

Now open your NuxtJs project file in the favorite editor. such as visual code and sublime. what you want. and let's change the home page text.

open pages/index.vue file and replace the code with flowing code.

<template>
 <div >
  <h1>Hello, CoderMen</h1>
 </div>
</template>

<script>
export default {}
</script>

<style>
.container {
 margin: 0 auto;
 min-height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
}

.title {
 font-family:
  'Quicksand',
  'Source Sans Pro',
  -apple-system,
  BlinkMacSystemFont,
  'Segoe UI',
  Roboto,
  'Helvetica Neue',
  Arial,
  sans-serif;
 display: block;
 font-weight: 300;
 font-size: 100px;
 color: #35495e;
 letter-spacing: 1px;
}

.subtitle {
 font-weight: 300;
 font-size: 42px;
 color: #526488;
 word-spacing: 5px;
 padding-bottom: 15px;
}

.links {
 padding-top: 15px;
}
</style>

and Result will be. 

Step: 3 Add some pages

Let's add some pages into the pages folder such as about.vue and contact.vue.

about.vue

<template>
    <div>
         <b-container class="bv-example-row">
        <b-row>
            <b-col>
                <h1>About Us</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
            </b-col>
        </b-row>
        </b-container>
    </div>
</template>
<script>
export default {}
</script>

contact.vue

<template>
 <div>
   <b-container >
    <b-row>
      <b-col>
        <b-form @reset="onReset" >
      <b-form-group
        id="input-group-1"
        label="Email address:"
        label-for="input-1"
        description="We'll never share your email with anyone else."
      >
        <b-form-input
        id="input-1"
        v-model="text"
        type=email
        required
        placeholder="Enter email"
        ></b-form-input>
      </b-form-group>

      <b-form-group
        id="input-group-2"
        label="Enter Your Message"
        label-for="input-2"
      >
      <b-form-textarea id="input-group-2" label="Your Name:" label-for="input-2">
        <b-form-input
        id="input-2"
         v-model="text"
        required
        placeholder="Enter name"
        ></b-form-input>
      </b-form-textarea>
      </b-form-group>
      <hr>
      <b-button type=submit variant="primary">Submit</b-button>
      <b-button type=reset variant="danger">Reset</b-button>
      </b-form>
  
      </b-col>
      <b-col></b-col>
    </b-row>
    </b-container>
 </div>
</template>

<script>
 export default {
  
  
 }
</script>

Step: 4 Add Navbar

Now we can easily navbar and use pages(about and contact) by the route. To add a bootstrap-vue navbar visit this site bootstrap-vue.org.

layouts/default.vue

<template>
<div>
  <b-navbar type="dark" variant="dark">
    <b-navbar-nav>
      <b-nav-item :to="{ name: 'index'}">Home</b-nav-item>
      <b-nav-item :to="{ name: 'about'}">About Us</b-nav-item>
      <b-nav-item :to="{ name: 'contact'}">Contact Us</b-nav-item>
    </b-navbar-nav>
  </b-navbar>
    <Nuxt />
</div>
</template>

<script>
export default {

}
</script>

Visit this URL for about page.

Here I create two pages and use it into the navbar you can create more. when you create a page NuxtJs automatically create a route into .nuxt/router.js file.

So, this was the route of NuxtJs it's so simple and structural. hope you understand the route in NuxtJs.

Step: 5 How to use API in NuxtJs for beginners

To run API we use Axios, so first, we need to install in your NuxtJs app using the flowing command.

npm install @nuxtjs/axios

After successfully add Axios into nuxt.config.js

  modules: [
    // Doc: //bootstrap-vue.js.org
    'bootstrap-vue/nuxt',
    '@nuxtjs/axios'
  ],

After That update, your index.vue file with this flowing code.

<template>
 <div>
   <b-container >
   <b-row>
    <b-col>
     <div v-for="blog in blogs" :key="blog.id">
      <div >
        <n-link :to="`/posts/${blog.id}`"><h1>{{blog.title}}</h1></n-link>
      </div>
     </div>
    </b-col>
   </b-row>
  </b-container>
 </div>
</template>
<script>
import axios from 'axios'
 
export default {
 data () {
  return {
   blogs: [],
   
  }
 },
 asyncData ({ $axios }, callback) {
  $axios.get('//jsonplaceholder.typicode.com/posts')
  .then((res) => {
   callback(null, { blogs: res.data })
  })
 }
}
</script>

The result will be to show something like this.

The Above blog data comes from API.

Now create a new file with blogs/_id.vue. and add this flowing code for the open blog post.

<template>
 <div>
   <b-container >
   <b-row>
    <b-col>
     <div >
      <div >
       <h1>{{posts.title}}</h1>
       <p>{{posts.body}}</p>
      </div>
     </div>
    </b-col>
   </b-row>
  </b-container>
 </div>
</template>


<script>
import axios from 'axios'
export default {
 
 data () {
  return {
   posts: [],
  }
 },
 asyncData ({ $axios ,route }, callback) {
  // $axios.get(`/api/blog/${route.params.id}/${route.params.slug}`)
  $axios.get(`//jsonplaceholder.typicode.com/posts/${route.params.id}`)
  .then((res) => {
   callback(null, { posts: res.data ,loading: false })
  })
 }
}

</script>

The blog details will be to show like this

So, as we can create more pages use the route to visit and we can use API to get data from Live API. So here we completed the blog on Nuxt JS Tutorial For Beginners Step by Step. if you have some doughts ask in the comment box.