Nuxtjs for everyone
What is Nuxtjs? Why Nuxt.js is so good? What Nuxt.js can do? What Nuxt.js Includes How single page application works? How static site generation in nuxt works? How universal application is created in nuxtjs?
Getting started with Nuxtjs How Nuxt.js works and how it handle routing What is Nuxtjs? Why Nuxt.js is so good? What Nuxt.js can do? What Nuxt.js Includes
Nuxt have lots of things included like vuex, middleware, layouts, etc. To have everything on our project, let's use npx ( execute npm package binary) to create a full nuxt app which includes everything.
Nuxtjs gives server side rendering and uses express js as backend server. But how nuxtjs have express this and where it is placed.
Nuxtjs have plugins to load external libraries or packages. Lets understand how nuxtjs plugins are configured in nuxtjs
Nuxtjs have many official nuxt modules to make your life easier
What nuxt.config.js file is combining everything in nuxtjs
Where is that html file which at the root every website need
Creating Layout in nuxt is very simple, let's talk about the default layout given by nuxt
Modifying nuxt layout and creating our own layout
Whenever any error occur, like 404, 500 error, what page will be displayed on nuxt.
What are the attributes given by nuxt to make vuejs superfast
Nuxt is best for SEO, how to do SEO on nuxt
Various ways to give nuxt link to navigate between pages
Dynamically create routing with nuxtjs
Route parameter validation to protect any unwanted params to entered on the url
Middleware is very important to do some task before loading any page, like authentication or fetching token.
Start project 1 with our nuxt application.
Create weather app page
From where we will get weather information of any city.
Using weather API to fetch weather data by city name
We need to make a system to provide a different city name and each time get corresponding data
Icon represents weather information more visually, use api icon to show that.
We get the temperature from API and let's display it to our app
Showing weather description on our app
Every time page load, we want to fetch data before loading the page, which is Server Side Rendering
Display wind and pressure on our application
The temperature we get are in Kelvin, let's convert to celsius and display it
Data comes a little after page load, and that create some error, let's handle it
Project 1 of weather application is complete, highly encourage you to do more thing with it.
Moving API key or secret to external things, that is exactly .env file
What is Vuex and why it is important part of Nuxtjs
What is state and how to access it on vuejs components
What are getters on vuex and why it is useful
Move weather app data from component to vuex store
Moving from AyncData to fetch , AsyncData return local data while fetch can set data on our vuex store
How to create actions in vuex store and how to call actions from vuejs components
Re-use action from weather store and clean up our code
Work on nuxtjs quiz app front page
Create submit button for our Nuxtjs quiz app
Creating a question and save it on firebase for our Nuxtjs quiz app
Introduction to firebase test mode where anyone can write or read for our Nuxtjs quiz app
Using vuejs v-model to get question data into the form for Nuxtjs quiz app
Using Firebase to store Nuxtjs quiz app questions
It is important to store answer on a different place for Nuxtjs quiz app
Getting Nuxtjs quiz app questions from firebase using axios call
Display all questions on admin side on Nuxtjs quiz app
Let's update the Nuxtjs quiz app question to make any changes
Get the answer by question id from firebase for Nuxtjs quiz app
Edit answer for any question on Nuxtjs Quiz App
Destroy question along with answer on firebase by querying on Nuxtjs Quiz App
Let's clean up things and do some code refactoring
Using firebase to get token when logging in for our Nuxtjs Quiz App
Create a login system on Nuxtjs Quiz App
Fetch user details on the server end for our Nuxtjs Quiz App
Implement Logout in our Nuxtjs Quiz App
Protect route in Nuxtjs Quiz App
Deal with permissions in Nuxtjs Quiz App
Let's show a question on user side on our Nuxtjs Quiz App
Let's extract questions into its dedicated component in Nuxtjs Quiz App
Check for the correct answer on our Nuxtjs Quiz App
If the selected option is correct, then change color to green
Show details on notification by using Vue Notify