Introduction to NuxtJS - Nested and dynamic pages, layouts, asyncData + axios, meta tags, and VueX
- 2019-10-22 01:33 AM
NuxtJS is a framework built on top of VueJS. The biggest benefits you get out of the box are server-side rendering and automatic code splitting. You also get many common Vue libraries built in, pulled together with a conventional folder structure in order to reduce boilerplate.
This video only scratches the surface of what Nuxt can do, but it does cover most of the major features and goes farther than the other free tutorials I’ve found.
2:57 Why Nuxt?
11:33 Project Structure
17:26 Pages and Routing
29:58 Navbar and Layouts
39:40 axios and asyncData
49:00 Meta tags
56:09 VueX and fetch
Serve on port 8000: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/a637a4bc727ea1bf59c5ac257b4bcabef7bd9483
Pages and Routes: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/cd4cc70f3df5df8ded3c35042a16e6e3cca9eb89
Navbar + Layouts: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/b9885985f673d5cc7742cd2c0fd97e8890bfb5d6
Axios and asyncData: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/a5f810971027063c419c510a94bbdbee81ad85f0
Head tags and titles: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/928494c23c65afd3eaf79c4541d5ce75e7021f84