Introduction to NuxtJS - Nested and dynamic pages, layouts, asyncData + axios, meta tags, and VueX

  • 2019-10-22 01:33 AM
  • 87

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.

0:00 Start
2:57 Why Nuxt?
7:02 Installation
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
1:05:25 Review

Github Links:

Init: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/b13e5407d3cc3668ffb086cbb2977b93d7cf4db9
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
Links: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/c847095a49bae8302116151fff8fed76106f4960
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
VueX: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/48d52ce5b69af13ad077f73a7efaa54a39b5f7c2

Backend: https://github.com/jeffreybiles/vue-screencasts-server/tree/47c546286742b42419d628264723eb006372329b

Thanks for reading
If you liked this post, share it with all of your programming buddies!
Follow us on Facebook | Twitter

Learn More

Nuxt.js - Vue.js on Steroids
Build Universal Applications with Nuxt.js
Nuxt.js: a Minimalist Framework for Creating Universal Vue.js Apps
Implementing Authentication in a Nuxt.js App

Suggest