▶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
▶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
▶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.
▶What this book covers
- Chapter 1, Introducing Nuxt, is where you will learn about the main features of Nuxt. Youwill 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 individual 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 singlepage 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 frameworkagnostic 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.
