Preface

Nuxt.js (we will call it Nuxt in this book) is a progressive web framework built on top of Vue.js (we will call it Vue in this book) for server-side rendering (SSR). With Nuxt and Vue, building universal and static-generated applications is easier than ever before. This book will help you get up and running with the fundamentals of Nuxt and how to integrate it with the latest version of Vue, enabling you to build an entire project, including authentication, testing, and deployment, with Nuxt and Vue.js. You will explore Nuxt's directory structure and get your Nuxt project created by using Nuxt's pages, views, routing, and Vue components, and by writing plugins, modules, a Vuex store, and middlewares. Furthermore, you will learn how to create Node.js and PHP APIs or data platforms from scratch by using Koa.js (we will call it Koa in this book), PHP Standards Recommendations (PSRs), MongoDB, and MySQL, as well as using WordPress as a headless CMS and REST API. You'll also use Keystone.js as a GraphQL API to complement Nuxt. You will learn how to create a real-time Nuxt application and API with Socket.IO and RethinkDB, and finally generate static sites with Nuxt and streaming resources (images and videos) from a remote API, whether a REST API or a GraphQL API.

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 in understanding the key concepts covered in the book.

What this book covers

Chapter 1, Introducing Nuxt, is where you will learn about the main features of Nuxt. You will learn about the types of web applications there are today and which categories Nuxt is in line with. Then, you will find out what you can use Nuxt for in the coming chapters.

Chapter 2, Getting Started with Nuxt, is where you will install Nuxt, using a scaffolding tool, or doing so from scratch, to create your first basic Nuxt application. You will learn about the default directory structure in your Nuxt project, configuring Nuxt to suit your project and understanding asset serving.

Chapter 3, Adding UI Frameworks, is where you will add custom UI frameworks, such as Zurb Foundation, Motion UI, Less CSS, and many more, to make your UI development in Nuxt easier and more fun.

Chapter 4, Adding Views, Routes, and Transitions, is where you will create navigation routes, custom pages, layouts, and templates in your Nuxt application. You will learn how to add transitions and animations, create custom error pages, customize global meta tags, and add specific tags to inpidual pages.

Chapter 5, Adding Vue Components, is where you will add Vue components to your Nuxt application. You will learn how to create global and local components and reuse them, writing basic and global mixins and defining component names that comply with the naming convention.

Chapter 6, Writing Plugins and Modules, is where you will create and add plugins, modules, and module snippets in your Nuxt application. You will learn how to create Vue plugins and install them in your Nuxt project, writing global functions, and registering them.

Chapter 7, Adding Vue Forms, is where you will create forms with v-model and v-bind, validating form elements and making dynamic value bindings by using modifiers. You will also learn to use a Vue plugin, VeeValidate, to make your frontend validation easier. 

Chapter 8, Adding a Server-Side Framework, is where you will use Koa as the server-side framework to create an API to complement your Nuxt application. You will learn how to install Koa and its essential Node.js packages to create a fully working API and integrate it with your Nuxt application. Also, you will learn about using async data in Nuxt to fetch data from the Koa API, accessing Nuxt context via async data, listening to query changes, handling errors, and using Axios as the HTTP client for requesting data from the API.

Chapter 9, Adding a Server-Side Database, is where you will use MongoDB to manage the database for your Nuxt application. You will learn how to install MongoDB, writing basic MongoDB queries, adding some dummy data into your MongoDB database, integrating MongoDB with your API from the previous chapter with Koa, and then fetching the data from your Nuxt application.

Chapter 10, Adding a Vuex Store, is where you will use Vuex to manage and centralize the store data for your Nuxt application. You will learn about the Vuex architecture, mutating store data with the store's mutation and action methods, structuring your store program modularly when it gets bigger, and handling forms in the Vuex store.

Chapter 11, Writing Route Middlewares and Server Middlewares, is where you will create route middlewares and server middlewares in your Nuxt application. You will learn how to create middlewares using Vue Router, creating Vue applications using Vue CLI and using Express.js (we will call it Express in this book), Koa, and Connect.js (we will call it Connect in this book) as server middlewares. 

Chapter 12, Creating User Logins and API Authentication, is where you will add authentication to the restricted page in your Nuxt application using session, cookies, JSON Web Tokens (JWTs), Google OAuth, and the route middlewares that you learned about in the previous chapter. You will learn how to create backend authentication with JWTs, using cookies on the client side and server side in your Nuxt application (frontend authentication), and adding Google OAuth to the backend and frontend authentication.

Chapter 13, Writing End-to-End Tests, is where you will create end-to-end tests with AVA, jsdom, and Nightwatch.js. You will learn how to install these tools, setting up the testing environment, and writing tests for the pages in your Nuxt application from the previous chapter.

Chapter 14, Using Linters, Formatters, and Deployment Commands, is where you will use ESLint, Prettier, and StandardJS to keep your code clean, readable, and formatted. You will learn how to install and configure these tools to suit your needs and integrate different linters in your Nuxt application. Finally, you will learn how to deploy your Nuxt application with Nuxt commands and learn about what hosting service to publish your application.

Chapter 15, Creating an SPA with Nuxt, is where you will learn how to develop a single-page application (SPA) in Nuxt, understanding the differences between the SPA in Nuxt and the classic SPA and generating a static SPA to deploy to a static hosting server, GitHub Pages.

Chapter 16, Creating a Framework-Agnostic PHP API for Nuxt, is where you will use PHP to create an API to complement your Nuxt application. You will learn how to install the Apache server and PHP engine, understand HTTP messages and PHP standards, install MySQL as your database system, write CRUD operations for MySQL, create a framework-agnostic PHP API by complying with the PHP standards, and then integrate your API with your Nuxt application.

Chapter 17, Creating a Real-Time App with Nuxt, is where you will develop a real-time Nuxt application with RethinkDB, Socket.IO, and Koa. You will learn how to install RethinkDB, be introduced to ReQL, integrate RethinkDB with your Koa API, add Socket.IO to the API and your Nuxt application, and finally turn your Nuxt application into a real-time web application with RethinkDB changefeeds.

Chapter 18, Creating a Nuxt App with a CMS and GraphQL, is where you will use a (headless) CMS and GraphQL to complement your Nuxt application. You will learn how to turn WordPress into a headless CMS, creating custom post types in WordPress and extending the WordPress REST API. You will learn how to use GraphQL in your Nuxt application, understand GraphQL schema and resolvers, create a GraphQL API with Appolo Server, and use the Keystone.js GraphQL API. Also, you will learn how to install and secure PostgreSQL and MongoDB, generating static sites with Nuxt and streaming resources (images and videos) from the remote API, whether it is a REST API or a GraphQL API.

To get the most out of this book

You will need a version of Nuxt.js throughout the book – the latest version, if possible. All code examples have been tested using Nuxt 2.14.x on Ubuntu 20.10. Here is a list of other essential software, frameworks, and technologies for this book:

If you are using the digital version of this book, we advise you to type the code yourself or access the code via the GitHub repository (link available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Download the example code files

You can download the example code files for this book from your account at www.packt.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you.

You can download the code files by following these steps:

1. Log in or register at www.packt.com.
2. Select the Support tab.
3. Click on Code Downloads.
4. Enter the name of the book in the Search box and follow the onscreen instructions.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

• WinRAR/7-Zip for Windows
• Zipeg/iZip/UnRarX for Mac
• 7-Zip/PeaZip for Linux

The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Hands-on-Nuxt.js-Web-Development. In case there's an update to the code, it will be updated on the existing GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Conventions used

There are a number of text conventions used throughout this book.

CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Then, you can just create the transition style in a .css file."

A block of code is set as follows:

// pages/about.vue
<script>
export default {
  transition: {
    name: 'fade'

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

[default]
exten => s,1,Dial(Zap/1|30)
exten => s,2,Voicemail(u100)
exten => s,102,Voicemail(b100)
exten => i,1,Voicemail(s0)

Any command-line input or output is written as follows:

$ npm i less --save-dev
$ npm i less-loader --save-dev

Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Select Manually select features to pick Router from the options that you are prompted to select, to choose the features you need."

Warnings or important notes appear like this.

Tips and tricks appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, mention the book title in the subject of your message and email us at customercare@packtpub.com.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.

Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at copyright@packt.com with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Reviews

Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!

For more information about Packt, please visit packt.com.