Cover image for Hands-on Nuxt.js Web Development

Hands-on Nuxt.js Web Development

Author Lau Tiam Kok
Release Date: 2020/08/01
Topic:
0%
33
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

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.

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