Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Hands-on Nuxt.js Web Development

By : Lau Tiam Kok Kok Lau, LAU THIAM KOK

3 (2)

Hands-on Nuxt.js Web Development

3 (2)

By: Lau Tiam Kok Kok Lau, LAU THIAM 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

Preface

Who this book is for

What this book covers

To get the most out of this book

Get in touch

Section 1: Your First Nuxt App

Section 1: Your First Nuxt App

Free Chapter

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

Getting Started with Nuxt

Getting Started with Nuxt

Technical requirements

Installing Nuxt

Understanding the directory structure

Understanding custom configuration

Understanding asset serving

Summary

Adding UI Frameworks

Adding UI Frameworks

Adding Foundation and Motion UI

Adding Less (Leaner Style Sheets)

Adding jQuery UI

Adding AOS

Adding Swiper

Summary

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

Summary

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

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

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

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

Summary

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

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

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

Summary

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

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

Summary

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

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

Summary

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

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

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

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Summary

In this chapter, you learned what a page is in Nuxt and how to create different kinds of routes for your app. You learned how to customize the default app template and layout, as well as how to create new layouts and a 404 page. You learned how to use CSS transitions and animations, as well as JavaScript hooks and methods, to make the transition between your app pages interesting. If you have been following the guides from the start, you should be able to deliver a small project with a nice looking layout by now. You can find a website example in /chapter-4/nuxt-universal/sample-website/ in our GitHub repository that has used what we have learned in this and previous chapters.

In the next chapter, we are going to explore the /components/ directory. You will learn how to make use of it in Nuxt apps to refine the layouts and pages we have covered in this chapter by understanding Vue components in more detail, including passing data to them from the page and layout components, creating...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Hands-on Nuxt.js Web Development

Search

Your notes and bookmarks