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

Creating custom transitions

So far, you have managed to create multiple routes and pages for a Nuxt app and add a loading bar that shows up when switching between pages. This makes a pretty decent-looking app already. But that is not all that you can do with Nuxt. You can add more stunning effects and transitions between pages. This is where the transition properties in pages (for example, /pages/about.vue) come in, as well as the pageTransition and layoutTransition options in the Nuxt config file.

We can apply a transition globally through the Nuxt config file or specifically on certain pages. We will guide you through this topic. However, to understand how the transition works in Nuxt, we should first understand how it works in Vue, and then we can learn how to implement it on our pages when the route is changed. Let's get started.

Understanding Vue transitions

Vue relies on CSS transitions and uses the <transition> Vue component to wrap around an HTML element or a Vue component...