Introduction to Nuxt js
summary
Demo uses create-nuxt-app (requires NPM 5.2+) to scaffold a project, chooses universal mode so pages render server‑side then hydrate on the client, and shows the generated folders (pages, layouts, components, static, store, plugins). Assets get hashed or inline if under 1 kilobyte, pages are code‑split and Nuxt does smart prefetching when links enter the viewport, and SEO uses vue-meta so titles and meta descriptions are present in the initial server HTML even with JavaScript disabled.
AI-written summary · about
chapters (26)
- 0:00Start
- 4:20Creating our Initial Nuxt App
- 6:30Vue Component Folders
- 7:10Nuxt Component Folder Structure
- 7:53Initial Component Files
- 8:31Image Assets Example
- 9:32Nuxt Folder Structure
- 10:04Creating our First Pages & Routes
- 10:30Creating our Example App
- 11:09Fixing the Conflict in Vetur
- 11:48Add Styles in the Default Layout
- 12:38Simplify our pages/index.vue
- 13:11Startup our dev server + test
- 13:31Create a new page
- 15:47Use NavBar component in the layout
- 16:39Single Page App Behavior
- 17:45Why SPAs aren't fast on initial load
- 18:03Our Solution: Universal Mode
- 19:03Universal App after Hydration
- 19:57Universal App after Page Load
- 22:58Nuxt 2.4: Smart Prefetching
- 26:10Two SEO Basics
- 31:18What if I turn off JavaScript?
- 31:48A Single Page Vue App w/vue-meta
- 32:26Our Solution: Universal App
- 33:25There are lots of other header tags
related talks
25mBrief introduction to Nuxt
27mUniversal Vue applications with Nuxt.js
26mBe Lazy, Be Smart, Be Nuxt.
55mNuxt.js: isomorphic Vue.js Apps made easy, fast and fun
04mNuxt.js: Universal Vue.js Applications
44mNuxt.js - Why? How? Oh yeah!
27mNuxt 3 – More Than Vue 3 on Steroids
18mNuxt.js - Just Vue and a bit of magic?