Nuxt JS Tutorial

In this nuxt js tutorial we well guide you the nuxtjs following things.
1) Nuxt js installation app basic setup

2) API integration

3) Slick slider

4) Load More post functionality

5) Bootstrap menu integration

6) PWA with nuxt js

7) Deploy on netlify (On free hosting)

Make sure you have node install on your system you can check it with node -v cmd in CLI

Please check the screenshot for the installation it will more clear to you, for select the option you need to use ENTER key and if there is multiple options then you need to choose it by using SPACE BAR key then enter.

npx create-nuxt-app <project-name>

Or if you are using NPM then you can do:

npm init nuxt-app <project-name>

Or with yarn you can do:

yarn create nuxt-app <project-name>

Features

you can use arrow keys for choose the option and select with the space bar button.

  1. Choose the package manager
    • Yarn
    • Npm
  2. Choose your favorite UI framework:
  3. Choose between integrated server-side frameworks:
  4. Choose Nuxt.js modules:
  5. Choose linting tools:
  6. Check the features needed for your project:
  7. Choose your favorite test framework:
  8. Choose rendering mode
  9. Choose development tools

Now your installation is completed. Go inside the project folder

cd <project-name>

In this folder have a package.json file in which all the plugins are mention now you have to fetch all dependencies with

npm install

To run the app that was just created in development mode, we’ll run the following command:

$ npm run dev

This will startup our Nuxt.js server in development mode. By default, the project will serve from http://localhost:3000/.
Now the Nuxt Js project is ready you can work on it

For the API you need the axios package so please check your package.json file if its not added on the installation time then you need to install it with the below cmd

$ npm install axios

Now you need to import the package on the page

import axios from 'axios'
export default {
  name: 'branch',
  data: () => ({ 
    setting: ''
  }),
  methods: {	 
	  getSettings: function(){
			  axios.
			  get(YOUR API URL HERE)
			.then(response => {
			console.log(response);			 
			})
			.catch(error => {
			  console.log(error)
			})
		}
    },
  beforeMount(){    
    this.getSettings();  
  }

First you need to install the slick slider package

$ npm install vue-slick 

NOTE: slick-carousel official package appears to use jquery as a dependency in package.json, despite it would be more appropriate to use it as a peer dependency to avoid possibility of using multiple versions of jquery. Be aware of that. When using webpack you can solve this problem with aliases.
if you find any jquery undefined error then add the jquery on your package.json file

 "devDependencies": {
    "jquery": "*",
    // other packages
  } 
 
import Slick from 'vue-slick';

new Vue({

components: { Slick },

data() {
return {
slickOptions: {
slidesToShow: 3,
// Any other options that can be got from plugin documentation
},
};
},

// All slick methods can be used too, example here
methods: {
next() {
this.$refs.slick.next();
},

prev() {
this.$refs.slick.prev();
},

reInit() {
// Helpful if you have to deal with v-for to update dynamic lists
this.$nextTick(() => {
this.$refs.slick.reSlick();
});
},

// Events listeners
handleAfterChange(event, slick, currentSlide) {
console.log('handleAfterChange', event, slick, currentSlide);
},
handleBeforeChange(event, slick, currentSlide, nextSlide) {
console.log('handleBeforeChange', event, slick, currentSlide, nextSlide);
},
handleBreakpoint(event, slick, breakpoint) {
console.log('handleBreakpoint', event, slick, breakpoint);
},
handleDestroy(event, slick) {
console.log('handleDestroy', event, slick);
},
handleEdge(event, slick, direction) {
console.log('handleEdge', event, slick, direction);
},
handleInit(event, slick) {
console.log('handleInit', event, slick);
},
handleReInit(event, slick) {
console.log('handleReInit', event, slick);
},
handleSetPosition(event, slick) {
console.log('handleSetPosition', event, slick);
},
handleSwipe(event, slick, direction) {
console.log('handleSwipe', event, slick, direction);
},
handleLazyLoaded(event, slick, image, imageSource) {
console.log('handleLazyLoaded', event, slick, image, imageSource);
},
handleLazeLoadError(event, slick, image, imageSource) {
console.log('handleLazeLoadError', event, slick, image, imageSource);
},
},
});


If you need, you can import slick styles too:

import `node_modules/slick-carousel/slick/slick.css`;

For adding the Load More functionality in the nuxt js you need to install the Vue-infinite-loading here with npm

	npm install vue-infinite-loading -S

Then you need to import this package in your post file like posts.vue file. Make sure you have installed the axios

	import axios from 'axios'
	import InfiniteLoading from 'vue-infinite-loading'

Now your setup is ready you need to add the code on the bottom of the posts.vue file

<infinite-loading 
 v-if="posts.length" 
   spinner="spiral"
   @infinite="infiniteScroll"
></infinite-loading>

posts.length is the post array in which all the posts are store.

Then copy and past the below code on the method functionality

	infiniteScroll($state) {				
				setTimeout(() => {
					this.page++					
					axios
					.get(this.url)
					.then((response) => {						
						if (response.data.posts.length > 1) {
							response.data.posts.forEach((item) => this.posts.push(item))
							$state.loaded()							
							} else {							
							$state.complete()
							}
					})
					.catch((err) => {
						console.log(err)
					})
				}, 1000)
			}

setTimeout is for to call the code a little bit late.

axios.get is getting the data from the api.

response.data.posts.length is to check whether it’s getting data, if there is no data it will be false.

response.data.posts.forEach((item) => this.posts.push(item)) is adding every new item from array to the posts

$state.loaded(),$state.complete() is the animation of loading the component.

For Adding the responsive menu in the website you need to add the below code
in your header.vue file

 

 

Turning your web app into a PWA using Nuxt is too easy and simple

Install PWA npm package:

yarn add @nuxtjs/pwa //or npm i @nuxtjs/pwa

Edit your nuxt.config.js file and add PWA module:

{
    modules: [
        '@nuxtjs/pwa',
    ],
}

Make sure static directory exists and optionally create static/icon.png. (Recommended to be square png and >= 512x512px)

Create or add this to .gitignore file so that this will not uploaded on git

sw.*

Leave a Reply

Your email address will not be published. Required fields are marked *

*

*

*