Creating a Real-Time App with Nuxt | Hands-on Nuxt.js Web Development

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

Hands-on Nuxt.js Web Development

By : Lau Tiam Kok Kok Lau, LAU THIAM KOK

3 (2)

Hands-on Nuxt.js Web Development

3 (2)

By: Lau Tiam Kok Kok Lau, LAU THIAM KOK

Overview of this book

Nuxt.js is a progressive web framework built on top of Vue.js for server-side rendering (SSR). With Nuxt.js and Vue.js, building universal and static-generated applications from scratch is now easier than ever before. This book starts with an introduction to Nuxt.js and its constituents as a universal SSR framework. You'll learn the fundamentals of Nuxt.js and find out how you can integrate it with the latest version of Vue.js. You'll then explore the Nuxt.js directory structure and set up your first Nuxt.js project using pages, views, routing, and Vue components. With the help of practical examples, you'll learn how to connect your Nuxt.js application with the backend API by exploring your Nuxt.js application’s configuration, plugins, modules, middleware, and the Vuex store. The book shows you how you can turn your Nuxt.js application into a universal or static-generated application by working with REST and GraphQL APIs over HTTP requests. Finally, you'll get to grips with security techniques using authorization, package your Nuxt.js application for testing, and deploy it to production. By the end of this web development book, you'll have developed a solid understanding of using Nuxt.js for your projects and be able to build secure, end-to-end tested, and scalable web applications with SSR, data handling, and SEO capabilities.

Preface

Preface

Who this book is for

What this book covers

To get the most out of this book

Get in touch

Section 1: Your First Nuxt App

Section 1: Your First Nuxt App

Free Chapter

Introducing Nuxt

Introducing Nuxt

From Vue to Nuxt

Why use Nuxt?

Types of applications

Nuxt as a universal SSR app

Nuxt as a static site generator

Nuxt as a single-page app

Summary

Getting Started with Nuxt

Getting Started with Nuxt

Technical requirements

Installing Nuxt

Understanding the directory structure

Understanding custom configuration

Understanding asset serving

Summary

Adding UI Frameworks

Adding UI Frameworks

Adding Foundation and Motion UI

Adding Less (Leaner Style Sheets)

Adding jQuery UI

Adding AOS

Adding Swiper

Summary

Section 2: View, Routing, Components, Plugins, and Modules

Section 2: View, Routing, Components, Plugins, and Modules

Adding Views, Routes, and Transitions

Adding Views, Routes, and Transitions

Creating custom routes

Creating custom views

Creating custom transitions

Summary

Adding Vue Components

Adding Vue Components

Understanding Vue components

Creating single-file Vue components

Registering global and local components

Writing basic and global mixins

Defining component names and using naming conventions

Summary

Writing Plugins and Modules

Writing Plugins and Modules

Writing Vue plugins

Writing global functions in Nuxt

Writing Nuxt modules

Writing async Nuxt modules

Writing Nuxt module snippets

Summary

Adding Vue Forms

Adding Vue Forms

Understanding v-model

Validating forms with basic data bindings

Making dynamic value bindings

Using modifiers

Validating forms with VeeValidate

Applying custom validation to a Nuxt application

Summary

Section 3: Server-Side Development and Data Management

Section 3: Server-Side Development and Data Management

Adding a Server-Side Framework

Adding a Server-Side Framework

Introducing Backpack

Introducing Koa

Integrating Koa with Nuxt

Understanding async data

Accessing context in asyncData

Fetching async data with Axios

Summary

Adding a Server-Side Database

Adding a Server-Side Database

Introducing MongoDB

Writing basic MongoDB queries

Writing MongoDB CRUD operations

Injecting data with MongoDB CRUD

Integrating MongoDB with Koa

Integrating with Nuxt Pages

Summary

Adding a Vuex Store

Adding a Vuex Store

Understanding the Vuex architecture

Getting started with Vuex

Understanding Vuex core concepts

Structuring Vuex store modules

Handling forms in a Vuex store

Using a Vuex store in Nuxt

Summary

Section 4: Middleware and Security

Section 4: Middleware and Security

Writing Route Middlewares and Server Middlewares

Writing Route Middlewares and Server Middlewares

Writing middlewares with Vue Router

Introducing Vue CLI

Writing route middlewares in Nuxt

Writing Nuxt server middlewares

Summary

Creating User Logins and API Authentication

Creating User Logins and API Authentication

Understanding session-based authentication

Understanding token-based authentication

Creating backend authentication

Creating frontend authentication

Signing in with Google OAuth

Summary

Section 5: Testing and Deployment

Section 5: Testing and Deployment

Writing End-to-End Tests

Writing End-to-End Tests

End-to-end testing versus unit testing

End-to-end testing tools

Writing tests with jsdomn and AVA for Nuxt apps

Introducing Nightwatch

Writing tests with Nightwatch for Nuxt apps

Summary

Using Linters, Formatters, and Deployment Commands

Using Linters, Formatters, and Deployment Commands

Introducing linters – Prettier, ESLint, and StandardJS

Integrating ESLint and Prettier

Using ESLint and Prettier for Vue and Nuxt apps

Deploying Nuxt apps

Summary

Section 6: The Further Fields

Section 6: The Further Fields

Creating an SPA with Nuxt

Creating an SPA with Nuxt

Understanding classic SPAs and Nuxt SPAs

Installing a Nuxt SPA

Developing a Nuxt SPA

Deploying a Nuxt SPA

Summary

Creating a Framework-Agnostic PHP API for Nuxt

Creating a Framework-Agnostic PHP API for Nuxt

Introducing PHP

Understanding HTTP messages and PSRs

Writing CRUD operations with PHP database frameworks

Integrating with Nuxt

Summary

Creating a Real-Time App with Nuxt

Creating a Real-Time App with Nuxt

Introducing RethinkDB

Integrating RethinkDB with Koa

Introducing Socket.IO

Integrating Socket.IO with Nuxt

Summary

Creating a Nuxt App with a CMS and GraphQL

Creating a Nuxt App with a CMS and GraphQL

Creating headless REST APIs in WordPress

Introducing Keystone

Introducing GraphQL

Integrating Keystone, GraphQL, and Nuxt

Summary

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

3 (2)

5 star

50%

4 star

0%

3 star

0%

2 star

0%

1 star

50%

Creating a Real-Time App with Nuxt

In this chapter, we are going to venture a bit further with Nuxt to see how we can use it to work with other frameworks for making real-time apps. We will continue using Koa as the backend API but "enhance" it with RethinkDB and Socket.IO. In other words, we will turn our backend API into a real-time API with these two awesome frameworks and tools. At the same time, we will turn our frontend Nuxt app into a real-time Nuxt app with help from them as well. You can develop these two real-time apps on the single-domain approach if you prefer. However, this book favors the cross-domain approach so that we don't mix up the frontend and the backend dependencies and get confused over time. So, this will be another interesting and exciting chapter for you to learn from!

In this chapter, we will cover the following topics:

Introducing RethinkDB...

Visually different images

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Hands-on Nuxt.js Web Development

Search

Your notes and bookmarks