Hands-on Nuxt.js Web Development

Table of contents

1. Title Page
2. Copyright and Credits
   1. Hands-on Nuxt.js Web Development
3. Dedication
4. About Packt
   1. Why subscribe?
5. Contributors
   1. About the author
   2. About the reviewer
   3. Packt is searching for authors like you
6. Preface
   1. Who this book is for
   2. What this book covers
   3. To get the most out of this book
      1. Download the example code files
      2. Conventions used
   4. Get in touch
      1. Reviews
7. Section 1: Your First Nuxt App
8. Introducing Nuxt
   1. From Vue to Nuxt
   2. Why use Nuxt?
      1. Writing single-file components
      2. Writing ES2015+
      3. Writing CSS with a preprocessor
      4. Extending Nuxt with modules and plugins
      5. Adding transitions between routes
      6. Managing the element
      7. Bundling and splitting code with webpack
   3. Types of applications
      1. Traditional server-side rendered app
      2. Traditional single-page app (SPA)
      3. Universal server-side rendered app (SSR)
      4. Static-generated app
   4. Nuxt as a universal SSR app
   5. Nuxt as a static site generator
   6. Nuxt as a single-page app
   7. Summary
9. Getting Started with Nuxt
   1. Technical requirements
   2. Installing Nuxt
      1. Using create-nuxt-app
      2. Starting from scratch
   3. Understanding the directory structure
      1. The assets directory
      2. The static directory
      3. The pages directory
      4. The layouts directory
      5. The components directory
      6. The plugins directory
      7. The store directory
      8. The middleware directory
      9. The package.json file
      10. The nuxt.config.js file
      11. The aliases
   4. Understanding custom configuration
      1. The mode option
      2. The target option
      3. The head option
      4. The css option
      5. The plugins option
      6. The components option
      7. The buildModules option
      8. The modules option
      9. The build option
      10. The dev option
      11. The rootDir option
      12. The srcDir option
      13. The server option
      14. The env option
      15. The router option
      16. The dir option
      17. The loading option
      18. The pageTransition and layoutTransition options
      19. The generate option
   5. Understanding asset serving
      1. webpack assets versus static assets
   6. Summary
10. Adding UI Frameworks
    1. Adding Foundation and Motion UI
       1. Creating grid layouts and website navigations with Foundation
       2. Using JavaScript utilities and plugins from Foundation
       3. Creating CSS animations and transitions with Motion UI
       4. Adding icons with Foundation Icon Fonts 3
    2. Adding Less (Leaner Style Sheets)
    3. Adding jQuery UI
    4. Adding AOS
    5. Adding Swiper
    6. Summary
11. Section 2: View, Routing, Components, Plugins, and Modules
12. Adding Views, Routes, and Transitions
    1. Creating custom routes
       1. Introducing Vue Router
       2. Installing Vue Router
       3. Creating routes with Vue Router
       4. Creating basic routes
       5. Creating dynamic routes
       6. Creating nested routes
       7. Creating dynamic nested routes
       8. Validating route params
       9. Handling unknown routes with _.vue files
    2. Creating custom views
       1. Understanding the Nuxt view
       2. Customizing the app template
       3. Creating a custom HTML head
          1. Introducing Vue Meta
          2. Installing Vue Meta
          3. Creating metadata with Vue Meta in Vue apps
          4. Customizing the default meta tags in Nuxt apps
          5. Creating custom meta tags for Nuxt pages
       4. Creating custom layouts
          1. Modifying the default layout
          2. Creating new custom layouts
          3. Creating custom error pages
       5. Creating custom pages
       6. Understanding pages
          1. The asyncData method
          2. The fetch method
          3. The head method
          4. The layout property
          5. The loading property
          6. The transition property
          7. The scrollToTop property
          8. The validate method
          9. The middleware property
    3. Creating custom transitions
       1. Understanding Vue transitions
       2. Making transitions with the pageTransition property
       3. Making transitions with the layoutTransition property
       4. Making transitions with CSS animations
       5. Making transitions with JavaScript hooks
       6. Understanding transition modes
    4. Summary
13. Adding Vue Components
    1. Understanding Vue components
       1. What is a component?
       2. Passing data to child components with props
       3. Listening to child component events
          1. Emitting a value with an event
       4. Creating custom input components with v-model
          1. Customizing the model in custom input components
       5. Understanding the key attribute in v-for loops
       6. Controlling reusable elements with key attributes
    2. Creating single-file Vue components
       1. Compiling single-file components with webpack
       2. Passing data and listening to events in single-file components
       3. Adding Vue components in Nuxt
          1. Refactoring navigation and social links
          2. Refactoring the copyright component
    3. Registering global and local components
       1. Registering global components in Vue
       2. Registering local components in Vue/Nuxt
       3. Registering global components in Nuxt
    4. Writing basic and global mixins
       1. Creating basic mixins/non-global mixins
       2. Creating global mixins
    5. Defining component names and using naming conventions
       1. Multi-word component names
       2. Component data
       3. Prop definitions
       4. Component files
       5. Single-file component filename casing
       6. Self-closing components
    6. Summary
14. Writing Plugins and Modules
    1. Writing Vue plugins
       1. Writing a custom plugin in Vue
       2. Importing Vue plugins into Nuxt
       3. Importing external Vue plugins without SSR support
    2. Writing global functions in Nuxt
       1. Injecting functions into the Vue instance
       2. Injecting functions into the Nuxt context
       3. Injecting functions into both the Vue instance and the Nuxt context
       4. Injecting client-only or server-only plugins
    3. Writing Nuxt modules
       1. Writing a basic module
    4. Writing async Nuxt modules
       1. Using async/await
       2. Returning a Promise
    5. Writing Nuxt module snippets
       1. Using top-level options
       2. Using the addPlugin helper
       3. Using Lodash templates
       4. Adding a CSS library
       5. Registering custom webpack loaders
       6. Registering custom webpack plugins
       7. Creating tasks on specific hooks
    6. Summary
15. Adding Vue Forms
    1. Understanding v-model
       1. Using v-model in text and textarea elements
       2. Using v-model in checkbox and radio elements
       3. Using v-model in select elements
    2. Validating forms with basic data bindings
       1. Validating text elements
       2. Validating textarea elements
       3. Validating checkbox elements
       4. Validating radio elements
       5. Validating select elements
    3. Making dynamic value bindings
       1. Replacing Boolean – checkbox elements
       2. Replacing strings with dynamic properties – radio elements
       3. Replacing strings with objects – select options elements
    4. Using modifiers
       1. Adding .lazy
       2. Adding .number
       3. Adding .trim
    5. Validating forms with VeeValidate
    6. Applying custom validation to a Nuxt application
    7. Summary
16. Section 3: Server-Side Development and Data Management
17. Adding a Server-Side Framework
    1. Introducing Backpack
       1. Installing and configuring Backpack
       2. Creating a simple app using Backpack
    2. Introducing Koa
       1. Installing and configuring Koa
       2. What is ctx?
       3. Understanding how Koa cascading works
       4. Installing dependencies for Koa apps
    3. Integrating Koa with Nuxt
       1. Adding routes and other essential middleware
    4. Understanding async data
       1. Returning a promise
       2. Using async/await
       3. Merging the data
    5. Accessing context in asyncData
       1. Accessing the req/res objects
       2. Accessing the dynamic route data
       3. Listening to the query changes
       4. Handling errors
    6. Fetching async data with Axios
       1. Installing and configuring Axios
       2. Fetching data with Axios and asyncData
       3. Listening on the query change
    7. Summary
18. Adding a Server-Side Database
    1. Introducing MongoDB
       1. Installing MongoDB
       2. Installing on Ubuntu 20.04
       3. Starting MongoDB
    2. Writing basic MongoDB queries
       1. Creating a database
       2. Creating a new collection
    3. Writing MongoDB CRUD operations
    4. Injecting data with MongoDB CRUD
       1. Inserting documents
       2. Querying documents
       3. Updating documents
       4. Deleting documents
    5. Integrating MongoDB with Koa
       1. Installing the MongoDB driver
       2. Creating a simple app with the MongoDB driver
       3. Configuring the MongoDB driver
       4. Understanding ObjectId and the ObjectId method
       5. Injecting one document
       6. Fetching all documents
       7. Updating one document
       8. Deleting one document
    6. Integrating with Nuxt Pages
       1. Creating an add page for adding new users
       2. Creating an update page for updating existing users
       3. Creating a delete page for deleting existing users
    7. Summary
19. Adding a Vuex Store
    1. Understanding the Vuex architecture
       1. What is Vuex?
       2. State management pattern
    2. Getting started with Vuex
       1. Installing Vuex
       2. Creating a simple store
    3. Understanding Vuex core concepts
       1. The state
          1. Accessing the state
          2. The mapState helper
       2. Getters
          1. The mapGetters helper
       3. Mutations
          1. The mapMutations helper
       4. Actions
          1. The mapActions helper
       5. Modules
          1. Understanding the local state and root state
          2. Understanding namespacing
    4. Structuring Vuex store modules
       1. Creating a simple store module structure
       2. Creating an advanced store module structure
    5. Handling forms in a Vuex store
       1. Using v-bind and v-on directives
       2. Using a two-way computed property
    6. Using a Vuex store in Nuxt
       1. Using module mode
       2. Using module files
       3. Using the fetch method
       4. Using the nuxtServerInit action
    7. Summary
20. Section 4: Middleware and Security
21. Writing Route Middlewares and Server Middlewares
    1. Writing middlewares with Vue Router
       1. What is middleware?
       2. Installing Vue Router
       3. Using navigation guards
          1. Creating global guards
          2. Creating per-route guards
          3. Creating in-component guards
       4. Understanding the navigation guard arguments: to, from, and next
    2. Introducing Vue CLI
       1. Installing Vue CLI
       2. Understanding Vue CLI's project structure
       3. Writing middlewares and a Vuex store with Vue CLI
    3. Writing route middlewares in Nuxt
       1. Writing global middlewares
       2. Writing per-route middlewares
    4. Writing Nuxt server middlewares
       1. Using Express as Nuxt's server middleware
       2. Using Koa as Nuxt's server middleware
       3. Creating custom server middleware
    5. Summary
22. Creating User Logins and API Authentication
    1. Understanding session-based authentication
       1. What are sessions and cookies?
       2. The session authentication flow
    2. Understanding token-based authentication 
       1. What are JSON Web Tokens?
       2. The token authentication flow
       3. Using Node.js modules for JWT
    3. Creating backend authentication
       1. Using MySQL as the server database
       2. Structuring cross-domain app directories
       3. Creating API public/private routes and their modules
       4. Using the bcryptjs module for Node.js
       5. Using the mysql module for Node.js
       6. Refactoring login code on the server side
       7. Verifying the incoming token on the server side
    4. Creating frontend authentication
       1. Using cookies on the (Nuxt) client side
       2. Using cookies on the (Nuxt) server side
    5. Signing in with Google OAuth
       1. Adding Google OAuth to the backend authentication
       2. Creating frontend authentication for Google OAuth
    6. Summary
23. Section 5: Testing and Deployment
24. Writing End-to-End Tests
    1. End-to-end testing versus unit testing
    2. End-to-end testing tools
       1. jsdom
       2. AVA
    3. Writing tests with jsdomn and AVA for Nuxt apps
    4. Introducing Nightwatch
    5. Writing tests with Nightwatch for Nuxt apps
    6. Summary
25. Using Linters, Formatters, and Deployment Commands
    1. Introducing linters – Prettier, ESLint, and StandardJS
       1. Prettier
          1. Configuring Prettier
       2. ESLint
          1. Configuring ESLint
       3. StandardJS
    2. Integrating ESLint and Prettier
    3. Using ESLint and Prettier for Vue and Nuxt apps
       1. Configuring Vue rules
       2. Running ESLint and Prettier separately in Nuxt apps
    4. Deploying Nuxt apps
       1. Deploying a Nuxt universal server-side rendered app
       2. Deploying a Nuxt static-generated (pre-rendered) app 
       3. Hosting the Nuxt universal SSR app on virtual private servers
       4. Hosting the Nuxt universal SSR app on shared hosting servers
       5. Hosting the Nuxt static generated app on static site hosting servers
    5. Summary
26. Section 6: The Further Fields
27. Creating an SPA with Nuxt
    1. Understanding classic SPAs and Nuxt SPAs
    2. Installing a Nuxt SPA
    3. Developing a Nuxt SPA
       1. Creating the client-side nuxtServerInit action
       2. Creating multiple custom Axios instances with plugins
          1. Installing the custom Axios plugin in the Nuxt config file
          2. Importing the custom Axios plugin manually
    4. Deploying a Nuxt SPA
       1. Deploying to GitHub Pages
    5. Summary
28. Creating a Framework-Agnostic PHP API for Nuxt
    1. Introducing PHP
       1. Installing or upgrading PHP
       2. Configuring PHP 7.4
       3. Running PHP apps with a built-in PHP web server
    2. Understanding HTTP messages and PSRs
       1. Why PSRs?
       2. PSR-12 – Extended Coding Style guide
       3. PSR-4 – Autoloader
       4. PSR-7 – HTTP Message Interfaces
       5. PSR-15 – HTTP Server Request Handlers (request handlers)
       6. PSR-15 – HTTP Server Request Handlers (middleware)
       7. PSR-7/PSR-15 router
    3. Writing CRUD operations with PHP database frameworks
       1. Creating MySQL tables
       2. Using Medoo as a database framework
       3. Inserting records
       4. Querying records
       5. Updating records
       6. Deleting records
       7. Structuring cross-domain app directories
       8. Creating the API's public routes and their modules
    4. Integrating with Nuxt
       1. Creating CRUD pages
    5. Summary
29. Creating a Real-Time App with Nuxt
    1. Introducing RethinkDB
       1. Installing RethinkDB Server
       2. Introducing ReQL
    2. Integrating RethinkDB with Koa
       1. Restructuring API directories
       2. Adding and using the RethinkDB JavaScript client
       3. Enforcing schema in RethinkDB
       4. Introducing changefeeds in RethinkDB
    3. Introducing Socket.IO
       1. Adding and using Socket.IO server and client
       2. Integrating Socket.IO server and RethinkDB changefeeds
    4. Integrating Socket.IO with Nuxt
    5. Summary
30. Creating a Nuxt App with a CMS and GraphQL
    1. Creating headless REST APIs in WordPress
       1. Installing WordPress and creating our first pages
       2. Creating custom post types in WordPress
       3. Extending the WordPress REST API
       4. Integrating with Nuxt and streaming images from WordPress
    2. Introducing Keystone
       1. Installing and securing PostgreSQL (Ubuntu)
       2. Installing and securing MongoDB (Ubuntu)
       3. Installing and creating Keystone apps
       4. Creating lists and fields
    3. Introducing GraphQL
       1. Understanding the GraphQL schema and resolvers
       2. Understanding GraphQL default resolvers
       3. Creating a GraphQL API with Apollo Server
       4. Using the Keystone GraphQL API
    4. Integrating Keystone, GraphQL, and Nuxt
    5. Summary
31. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think