How to start with NuxtJs?
Tags: nuxt
Published: 2020-10-06 18:11:39

# **How to Start with NuxtJs**
## Content
* Routing
* Data Binding
* Use of VueX

## What is NuxtJs?
Nuxt is a progressive framework based on Vue.js to create modern web applications. It is based on Vue.js official libraries and powerful development tools .
## Prerequisite of NuxtJs
* Basics of HTML
* Basics of JavaScript
* Basics of Vue(optional)

## Create Nuxt App
You can create app in many ways but the three most used ways are:-
* yarn create nuxt-app <project-name>
* npx create-nuxt-app <project-name>
* npm init nuxt-app <project-name>

## Running Your App
* cd <project-name>
* yarn dev or npm run dev

## Folder Structure of Nuxt App
|-assets
|-component
|---|-logo.vue
|-layouts
|---|-default.vue
|-middleware
|-pages
|---|-index.vue
|-plugins
|-static
|---|-favicon.ico
|---|-icon.png
|---|-sw.js
|-store
|-jsconfig.js
|-nuxt.config.js
|-package.json

* The __assets__ directory contains your un-compiled assets such as Stylus or Sass files, images, or fonts.
* The __components__ directory contains your Vue.js Components.
* The __layouts __directory includes your application layouts. Layouts are used to change the look and feel of your page (for example by including a sidebar).
* The __middleware__ directory contains your Application Middleware.
* The __pages__ directory contains your Application Views and Routes. The framework reads all the .vue files inside this directory and creates the application router.
* The __plugins__ directory contains your Javascript plugins that you want to run before instantiating the root Vue.js Application.
* The __static__ directory is directly mapped to the server root (/static/robots.txt is accessible under http://localhost:3000/robots.txt).
* The __store__ directory contains your Vuex Store files. The Vuex Store comes with Nuxt.js out of the box but is disabled by default. Creating an index.js file in this directory enables the store.
* The __nuxt.config.js__ file contains your Nuxt.js custom configuration.

### Data Binding

In export default part just make a data() and then initialize the variable like:
 data() {
        return {
             message:'',
 }
}
      
now in HTML message can  be accessed using { { message } }

### Button Click
Add attribute v-on:click="increment" in button tag or you  can also use  @click="increment" where increment is the function that will be called on button click. So how we can make that function. In export default something like this:
 methods: { 
      increment:function(e) {
// DO ANYTHING THAT YOU WANT
 }
}
      
     
  

## Routing

For routing just create a page inside pages folder for example about.vue and your routing will automatically be done and in order to go to that link in HTML we have
 __<a href="/about">About</a>__
 but in NuxtJs we have 
__<nuxt-link to="about">About</nuxt-link>__.
in order to route on button click inside the method create a function and inside that just use 
        __this.$router.push({ path: '/about' })__

## VueX
 Install Vuex using 
* npm install vuex --save

or

* yarn add vuex

Inside store folder create index.js file in order to create State.
Import the vuex

import Vue from 'vue'
import Vuex from 'vuex'

create State like
export const state = () => ( {
    counter: 1000,
    list:[],
  } );

In order to use this state in any file just follow the steps:
* import { mapState } from 'vuex' in script tag
* Inside export default 
computed: {
        ...mapState( {
            counter:state=>state.counter
        } )
    },
Now we can directly use the counter variable.

In order to change the  state add following line in store/index.js
export const mutations =  {
    inc(state)  {
      state.counter++
    },
    dec(state)  {        
        state.counter--
      },
      
  }

and in order to change the state data in any file just add following lines:
           this.$store.commit('dec') 
in order to call the dec() function in store/index.js file.

# Conclusion
In this tutorial we have have learned about NuxtJs and some basic concepts of NuxtJs like routing and state management.

Github repo of above is:

[NuxtJS_Vue-X](https://github.com/akarshbarar/NuxtJS_Vue-X/)

-----------------------------------------------------

Follow me on [Github](https://github.com/akarshbarar)
Follow me on [Instagram](https://www.instagram.com/mycodecave/)
Follow me on [Twitter](https://twitter.com/CodeCave2)

-----------------------------------------------------

--------------------THANK YOU------------------------