An Overview on Nuxt.js
Download as PPTX, PDF0 likes897 views
The document provides an overview of Nuxt.js, a high-level framework designed for server-side rendering (SSR) which enhances SEO and offers simplified routing and code management. It explains the benefits of SSR, the installation process, directory structure, and how to configure routing and HTML head elements, including meta tags for SEO. Additionally, it highlights key features such as automatic code splitting, ES6/ES7 transpilation, and offers a demo section for practical understanding.
![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' }
]
}
}
}](https://image.slidesharecdn.com/prototypingpresentation-190531063855/85/An-Overview-on-Nuxt-js-11-320.jpg)
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
- 14. Any Queries?
- 15. Thank you!