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

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

NuxtJS is a framework built on top of VueJS. 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.

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

The "Building a VueJS Screencasting App From Scratch" Playlist: https://www.youtube.com/playlist?list=PLPwpWyfm6JADRf8x1Jc0Da8R71WJyt-Jn

Find me online!

Twitter: https://twitter.com/VueScreencasts

Website coming soon.

vuejs vue vue-js nuxt

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

How to build enterprise Vue.js applications with Nuxt?

Learn How to build enterprise Vue.js applications with Nuxt: Nuxt is a progressive framework based on Vue.js to create modern web applications. It is based on Vue.js official libraries (vue, vue-router and vuex) and powerful development tools (webpack, Babel and PostCSS). Nuxt goal is to make web development powerful and performant with a great developer experience in mind.

Responsive ecommerce template built with Vue.js and Nuxt.js

Responsive ecommerce template built with Vue.js and Nuxt.js

Serverless-side rendering with Vue.js, Nuxt.js and AWS Lambda

We want the best of both worlds. The SEO boost server-side rendering provides, and the speed of a Single Page Application. All this while hosted basically for free in a serverless environment on AWS Lambda. Here’s a quick overview of what we’ll be building for you to get up to speed. Feel free to jump to the step that interests you the most.

How to add Authentication to Nuxt.JS and Vue.JS

This Vue.JS Tutorial shows how to add Authentication and Authorization to your NuxtJS App and make it work with SSR