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.

Related Content you might be interested in

Current Title:

Small book image
Hands-on Nuxt.js Web Development
Lau Tiam Kok
Aug, 2020 | 698 pages
Small book image
Vue.js Quick Start Guide
Ajdin Imsirovic
Oct, 2018 | 186 pages
Small book image
Vue.js: Understanding its Tools and Ecosystem
Dave Berning
Nov, 2019 | 194 pages
Small book image
Vue.js 2 Design Patterns and Best Practices
Paul Halliday
Mar, 2018 | 344 pages
Table of Contents (26 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
1
Section 1: Your First Nuxt App
Section 1: Your First Nuxt App
Free Chapter
2
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
3
Getting Started with Nuxt
Getting Started with Nuxt
Technical requirements
Installing Nuxt
Understanding the directory structure
Understanding custom configuration
Understanding asset serving
Summary
4
Adding UI Frameworks
Adding UI Frameworks
Adding Foundation and Motion UI
Adding Less (Leaner Style Sheets)
Adding jQuery UI
Adding AOS
Adding Swiper
Summary
5
Section 2: View, Routing, Components, Plugins, and Modules
Section 2: View, Routing, Components, Plugins, and Modules
6
Adding Views, Routes, and Transitions
Adding Views, Routes, and Transitions
Creating custom routes
Creating custom views
Creating custom transitions
Summary
7
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
8
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
9
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
10
Section 3: Server-Side Development and Data Management
Section 3: Server-Side Development and Data Management
11
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
12
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
13
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
14
Section 4: Middleware and Security
Section 4: Middleware and Security
15
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
16
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
17
Section 5: Testing and Deployment
Section 5: Testing and Deployment
18
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
19
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
20
Section 6: The Further Fields
Section 6: The Further Fields
21
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
22
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
23
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
24
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
25
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Creating frontend authentication

You will find this section easy and familiar because you have built a few authentication Nuxt apps with the dummy backend authentication in the previous two chapters. The difference in this chapter is that we are making cross-domain apps instead of single-domain apps like in the previous two chapters. You can revisit these single-domain Nuxt apps in /chapter-10/nuxt-universal/nuxtServerInit/ and in /chapter-11/nuxt-universal/route-middleware/per-route/.

Furthermore, we will once again use the Nuxt modules that we already covered in Chapter 6, Writing Plugins and Modules: @nuxtjs/axios and @nuxtjs/proxy. You can revisit the Nuxt app that adopts these two modules in /chapter-6/nuxt-universal/module-snippets/top-level/. But for now, let's get them installed and configured for this Nuxt app, which we will refactor from the previous chapters, to create the client-side authentication in the following steps:

  1. Install @nuxtjs/axios and @nuxtjs/proxy via npm...
Previous Section
End of Section 5
Next Section