SlideShare a Scribd company logo
An Overview on
Nuxt JS
- An SEO Friendly Framework!
Mohanapriya.R
Software Engineer,
Squas Apps.
Outline
What is Nuxt.js
What is Server Side Rendering?
Why Server Side rendering?
Understanding the SEO
Introducing: Nuxt.js
Installations
Directory Structures
Routing
HTML Head
Demo
What is Nuxt.js ?
● High Level Framework
● Meta Framework for Universal Applications.
● Server Side Rendering
● Improved SEO
● Simplified File Structures
● Improves Routing Mechanisms
● Automatic Code Splitting
● ES6/ES7 Transpilation
● Bundling & Minifying JS & CSS
● Hot Module Replacement
What is Server Side Rendering?
CSR Makes the website entirely rendered in the browser with JavaScript. Creates
each routes dynamically in the browser.
SSR
Pre populate a web page with custom user data directly on the server. It is
generally faster to make all the requests within a server.

Recommended for you

Vue.js for beginners
Vue.js for beginnersVue.js for beginners
Vue.js for beginners

I talked about Vue.js at @agenciasomadev. In this talk I showed the basics about the Vue.js JavaScript Framework and it's simplicity. I hope you enjoy :)

librarydevelopmentjavascript
Next.js Introduction
Next.js IntroductionNext.js Introduction
Next.js Introduction

This Next.js slide is for the short introduction. Next.js is a react framework for projection. Some people call it as a full stack react framework. Because we can write both client and server side code on it.

next.jsreact frameworkreact for production
Introduction to React Native Workshop
Introduction to React Native WorkshopIntroduction to React Native Workshop
Introduction to React Native Workshop

This document provides an introduction to React Native. It begins with an overview of what React Native is and how it allows React code to render natively on iOS and Android using a JavaScript bridge. It then discusses starting a new project using create-react-native-app or react-native init. The rest of the document outlines the roadmap, covering working with styles, layouts, lists, navigation, networking and touching the native side.

reactreactjsreact-native
Why SSR ?
01 Renders Fully Loaded Page
02 Best Feature for Public Sites
03 Best User Experience
Understanding the SEO
Introducing Nuxt js
Installations
1. npm install vue-cli -g
2. npx create-nuxt-app <project-name>
3. Configurations
4. cd <project-name>
5. npm run dev
Configurations:
● Server side Frameworks
● UI Frameworks
● Testing Frameworks
● Nuxt Mode
● Axios Module
● ES Lint

Recommended for you

Sonatype nexus 로 docker registry 관리하기
Sonatype nexus 로 docker registry 관리하기Sonatype nexus 로 docker registry 관리하기
Sonatype nexus 로 docker registry 관리하기

Sonatype nexus 저장소 관리자로 도커 레지스트리 관리하기

docker-registrydockerrepository-manager
How to implement internationalization (i18n) in angular application(multiple ...
How to implement internationalization (i18n) in angular application(multiple ...How to implement internationalization (i18n) in angular application(multiple ...
How to implement internationalization (i18n) in angular application(multiple ...

This blog is a complete solution for how to implement Internationalisation (i18n) or Multiple Language Support in angular application with an example.

internationalizationangularangular application
Deep dive into Vue.js
Deep dive into Vue.jsDeep dive into Vue.js
Deep dive into Vue.js

Vue.js의 깊은 곳을 알아봅시다. 1. Vue.js Architecture 2. Observing 3. Rendering 4. Vue.js Package * 이 자료는 VUE.TIFULE KOREA 6회에서 발표한 자료입니다.

vuejsvuejs-corejavascript
Directory Structure
● The Assets
● The Components
● The Layouts
● The Middleware
● The Pages
● The Plugins
● The Static
● The Store
● The Nuxt Config File
Routing
● Basic Routes
● Dynamic Routes
● Nested Routes
● Dynamic Nested Routes
HTML Head
Default Meta Tags(Nuxt.config.js)
export default {
head: {
titleTemplate: '%s - Nuxt.js',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content:
'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description',
content: 'Meta description' }
]
}
}
Custom Meta Tags(Page Specific)
export default {
head () {
return {
title: this.title,
meta: [
{ hid: 'description', name: 'description',
content: 'My custom description' }
]
}
}
}
HTML Head Contd...
● Open Graphs
● Twitter Card
● Canonical Tags
● Google Analytics

Recommended for you

introduction to Vue.js 3
introduction to Vue.js 3 introduction to Vue.js 3
introduction to Vue.js 3

Vue.js is a progressive JavaScript framework that focuses on building user interfaces and is used for single-page applications. It was created by Evan You and released in 2014. Vue.js uses declarative templates and reactive data binding to render the view layer for an application. Templates in Vue use HTML-based syntax with directives prefixed with v- to dynamically bind expression results. Common directives include v-bind, v-if, and v-for. Vue.js applications can be built with its core library or integrated with other libraries and frameworks.

vuevue.jsvuejs
Workshop React.js
Workshop React.jsWorkshop React.js
Workshop React.js

The document provides an introduction and overview of ES6, React, and Redux. It begins with an in-depth section about new features and syntax in ES6, including variable types, arrow functions, modules, classes, and more. It then discusses React, explaining concepts like the virtual DOM, one-way data flow, JSX syntax, props, nested components, conditionals, and state/setState. Finally, it briefly introduces Redux and mentions using React components on the server and in mobile apps with React Native.

#commituniversity#coders51#react#commitsoftware
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.jsThe Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js

An introduction to Vue.js (from an online webinar for Certified Fresh Events - http://certifiedfreshevents.com).

vuevuejsvue overview
DEMO
01 JavaScript Enable/Disable
02 Page Reloading
03 SEO Crawling
Any Queries?
Thank you!

More Related Content

What's hot

Why Vue.js?
Why Vue.js?Why Vue.js?
Why Vue.js?
Jonathan Goode
 
Vue js for beginner
Vue js for beginner Vue js for beginner
Vue js for beginner
Chandrasekar G
 
Angular Directives
Angular DirectivesAngular Directives
Angular Directives
iFour Technolab Pvt. Ltd.
 
Vue.js for beginners
Vue.js for beginnersVue.js for beginners
Vue.js for beginners
Julio Bitencourt
 
Next.js Introduction
Next.js IntroductionNext.js Introduction
Next.js Introduction
Saray Chak
 
Introduction to React Native Workshop
Introduction to React Native WorkshopIntroduction to React Native Workshop
Introduction to React Native Workshop
Ignacio Martín
 
Sonatype nexus 로 docker registry 관리하기
Sonatype nexus 로 docker registry 관리하기Sonatype nexus 로 docker registry 관리하기
Sonatype nexus 로 docker registry 관리하기
KwangSeob Jeong
 
How to implement internationalization (i18n) in angular application(multiple ...
How to implement internationalization (i18n) in angular application(multiple ...How to implement internationalization (i18n) in angular application(multiple ...
How to implement internationalization (i18n) in angular application(multiple ...
Katy Slemon
 
Deep dive into Vue.js
Deep dive into Vue.jsDeep dive into Vue.js
Deep dive into Vue.js
선협 이
 
introduction to Vue.js 3
introduction to Vue.js 3 introduction to Vue.js 3
introduction to Vue.js 3
ArezooKmn
 
Workshop React.js
Workshop React.jsWorkshop React.js
Workshop React.js
Commit University
 
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.jsThe Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js
Holly Schinsky
 
Introduction to VueJS & Vuex
Introduction to VueJS & VuexIntroduction to VueJS & Vuex
Introduction to VueJS & Vuex
Bernd Alter
 
NEXT.JS
NEXT.JSNEXT.JS
Introduction Node.js
Introduction Node.jsIntroduction Node.js
Introduction Node.js
Erik van Appeldoorn
 
NestJS
NestJSNestJS
NestJS
Wilson Su
 
Node js introduction
Node js introductionNode js introduction
Node js introduction
Joseph de Castelnau
 
Nestjs MasterClass Slides
Nestjs MasterClass SlidesNestjs MasterClass Slides
Nestjs MasterClass Slides
Nir Kaufman
 
Nextjs13.pptx
Nextjs13.pptxNextjs13.pptx
Nextjs13.pptx
DivyanshGupta922023
 
Build web apps with react js
Build web apps with react jsBuild web apps with react js
Build web apps with react js
dhanushkacnd
 

What's hot (20)

Why Vue.js?
Why Vue.js?Why Vue.js?
Why Vue.js?
 
Vue js for beginner
Vue js for beginner Vue js for beginner
Vue js for beginner
 
Angular Directives
Angular DirectivesAngular Directives
Angular Directives
 
Vue.js for beginners
Vue.js for beginnersVue.js for beginners
Vue.js for beginners
 
Next.js Introduction
Next.js IntroductionNext.js Introduction
Next.js Introduction
 
Introduction to React Native Workshop
Introduction to React Native WorkshopIntroduction to React Native Workshop
Introduction to React Native Workshop
 
Sonatype nexus 로 docker registry 관리하기
Sonatype nexus 로 docker registry 관리하기Sonatype nexus 로 docker registry 관리하기
Sonatype nexus 로 docker registry 관리하기
 
How to implement internationalization (i18n) in angular application(multiple ...
How to implement internationalization (i18n) in angular application(multiple ...How to implement internationalization (i18n) in angular application(multiple ...
How to implement internationalization (i18n) in angular application(multiple ...
 
Deep dive into Vue.js
Deep dive into Vue.jsDeep dive into Vue.js
Deep dive into Vue.js
 
introduction to Vue.js 3
introduction to Vue.js 3 introduction to Vue.js 3
introduction to Vue.js 3
 
Workshop React.js
Workshop React.jsWorkshop React.js
Workshop React.js
 
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.jsThe Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js
 
Introduction to VueJS & Vuex
Introduction to VueJS & VuexIntroduction to VueJS & Vuex
Introduction to VueJS & Vuex
 
NEXT.JS
NEXT.JSNEXT.JS
NEXT.JS
 
Introduction Node.js
Introduction Node.jsIntroduction Node.js
Introduction Node.js
 
NestJS
NestJSNestJS
NestJS
 
Node js introduction
Node js introductionNode js introduction
Node js introduction
 
Nestjs MasterClass Slides
Nestjs MasterClass SlidesNestjs MasterClass Slides
Nestjs MasterClass Slides
 
Nextjs13.pptx
Nextjs13.pptxNextjs13.pptx
Nextjs13.pptx
 
Build web apps with react js
Build web apps with react jsBuild web apps with react js
Build web apps with react js
 

Similar to An Overview on Nuxt.js

How To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.jsHow To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.js
Andolasoft Inc
 
A Comparative Analysis of Express and Next JS
A Comparative Analysis of Express and Next JSA Comparative Analysis of Express and Next JS
A Comparative Analysis of Express and Next JS
Tien Nguyen
 
What is Next js.pdf
What is Next js.pdfWhat is Next js.pdf
What is Next js.pdf
nikhilsuman11
 
Comprehensive Guide to JavaScript Frameworks
Comprehensive Guide to JavaScript FrameworksComprehensive Guide to JavaScript Frameworks
Comprehensive Guide to JavaScript Frameworks
kavsinghta
 
Next.js vs Node.js: Choosing the Right Framework for App Development
Next.js vs Node.js: Choosing the Right Framework for App DevelopmentNext.js vs Node.js: Choosing the Right Framework for App Development
Next.js vs Node.js: Choosing the Right Framework for App Development
GokulKanna18
 
Build RESTful API Using Express JS
Build RESTful API Using Express JSBuild RESTful API Using Express JS
Build RESTful API Using Express JS
Cakra Danu Sedayu
 
Dot Net Nuke Presentation
Dot Net Nuke PresentationDot Net Nuke Presentation
Dot Net Nuke Presentation
Tony Cosentino
 
Getting Started With Mean Stack
Getting Started With Mean StackGetting Started With Mean Stack
Getting Started With Mean Stack
Knoldus Inc.
 
Nodejs framework for app development.pdf
Nodejs framework for app development.pdfNodejs framework for app development.pdf
Nodejs framework for app development.pdf
Sufalam Technologies
 
Building and Deploying Serverless Applications with NextJS and Vercel.pdf
Building and Deploying Serverless Applications with NextJS and Vercel.pdfBuilding and Deploying Serverless Applications with NextJS and Vercel.pdf
Building and Deploying Serverless Applications with NextJS and Vercel.pdf
RajasreePothula3
 
Production Ready Vue Apps With Nuxt.js
Production Ready Vue Apps With Nuxt.jsProduction Ready Vue Apps With Nuxt.js
Production Ready Vue Apps With Nuxt.js
SnirShechter
 
Node.js & Express.js Unleashed
Node.js & Express.js UnleashedNode.js & Express.js Unleashed
Node.js & Express.js Unleashed
Elewayte
 
JSFoo-2017 Takeaways
JSFoo-2017 TakeawaysJSFoo-2017 Takeaways
JSFoo-2017 Takeaways
Mir Ali
 
8 Best Ways To Boost Node.js Performance Of Your Application!.pdf
8 Best Ways To Boost Node.js Performance Of Your Application!.pdf8 Best Ways To Boost Node.js Performance Of Your Application!.pdf
8 Best Ways To Boost Node.js Performance Of Your Application!.pdf
Sufalam Technologies
 
Top Reasons to Use Node.JS Development for Your Next Project
Top Reasons to Use Node.JS Development for Your Next ProjectTop Reasons to Use Node.JS Development for Your Next Project
Top Reasons to Use Node.JS Development for Your Next Project
WeblineIndia
 
Intro to Sails.js
Intro to Sails.jsIntro to Sails.js
Intro to Sails.js
DevOpsDays Austin 2014
 
Next JS vs React.pptx
Next JS vs React.pptxNext JS vs React.pptx
Next JS vs React.pptx
Albiorix Technology
 
What is Server-side Rendering? How to Render Your React App on the Server-sid...
What is Server-side Rendering? How to Render Your React App on the Server-sid...What is Server-side Rendering? How to Render Your React App on the Server-sid...
What is Server-side Rendering? How to Render Your React App on the Server-sid...
Shelly Megan
 
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
Semiosis Software Private Limited
 
Word press with react – implementing headless wordpress with reactjs converted
Word press with react – implementing headless wordpress with reactjs convertedWord press with react – implementing headless wordpress with reactjs converted
Word press with react – implementing headless wordpress with reactjs converted
DaljeetSingh210
 

Similar to An Overview on Nuxt.js (20)

How To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.jsHow To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.js
 
A Comparative Analysis of Express and Next JS
A Comparative Analysis of Express and Next JSA Comparative Analysis of Express and Next JS
A Comparative Analysis of Express and Next JS
 
What is Next js.pdf
What is Next js.pdfWhat is Next js.pdf
What is Next js.pdf
 
Comprehensive Guide to JavaScript Frameworks
Comprehensive Guide to JavaScript FrameworksComprehensive Guide to JavaScript Frameworks
Comprehensive Guide to JavaScript Frameworks
 
Next.js vs Node.js: Choosing the Right Framework for App Development
Next.js vs Node.js: Choosing the Right Framework for App DevelopmentNext.js vs Node.js: Choosing the Right Framework for App Development
Next.js vs Node.js: Choosing the Right Framework for App Development
 
Build RESTful API Using Express JS
Build RESTful API Using Express JSBuild RESTful API Using Express JS
Build RESTful API Using Express JS
 
Dot Net Nuke Presentation
Dot Net Nuke PresentationDot Net Nuke Presentation
Dot Net Nuke Presentation
 
Getting Started With Mean Stack
Getting Started With Mean StackGetting Started With Mean Stack
Getting Started With Mean Stack
 
Nodejs framework for app development.pdf
Nodejs framework for app development.pdfNodejs framework for app development.pdf
Nodejs framework for app development.pdf
 
Building and Deploying Serverless Applications with NextJS and Vercel.pdf
Building and Deploying Serverless Applications with NextJS and Vercel.pdfBuilding and Deploying Serverless Applications with NextJS and Vercel.pdf
Building and Deploying Serverless Applications with NextJS and Vercel.pdf
 
Production Ready Vue Apps With Nuxt.js
Production Ready Vue Apps With Nuxt.jsProduction Ready Vue Apps With Nuxt.js
Production Ready Vue Apps With Nuxt.js
 
Node.js & Express.js Unleashed
Node.js & Express.js UnleashedNode.js & Express.js Unleashed
Node.js & Express.js Unleashed
 
JSFoo-2017 Takeaways
JSFoo-2017 TakeawaysJSFoo-2017 Takeaways
JSFoo-2017 Takeaways
 
8 Best Ways To Boost Node.js Performance Of Your Application!.pdf
8 Best Ways To Boost Node.js Performance Of Your Application!.pdf8 Best Ways To Boost Node.js Performance Of Your Application!.pdf
8 Best Ways To Boost Node.js Performance Of Your Application!.pdf
 
Top Reasons to Use Node.JS Development for Your Next Project
Top Reasons to Use Node.JS Development for Your Next ProjectTop Reasons to Use Node.JS Development for Your Next Project
Top Reasons to Use Node.JS Development for Your Next Project
 
Intro to Sails.js
Intro to Sails.jsIntro to Sails.js
Intro to Sails.js
 
Next JS vs React.pptx
Next JS vs React.pptxNext JS vs React.pptx
Next JS vs React.pptx
 
What is Server-side Rendering? How to Render Your React App on the Server-sid...
What is Server-side Rendering? How to Render Your React App on the Server-sid...What is Server-side Rendering? How to Render Your React App on the Server-sid...
What is Server-side Rendering? How to Render Your React App on the Server-sid...
 
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
 
Word press with react – implementing headless wordpress with reactjs converted
Word press with react – implementing headless wordpress with reactjs convertedWord press with react – implementing headless wordpress with reactjs converted
Word press with react – implementing headless wordpress with reactjs converted
 

More from Squash Apps Pvt Ltd

The Critical role of Copyright
The Critical role of CopyrightThe Critical role of Copyright
The Critical role of Copyright
Squash Apps Pvt Ltd
 
Please review and merge
Please review and mergePlease review and merge
Please review and merge
Squash Apps Pvt Ltd
 
Angular Lifecycle Hooks
Angular Lifecycle HooksAngular Lifecycle Hooks
Angular Lifecycle Hooks
Squash Apps Pvt Ltd
 
Next Generation of Javascript
Next Generation of JavascriptNext Generation of Javascript
Next Generation of Javascript
Squash Apps Pvt Ltd
 
Hybrid app development frameworks
Hybrid app development frameworksHybrid app development frameworks
Hybrid app development frameworks
Squash Apps Pvt Ltd
 
API Gateway with legend lambada
API Gateway with legend lambadaAPI Gateway with legend lambada
API Gateway with legend lambada
Squash Apps Pvt Ltd
 
Life Cycle hooks in VueJs
Life Cycle hooks in VueJsLife Cycle hooks in VueJs
Life Cycle hooks in VueJs
Squash Apps Pvt Ltd
 
An Intro into webpack
An Intro into webpackAn Intro into webpack
An Intro into webpack
Squash Apps Pvt Ltd
 
Lets vue(view) Vuex from the Top Vue(View)
Lets vue(view) Vuex from the Top Vue(View)Lets vue(view) Vuex from the Top Vue(View)
Lets vue(view) Vuex from the Top Vue(View)
Squash Apps Pvt Ltd
 
NPM
NPMNPM
Sharing Data Between Angular Components
Sharing Data Between Angular ComponentsSharing Data Between Angular Components
Sharing Data Between Angular Components
Squash Apps Pvt Ltd
 
AWS Jungle - Lambda
AWS Jungle - LambdaAWS Jungle - Lambda
AWS Jungle - Lambda
Squash Apps Pvt Ltd
 
Angular Lazy Loading and Resolve (Route Resolver)
Angular Lazy Loading and Resolve (Route Resolver)Angular Lazy Loading and Resolve (Route Resolver)
Angular Lazy Loading and Resolve (Route Resolver)
Squash Apps Pvt Ltd
 
Basics of NGINX
Basics of NGINXBasics of NGINX
Basics of NGINX
Squash Apps Pvt Ltd
 

More from Squash Apps Pvt Ltd (14)

The Critical role of Copyright
The Critical role of CopyrightThe Critical role of Copyright
The Critical role of Copyright
 
Please review and merge
Please review and mergePlease review and merge
Please review and merge
 
Angular Lifecycle Hooks
Angular Lifecycle HooksAngular Lifecycle Hooks
Angular Lifecycle Hooks
 
Next Generation of Javascript
Next Generation of JavascriptNext Generation of Javascript
Next Generation of Javascript
 
Hybrid app development frameworks
Hybrid app development frameworksHybrid app development frameworks
Hybrid app development frameworks
 
API Gateway with legend lambada
API Gateway with legend lambadaAPI Gateway with legend lambada
API Gateway with legend lambada
 
Life Cycle hooks in VueJs
Life Cycle hooks in VueJsLife Cycle hooks in VueJs
Life Cycle hooks in VueJs
 
An Intro into webpack
An Intro into webpackAn Intro into webpack
An Intro into webpack
 
Lets vue(view) Vuex from the Top Vue(View)
Lets vue(view) Vuex from the Top Vue(View)Lets vue(view) Vuex from the Top Vue(View)
Lets vue(view) Vuex from the Top Vue(View)
 
NPM
NPMNPM
NPM
 
Sharing Data Between Angular Components
Sharing Data Between Angular ComponentsSharing Data Between Angular Components
Sharing Data Between Angular Components
 
AWS Jungle - Lambda
AWS Jungle - LambdaAWS Jungle - Lambda
AWS Jungle - Lambda
 
Angular Lazy Loading and Resolve (Route Resolver)
Angular Lazy Loading and Resolve (Route Resolver)Angular Lazy Loading and Resolve (Route Resolver)
Angular Lazy Loading and Resolve (Route Resolver)
 
Basics of NGINX
Basics of NGINXBasics of NGINX
Basics of NGINX
 

Recently uploaded

find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
shanthidl1
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
Andrey Yasko
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 

Recently uploaded (20)

find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 

An Overview on Nuxt.js

  • 1. An Overview on Nuxt JS - An SEO Friendly Framework! Mohanapriya.R Software Engineer, Squas Apps.
  • 2. Outline What is Nuxt.js What is Server Side Rendering? Why Server Side rendering? Understanding the SEO Introducing: Nuxt.js Installations Directory Structures Routing HTML Head Demo
  • 3. What is Nuxt.js ? ● High Level Framework ● Meta Framework for Universal Applications. ● Server Side Rendering ● Improved SEO ● Simplified File Structures ● Improves Routing Mechanisms ● Automatic Code Splitting ● ES6/ES7 Transpilation ● Bundling & Minifying JS & CSS ● Hot Module Replacement
  • 4. What is Server Side Rendering? CSR Makes the website entirely rendered in the browser with JavaScript. Creates each routes dynamically in the browser. SSR Pre populate a web page with custom user data directly on the server. It is generally faster to make all the requests within a server.
  • 5. Why SSR ? 01 Renders Fully Loaded Page 02 Best Feature for Public Sites 03 Best User Experience
  • 8. Installations 1. npm install vue-cli -g 2. npx create-nuxt-app <project-name> 3. Configurations 4. cd <project-name> 5. npm run dev Configurations: ● Server side Frameworks ● UI Frameworks ● Testing Frameworks ● Nuxt Mode ● Axios Module ● ES Lint
  • 9. Directory Structure ● The Assets ● The Components ● The Layouts ● The Middleware ● The Pages ● The Plugins ● The Static ● The Store ● The Nuxt Config File
  • 10. Routing ● Basic Routes ● Dynamic Routes ● Nested Routes ● Dynamic Nested Routes
  • 11. HTML Head Default Meta Tags(Nuxt.config.js) export default { head: { titleTemplate: '%s - Nuxt.js', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: 'Meta description' } ] } } Custom Meta Tags(Page Specific) export default { head () { return { title: this.title, meta: [ { hid: 'description', name: 'description', content: 'My custom description' } ] } } }
  • 12. HTML Head Contd... ● Open Graphs ● Twitter Card ● Canonical Tags ● Google Analytics
  • 13. DEMO 01 JavaScript Enable/Disable 02 Page Reloading 03 SEO Crawling