Nuxt.js - Vue.js on Steroids [Video]

Preview Online

Code Files

Nuxt.js - Vue.js on Steroids [Video]

Maximilian Schwarzmüller

Friday, October 26, 2018

Build highly engaging Vue.js apps with Nuxt.js. Nuxt adds easy server-side-rendering and a folder-based config approach

Quick links: > Table of contents > What will you learn? > Preview

Packt Subscription

$5.00

$9.99/m after first month

Video

$5.01

RRP $125.99

Save 96%

What do I get with a Packt subscription?

Exclusive monthly discount - no contract
Unlimited access to entire Packt library of 6500+ eBooks and Videos
120 new titles added every month, on new and emerging tech

What do I get with an eBook?

Download this book in EPUB, PDF, MOBI formats
DRM FREE - read and interact with your content when you want, where you want, and how you want
Access this title in the subscription reader

What do I get with Print & eBook?

Get a paperback copy of the book delivered to you
Download this book in EPUB, PDF, MOBI formats
DRM FREE - read and interact with your content when you want, where you want, and how you want
Access this title in the subscription reader

What do I get with a Video?

Download this Video course in MP4 format
DRM FREE - read and interact with your content when you want, where you want, and how you want
Access this title in the subscription reader

$5.00

$5.01

$9.99/m after first month

RRP $125.99

Subscription

Video

Subscribe Now

Frequently bought together

Nuxt.js - Vue.js on Steroids [Video]

$ 125.99

$ 5.01

Nuxt.js - Vue.js on Steroids [Video]

Oct 2018

6 hours 25 minutes

$ 5.01

Practical Projects with Vue JS 2 [Video]

$ 124.99

$ 5.00

Practical Projects with Vue JS 2 [Video]

Dec 2018

3 hours 45 minutes

$ 5.00

Buy 2 for $10.01
Save $240.97

Add to Cart

Video Details

ISBN 13 9781789957396

Course Length 6 hours 25 minutes

Getting Started

Welcome & Introduction

What is Nuxt.js?

Understanding Server Side Rendering

Nuxt vs "Normal" Server Side Rendering

Creating our First Nuxt App

Understanding the Folder Structure

What can we Build with Nuxt?

What's Inside This Course?

How To Get The Most Out Of This Course

Pages, Routing & Views

Module Introduction

From Folders to Routes

Creating a Route with a Dynamic Path

Adding Links & Navigating Around

Validating Parameters

Creating Nested Routes

Layouts, Pages & Components – Theory

Adding a New Layout

Adding a Default Error Page

Working with "Normal" Components

Styling Nuxt Apps

Wrap Up

Project - Pages, Routing & Views

Module Introduction

Creating the Main "Sections" (Pages)

Adding External Fonts

Creating the Landing Page

Splitting the Page into Components

Adding Static Assets - The Background Image

Adding the Header Component

Vue Router vs. Nuxt Router

Working on the Post Page

Creating an Admin Section

Preparing the Backend

Improving the App

Adding a Separate Layout to the Admin Area

Handling Data

Module Introduction

Adding Dynamic Data

Preparing Data on the Server-Side (through Nuxt)

asyncData on Client & Server

A Closer Look at the Context Object

Adding Async Data to a Single Post

Handling Errors with a Callback

Using Promises in asyncData

Adding the Vuex Store

Vuex, fetch() and nuxtServerInit()

Wrap Up

Connecting our App to the Backend

Module Introduction

Executing Code on the Server

Adding Firebase as a Backend

Using Firebase to Store Data

Fetching Data from the Backend

Initializing our Store

Fetching all Posts

Editing Posts

Synchronizing Vuex and the Backend

Wrap Up

Nuxt - Config, Plugins & Modules

Module Introduction

The Nuxt Config File

The Loading Property

Working with Environment Variables

Manipulating Routing Settings

Animating Page Transitions

Adding Plugins

Registering a Date Filter

Understanding Modules

Wrap Up

Middleware & Authentication

Using the Token for Authentication

Implementing a Middleware

Invalidating the Token

Persisting the Token Across Page Refreshes

Implementing Cookies

Fixing the Logout Timer

Adding the Logout Functionality

A Quick Bugfix

The Server Side

Module Introduction

Adding Server Side Middleware

Testing the Middleware

Starting a Project with a Server Side Template

Building a Nuxt App

Module Introduction

Universal vs SPA vs Static

Building our App as a Universal App

Building our App as a SPA

Building our App as a Static Website

Improving the Generate Process

Limiting the Amount of http Requests

Adjusting the Store

Round Up

Course Roundup

Video Description

This course will take you on a journey where you'll you will learn to build highly engaging Vue.js apps with Nuxt.js. Nuxt adds easy server-side-rendering and a folder-based config approach. Vue.js is an amazing JavaScript framework which you can use to build highly engaging user interfaces and single.- page applications. You'll master all the details in this course but the most important takeaway is that Nuxt.js makes creating better, more optimized, and more capable Vue apps much easier—and all of that while adding pretty much no overhead. You'll learn how to create Nuxt/ Vue apps from scratch! You'll build an entire course project and dive into the core features Nuxt.js offers. By the end of the course, you'll have a complete Vue app, built with Nuxt.js, which can be rendered on the server (or as a static website!) and which is highly optimized.

Style and Approach

This exhaustive course packed with step-by-step instructions, working examples, and helpful advice is divided into clear chunks so you can learn at your own pace and focus on your own areas of interest. Prior Vue.js knowledge is required for this course.

Video Preview

What You Will Learn

Build server-side-rendered single-page-applications (SPAs)
Build normal, optimized SPAs with minimal effort
Generate a static webpage from Vue.js code
Get real info on Nuxt.js and how it's connected to Vue.js
How you use Nuxt.js to build better Vue apps
Everything you need to know about the configure via folders and files approach taken by Nuxt
Different build such as like SSR apps, SPAs, or a static webpage
Build an entire project, including authentication, via Nuxt.js

Authors

Maximilian Schwarzmüller

Academind GmbH - Online Education

Bundling the courses and knowhow of successful instructors, Academind strives to deliver high-quality online education. Online Education, Real-Life Success—that's what Academind stands for. Learn topics like web development, data analysis, and more in a fun and engaging way.

Maximilian Schwarzmüller - Professional Web Developer and Instructor

Since the age of 13, Maximilian Schwarzmüller has never stopped learning new programming skills and languages. In the early days, he started creating websites for friends and for fun. This passion has remained and shaped his decision to work as a freelance web developer and consultant. The success and fun he has in this job is immense and really keeps that passion alive. Although he started web development on the back end (PHP with Laravel and NodeJS), he has increasingly become a front-end developer using modern frameworks such as React, Angular, or VueJS 2 in a lot of projects. He loves both worlds nowadays! As a self-taught developer, he had broadened his horizon by studying Business Administration, resulting in a Master's degree. This enabled him to work in a major strategy consultancy as well as a bank. Whilst learning and developing his skills, he realized that he enjoyed development more than these fields.

As a self-taught professional, Max is familiar with the difficult topics when learning new or improving on already-known languages. This background and experience enables him to focus on the most relevant key concepts and topics. His track record is the best proof of that. Whether working as development instructor or teaching Business Administration, he always receives great feedback. The most rewarding experience is to see how people find new and better jobs, build awesome web applications, acquire amazing projects, or simply enjoy their hobby with the help of his content.

Getting Started

Welcome & Introduction

What is Nuxt.js?

Understanding Server Side Rendering

Nuxt vs "Normal" Server Side Rendering

Creating our First Nuxt App

Understanding the Folder Structure

What can we Build with Nuxt?

What's Inside This Course?

How To Get The Most Out Of This Course

Pages, Routing & Views

Module Introduction