Hands-on Nuxt.js Web Development: Build universal and static-generated Vue.js applications using Nuxt.js

Learn Nuxt.js for building server-side rendered, static-generated, and production-ready Vue.js web applications with the help of practical examples

Key Features

• Explore techniques for authentication, testing, and deployment to build your first complete Nuxt.js web app
• Write cleaner, maintainable, and scalable isomorphic JavaScript web applications
• Transform your Vue.js application into universal and static-generated web apps

Book Description

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.

What you will learn

• Integrate Nuxt.js with the latest version of Vue.js
• Extend your Vue.js applications using Nuxt.js pages, components, routing, middleware, plugins, and modules
• Create a basic real-time web application using Nuxt.js, Node.js, Koa.js and RethinkDB
• Develop universal and static-generated web applications with Nuxt.js, headless CMS and GraphQL
• Build Node.js and PHP APIs from scratch with Koa.js, PSRs, GraphQL, MongoDB and MySQL
• Secure your Nuxt.js applications with the JWT authentication
• Discover best practices for testing and deploying your Nuxt.js applications

Who this book is for

The book is for any JavaScript or full-stack developer who wants to build server-side rendered Vue.js apps. A basic understanding of the Vue.js framework will assist with understanding key concepts covered in the book.

學習 Nuxt.js：使用實際範例建立伺服器端渲染、靜態生成和適用於生產的 Vue.js 網頁應用程式

主要特點：

- 探索身份驗證、測試和部署技術，建立第一個完整的 Nuxt.js 網頁應用程式
- 撰寫更乾淨、可維護和可擴展的同構 JavaScript 網頁應用程式
- 將 Vue.js 應用程式轉換為通用和靜態生成的網頁應用程式

書籍描述：

Nuxt.js 是一個建立在 Vue.js 之上的漸進式網頁框架，用於伺服器端渲染（SSR）。使用 Nuxt.js 和 Vue.js，從頭開始建立通用和靜態生成的應用程式變得比以往更容易。

本書首先介紹 Nuxt.js 及其作為通用 SSR 框架的組成部分。您將學習 Nuxt.js 的基礎知識，並了解如何將其與最新版本的 Vue.js 整合。然後，您將探索 Nuxt.js 的目錄結構，並使用頁面、視圖、路由和 Vue 元件設置您的第一個 Nuxt.js 專案。通過實際範例的幫助，您將學習如何通過探索 Nuxt.js 應用程式的配置、插件、模組、中間件和 Vuex 存儲將其與後端 API 連接起來。本書還展示了如何通過使用 REST 和 GraphQL API 進行 HTTP 請求，將 Nuxt.js 應用程式轉換為通用或靜態生成的應用程式。最後，您將掌握使用授權技術進行安全性技術，將 Nuxt.js 應用程式打包進行測試並部署到生產環境。

通過閱讀本書，您將對使用 Nuxt.js 開發項目有扎實的理解，並能夠建立具有 SSR、資料處理和 SEO 功能的安全、端到端測試和可擴展的網頁應用程式。

您將學到什麼：

- 將 Nuxt.js 與最新版本的 Vue.js 整合
- 使用 Nuxt.js 頁面、元件、路由、中間件、插件和模組擴展您的 Vue.js 應用程式
- 使用 Nuxt.js、Node.js、Koa.js 和 RethinkDB 建立基本的即時網頁應用程式
- 使用 Nuxt.js、無頭 CMS 和 GraphQL 開發通用和靜態生成的網頁應用程式
- 從頭開始使用 Koa.js、PSR、GraphQL、MongoDB 和 MySQL 建立 Node.js 和 PHP API
- 使用 JWT 身份驗證保護您的 Nuxt.js 應用程式
- 探索測試和部署 Nuxt.js 應用程式的最佳實踐

本書適合對象：

本書適合任何想要建立伺服器端渲染 Vue.js 應用程式的 JavaScript 或全端開發人員。對 Vue.js 框架有基本的了解將有助於理解本書涵蓋的關鍵概念。

Lau Tiam Kok, aka Lau Thiam Kok, is a cross-disciplinary full stack web developer/designer and analyst. He was born in Penang, Malaysia. His studies include a Bachelor of Applied Arts degree at University Malaysia Sarawak (1996 - 1999), and an MSc in Digital Futures at the Institute of Digital Art and Technology, University of Plymouth, UK (2002 - 2003). Lau has freelanced for more than 10 years for various individuals, institutions, and companies. He works with designers or independently, from designing layouts to coding the frontend and server-side programs to produce responsive websites. He also works collaboratively on air-quality monitoring projects for Citizen Sense (based in the United Kingdom), which uses R, openair, Shiny, MongoDB, RethinkDB, Express.js, Koa.js, Socket.IO and Nuxt.js for data analysis web apps and IoT data platforms.

Lau Tiam Kok（劉添國），又名Lau Thiam Kok，是一位跨領域的全端網頁開發者/設計師和分析師。他出生於馬來西亞檳城。他的學歷包括馬來西亞沙拉瓦克大學應用藝術學士學位（1996年至1999年）和英國普利茅斯大學數字藝術與技術研究所的數字未來碩士學位（2002年至2003年）。Lau已經為各種個人、機構和公司自由工作超過10年。他與設計師合作或獨立工作，從設計佈局到編寫前端和後端程式，以製作響應式網站。他還在Citizen Sense（位於英國）的空氣質量監測項目中進行合作工作，該項目使用R、openair、Shiny、MongoDB、RethinkDB、Express.js、Koa.js、Socket.IO和Nuxt.js進行數據分析網絡應用和物聯網數據平台。

1. Introducing Nuxt
2. Getting started with Nuxt
3. Adding UI Frameworks
4. Adding Views, Routes, and Transitions
5. Adding Vue Components
6. Writing Plugins and Modules
7. Adding Vue Forms
8. Adding a Server-side Framework
9. Adding a Server-side Database
10. Adding a Vuex Store
11. Writing Route Middlewares and Server Middlewares
12. Creating User Logins and API Authentication
13. Writing End-to-End Tests
14. Using Linters, Formatters, and Deployment Commands
15. Creating an SPA with Nuxt
16. Creating a Framework-Agnostic PHP API for Nuxt
17. Creating a Real-Time App with Nuxt
18. Creating a Nuxt App with a CMS and GraphQL

- 介紹 Nuxt
- 開始使用 Nuxt
- 添加 UI 框架
- 添加視圖、路由和過渡效果
- 添加 Vue 組件
- 編寫插件和模塊
- 添加 Vue 表單
- 添加服務端框架
- 添加服務端數據庫
- 添加 Vuex 存儲
- 編寫路由中間件和服務器中間件
- 創建用戶登錄和 API 認證
- 編寫端到端測試
- 使用 Linters、格式化工具和部署命令
- 創建一個 Nuxt 單頁應用
- 為 Nuxt 創建一個與框架無關的 PHP API
- 創建一個實時應用程序與 Nuxt
- 使用 CMS 和 GraphQL 創建 Nuxt 應用程序