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

Integrating Keystone, GraphQL, and Nuxt

Keystone's GraphQL API endpoint is located at localhost:4000/admin/api. As opposed to a REST API, which usually has multiple endpoints, GraphQL API usually has one single endpoint for all queries. So, we will use this endpoint to send our GraphQL queries from the Nuxt app. It is good practice to always test our queries on the GraphQL Playground first to confirm that we get the result we need and then use those tested queries in our frontend apps. Besides, we should always use the query keyword in our queries in the frontend app to fetch data from the GraphQL API.

In this exercise, we will refactor the Nuxt app that we built for the WordPress API. We will be looking at the /pages/index.vue, /pages/projects/index.vue, /pages/projects/_slug.vue, and /store/index.js files. We will still be using Axios to help us send the GraphQL query. Let's take a look at how to get the GraphQL query and Axios working together:

Create a variable that will...