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
• npx create-nuxt-app
• npm init nuxt-app

Running Your App

• cd
• 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
About
but in NuxtJs we have
About.
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

---

Follow me on Github
Follow me on Instagram
Follow me on Twitter

---

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