Book Image

Hands-on Nuxt.js Web Development

By : Lau Tiam Kok

Book Image

Hands-on Nuxt.js Web Development

By: Lau Tiam 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

Who this book is for

What this book covers

To get the most out of this book

Section 1: Your First Nuxt App

Section 1: Your First Nuxt App

Free Chapter

Introducing Nuxt

Introducing Nuxt

From Vue to Nuxt

Types of applications

Nuxt as a universal SSR app

Nuxt as a static site generator

Nuxt as a single-page app

Getting Started with Nuxt

Getting Started with Nuxt

Technical requirements

Installing Nuxt

Understanding the directory structure

Understanding custom configuration

Understanding asset serving

Adding UI Frameworks

Adding UI Frameworks

Adding Foundation and Motion UI

Adding Less (Leaner Style Sheets)

Adding jQuery UI

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Nuxt as a static site generator

Even though server-side rendering is the main feature of Nuxt, it is also a static site generator that pre-renders your Nuxt app in a static site, as shown in the example provided for the static-generated app category. It is perhaps the best of both worlds between a traditional single-page application and a server-side-rendered app. While benefiting from the static HTML content for a better SEO, you no longer need the runtime support from Node.js and Nuxt. However, your app will still behave like an SPA.

What's more is that during static generation, Nuxt has a crawler that crawls the links in your app to generate dynamic routes and save their data from the remote API as payload.js files in a /static/ folder inside the /dist/ folder. These payloads are then used to serve the data that was originally requested from the API. This means you are not calling the API anymore. This can secure your API from the public, and possibly from attackers.

You'll learn how to generate static sites from Nuxt with a remote API in Chapter 14, Using Linters, Formatters, and Deployment Commands, and in the final chapter of this book, Chapter 18, Creating a Nuxt App with CMS and GraphQL.