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