Nuxt.js - Vue.js on Steroids

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.

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

Audience

This course is designed for people who want to build engaging, (optionally) server-side-rendered Vue.js apps, those who want to work with Vue.js and follow a minimal-configuration approach, and for those who want to create static websites with Vue.js (with Nuxt as a static page generator!).

About The Author

Academind by Maximilian Schwarzmüller:

Academind GmbH

Bundling the courses and the knowledge of successful instructors, Academind strives to deliver high-quality online education. The platform covers topics such as web development, data analysis, and more in a fun and engaging way.

Maximilian Schwarzmüller

Since the age of 13, he has never stopped learning new programming skills and languages. In his early days, he started creating websites simply for fun. This passion has remained and shaped his decision to work as a freelance web developer and consultant. Although he started web development on the backend (PHP with Laravel and NodeJS), he has progressed to becoming a front-end developer using modern frameworks such as React, Angular, and VueJS 2 in many projects.

The most rewarding experience for him is to see how people find new and better jobs, build exciting web applications, acquire amazing projects, or simply enjoy their hobby with the help of his content.

Table of contents

  1. Chapter 1 : Getting Started
    1. Welcome Introduction
    2. What is Nuxt.js?
    3. Understanding Server Side Rendering
    4. Nuxt vs "Normal" Server Side Rendering
    5. Creating our First Nuxt App
    6. Understanding the Folder Structure
    7. What can we Build with Nuxt?
    8. What's Inside This Course?
    9. How To Get The Most Out Of This Course
  2. Chapter 2 : Pages, Routing Views
    1. Module Introduction
    2. From Folders to Routes
    3. Creating a Route with a Dynamic Path
    4. Adding Links Navigating Around
    5. Validating Parameters
    6. Creating Nested Routes
    7. Layouts, Pages Components – Theory
    8. Adding a New Layout
    9. Adding a Default Error Page
    10. Working with "Normal" Components
    11. Styling Nuxt Apps
    12. Wrap Up
  3. Chapter 3 : Project - Pages, Routing Views
    1. Module Introduction
    2. Creating the Main "Sections" (Pages)
    3. Adding External Fonts
    4. Creating the Landing Page
    5. Splitting the Page into Components
    6. Adding Static Assets - The Background Image
    7. Adding the Header Component
    8. Vue Router vs. Nuxt Router
    9. Working on the Post Page
    10. Creating an Admin Section
    11. Preparing the Backend
    12. Improving the App
    13. Adding a Separate Layout to the Admin Area
  4. Chapter 4 : Handling Data
    1. Module Introduction
    2. Adding Dynamic Data
    3. Preparing Data on the Server-Side (through Nuxt)
    4. asyncData on Client Server
    5. A r Look at the Context Object
    6. Adding Async Data to a Single Post
    7. Handling Errors with a Callback
    8. Using Promises in asyncData
    9. Adding the Vuex Store
    10. Vuex, fetch() and nuxtServerInit()
    11. Wrap Up
  5. Chapter 5 : Connecting our App to the Backend
    1. Module Introduction
    2. Executing Code on the Server
    3. Adding Firebase as a Backend
    4. Using Firebase to Store Data
    5. Fetching Data from the Backend
    6. Initializing our Store
    7. Fetching all Posts
    8. Editing Posts
    9. Synchronizing Vuex and the Backend
    10. Wrap Up
  6. Chapter 6 : Nuxt - Config, Plugins Modules
    1. Module Introduction
    2. The Nuxt Config File
    3. The Loading Property
    4. Working with Environment Variables
    5. Manipulating Routing Settings
    6. Animating Page Transitions
    7. Adding Plugins
    8. Registering a Date Filter
    9. Understanding Modules
    10. Wrap Up
  7. Chapter 7 : Middleware Authentication
    1. Module Introduction
    2. What is Middleware?
    3. Adding User Signup
    4. Adding User Login
    5. Storing the Token
    6. Using the Token for Authentication
    7. Implementing a Middleware
    8. Invalidating the Token
    9. Persisting the Token Across Page Refreshes
    10. Implementing Cookies
    11. Fixing the Logout Timer
    12. Adding the Logout Functionality
    13. A Quick Bugfix
  8. Chapter 8 : The Server Side
    1. Module Introduction
    2. Adding Server Side Middleware
    3. Testing the Middleware
    4. Starting a Project with a Server Side Template
  9. Chapter 9 : Building a Nuxt App
    1. Module Introduction
    2. Universal vs SPA vs Static
    3. Building our App as a Universal App
    4. Building our App as a SPA
    5. Building our App as a Static Website
    6. Improving the Generate Process
    7. Limiting the Amount of http Requests
    8. Adjusting the Store
  10. Chapter 10 : Round Up
    1. Course Roundup

Product information

  • Title: Nuxt.js - Vue.js on Steroids
  • Author(s): Academind by Maximilian Schwarzmüller
  • Release date: October 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781789957396