book

Hands-on Nuxt.js Web Development

by Lau Tiam Kok Kok Lau

August 2020

Beginner to intermediate

698 pages

12h 2m

English

Packt Publishing

Read now

Unlock full access

Hands-on Nuxt.js Web Development
Why subscribe?
About the authorAbout the reviewerPackt is searching for authors like you
Who this book is forWhat this book coversTo get the most out of this bookDownload the example code filesConventions usedGet in touchReviews
From Vue to NuxtWhy use Nuxt?Writing single-file componentsWriting ES2015+Writing CSS with a preprocessorExtending Nuxt with modules and pluginsAdding transitions between routesManaging the elementBundling and splitting code with webpackTypes of applicationsTraditional server-side rendered appTraditional single-page app (SPA)Universal server-side rendered app (SSR)Static-generated appNuxt as a universal SSR appNuxt as a static site generatorNuxt as a single-page appSummary
Technical requirementsInstalling NuxtUsing create-nuxt-appStarting from scratchUnderstanding the directory structureThe assets directoryThe static directoryThe pages directoryThe layouts directoryThe components directoryThe plugins directoryThe store directoryThe middleware directoryThe package.json fileThe nuxt.config.js fileThe aliasesUnderstanding custom configurationThe mode optionThe target optionThe head optionThe css optionThe plugins optionThe components optionThe buildModules optionThe modules optionThe build optionThe dev optionThe rootDir optionThe srcDir optionThe server optionThe env optionThe router optionThe dir optionThe loading optionThe pageTransition and layoutTransition optionsThe generate optionUnderstanding asset servingwebpack assets versus static assetsSummary
Adding Foundation and Motion UICreating grid layouts and website navigations with FoundationUsing JavaScript utilities and plugins from FoundationCreating CSS animations and transitions with Motion UIAdding icons with Foundation Icon Fonts 3Adding Less (Leaner Style Sheets)Adding jQuery UIAdding AOSAdding SwiperSummary

Creating custom routesIntroducing Vue RouterInstalling Vue RouterCreating routes with Vue RouterCreating basic routesCreating dynamic routesCreating nested routesCreating dynamic nested routesValidating route paramsHandling unknown routes with _.vue filesCreating custom viewsUnderstanding the Nuxt viewCustomizing the app templateCreating a custom HTML headIntroducing Vue MetaInstalling Vue MetaCreating metadata with Vue Meta in Vue appsCustomizing the default meta tags in Nuxt appsCreating custom meta tags for Nuxt pagesCreating custom layoutsModifying the default layoutCreating new custom layoutsCreating custom error pagesCreating custom pagesUnderstanding pagesThe asyncData methodThe fetch methodThe head methodThe layout propertyThe loading propertyThe transition propertyThe scrollToTop propertyThe validate methodThe middleware propertyCreating custom transitionsUnderstanding Vue transitionsMaking transitions with the pageTransition propertyMaking transitions with the layoutTransition propertyMaking transitions with CSS animationsMaking transitions with JavaScript hooksUnderstanding transition modesSummary
Understanding Vue componentsWhat is a component?Passing data to child components with propsListening to child component eventsEmitting a value with an eventCreating custom input components with v-modelCustomizing the model in custom input componentsUnderstanding the key attribute in v-for loopsControlling reusable elements with key attributesCreating single-file Vue componentsCompiling single-file components with webpackPassing data and listening to events in single-file componentsAdding Vue components in NuxtRefactoring navigation and social linksRefactoring the copyright componentRegistering global and local componentsRegistering global components in VueRegistering local components in Vue/NuxtRegistering global components in NuxtWriting basic and global mixinsCreating basic mixins/non-global mixinsCreating global mixinsDefining component names and using naming conventionsMulti-word component namesComponent dataProp definitionsComponent filesSingle-file component filename casingSelf-closing componentsSummary
Writing Vue pluginsWriting a custom plugin in VueImporting Vue plugins into NuxtImporting external Vue plugins without SSR supportWriting global functions in NuxtInjecting functions into the Vue instanceInjecting functions into the Nuxt contextInjecting functions into both the Vue instance and the Nuxt contextInjecting client-only or server-only pluginsWriting Nuxt modulesWriting a basic moduleWriting async Nuxt modulesUsing async/awaitReturning a PromiseWriting Nuxt module snippetsUsing top-level optionsUsing the addPlugin helperUsing Lodash templatesAdding a CSS libraryRegistering custom webpack loadersRegistering custom webpack pluginsCreating tasks on specific hooksSummary
Understanding v-modelUsing v-model in text and textarea elementsUsing v-model in checkbox and radio elementsUsing v-model in select elementsValidating forms with basic data bindingsValidating text elementsValidating textarea elementsValidating checkbox elementsValidating radio elementsValidating select elementsMaking dynamic value bindingsReplacing Boolean – checkbox elementsReplacing strings with dynamic properties – radio elementsReplacing strings with objects – select options elementsUsing modifiersAdding .lazyAdding .numberAdding .trimValidating forms with VeeValidateApplying custom validation to a Nuxt applicationSummary
Introducing BackpackInstalling and configuring BackpackCreating a simple app using BackpackIntroducing KoaInstalling and configuring KoaWhat is ctx?Understanding how Koa cascading worksInstalling dependencies for Koa appsIntegrating Koa with NuxtAdding routes and other essential middlewareUnderstanding async dataReturning a promiseUsing async/awaitMerging the dataAccessing context in asyncDataAccessing the req/res objectsAccessing the dynamic route dataListening to the query changesHandling errorsFetching async data with AxiosInstalling and configuring AxiosFetching data with Axios and asyncDataListening on the query changeSummary
Introducing MongoDBInstalling MongoDBInstalling on Ubuntu 20.04Starting MongoDBWriting basic MongoDB queriesCreating a databaseCreating a new collectionWriting MongoDB CRUD operationsInjecting data with MongoDB CRUDInserting documentsQuerying documentsUpdating documentsDeleting documentsIntegrating MongoDB with KoaInstalling the MongoDB driverCreating a simple app with the MongoDB driverConfiguring the MongoDB driverUnderstanding ObjectId and the ObjectId methodInjecting one documentFetching all documentsUpdating one documentDeleting one documentIntegrating with Nuxt PagesCreating an add page for adding new usersCreating an update page for updating existing usersCreating a delete page for deleting existing usersSummary
Understanding the Vuex architectureWhat is Vuex?State management patternGetting started with VuexInstalling VuexCreating a simple storeUnderstanding Vuex core conceptsThe stateAccessing the stateThe mapState helperGettersThe mapGetters helperMutationsThe mapMutations helperActionsThe mapActions helperModulesUnderstanding the local state and root stateUnderstanding namespacingStructuring Vuex store modulesCreating a simple store module structureCreating an advanced store module structureHandling forms in a Vuex storeUsing v-bind and v-on directivesUsing a two-way computed propertyUsing a Vuex store in NuxtUsing module modeUsing module filesUsing the fetch methodUsing the nuxtServerInit actionSummary
Writing middlewares with Vue RouterWhat is middleware?Installing Vue RouterUsing navigation guardsCreating global guardsCreating per-route guardsCreating in-component guardsUnderstanding the navigation guard arguments: to, from, and nextIntroducing Vue CLIInstalling Vue CLIUnderstanding Vue CLI's project structureWriting middlewares and a Vuex store with Vue CLIWriting route middlewares in NuxtWriting global middlewaresWriting per-route middlewaresWriting Nuxt server middlewaresUsing Express as Nuxt's server middlewareUsing Koa as Nuxt's server middlewareCreating custom server middlewareSummary
Understanding session-based authenticationWhat are sessions and cookies?The session authentication flowUnderstanding token-based authentication What are JSON Web Tokens?The token authentication flowUsing Node.js modules for JWTCreating backend authenticationUsing MySQL as the server databaseStructuring cross-domain app directoriesCreating API public/private routes and their modulesUsing the bcryptjs module for Node.jsUsing the mysql module for Node.jsRefactoring login code on the server sideVerifying the incoming token on the server sideCreating frontend authenticationUsing cookies on the (Nuxt) client sideUsing cookies on the (Nuxt) server sideSigning in with Google OAuthAdding Google OAuth to the backend authenticationCreating frontend authentication for Google OAuthSummary
End-to-end testing versus unit testingEnd-to-end testing toolsjsdomAVAWriting tests with jsdomn and AVA for Nuxt appsIntroducing NightwatchWriting tests with Nightwatch for Nuxt appsSummary
Introducing linters – Prettier, ESLint, and StandardJSPrettierConfiguring PrettierESLintConfiguring ESLintStandardJSIntegrating ESLint and PrettierUsing ESLint and Prettier for Vue and Nuxt appsConfiguring Vue rulesRunning ESLint and Prettier separately in Nuxt appsDeploying Nuxt appsDeploying a Nuxt universal server-side rendered appDeploying a Nuxt static-generated (pre-rendered) app Hosting the Nuxt universal SSR app on virtual private serversHosting the Nuxt universal SSR app on shared hosting serversHosting the Nuxt static generated app on static site hosting serversSummary
Understanding classic SPAs and Nuxt SPAsInstalling a Nuxt SPADeveloping a Nuxt SPACreating the client-side nuxtServerInit actionCreating multiple custom Axios instances with pluginsInstalling the custom Axios plugin in the Nuxt config fileImporting the custom Axios plugin manuallyDeploying a Nuxt SPADeploying to GitHub PagesSummary
Introducing PHPInstalling or upgrading PHPConfiguring PHP 7.4Running PHP apps with a built-in PHP web serverUnderstanding HTTP messages and PSRsWhy PSRs?PSR-12 – Extended Coding Style guidePSR-4 – AutoloaderPSR-7 – HTTP Message InterfacesPSR-15 – HTTP Server Request Handlers (request handlers)PSR-15 – HTTP Server Request Handlers (middleware)PSR-7/PSR-15 routerWriting CRUD operations with PHP database frameworksCreating MySQL tablesUsing Medoo as a database frameworkInserting recordsQuerying recordsUpdating recordsDeleting recordsStructuring cross-domain app directoriesCreating the API's public routes and their modulesIntegrating with NuxtCreating CRUD pagesSummary
Introducing RethinkDBInstalling RethinkDB ServerIntroducing ReQLIntegrating RethinkDB with KoaRestructuring API directoriesAdding and using the RethinkDB JavaScript clientEnforcing schema in RethinkDBIntroducing changefeeds in RethinkDBIntroducing Socket.IOAdding and using Socket.IO server and clientIntegrating Socket.IO server and RethinkDB changefeedsIntegrating Socket.IO with NuxtSummary
Creating headless REST APIs in WordPressInstalling WordPress and creating our first pagesCreating custom post types in WordPressExtending the WordPress REST APIIntegrating with Nuxt and streaming images from WordPressIntroducing KeystoneInstalling and securing PostgreSQL (Ubuntu)Installing and securing MongoDB (Ubuntu)Installing and creating Keystone appsCreating lists and fieldsIntroducing GraphQLUnderstanding the GraphQL schema and resolversUnderstanding GraphQL default resolversCreating a GraphQL API with Apollo ServerUsing the Keystone GraphQL APIIntegrating Keystone, GraphQL, and NuxtSummary
Leave a review - let other readers know what you think

Overview

Immerse yourself in the world of Nuxt.js with "Hands-on Nuxt.js Web Development." This book is designed to provide you with a practical, step-by-step guide to building universal and static web applications using the Nuxt.js framework, taking your Vue.js development skills to the next level.

What this Book will help me do

Build universal SSR and static-generated web apps using Nuxt.js.
Integrate Nuxt.js with modern APIs and headless CMS solutions.
Implement robust security features like JWT authentication in your web apps.
Master testing and deployment best practices for Nuxt.js apps.
Gain hands-on experience with real-world projects integrating Node.js, GraphQL, and Vuex.

Author(s)

Lau Tiam Kok is an accomplished software developer with a strong background in web frameworks, especially JavaScript ecosystems like Vue.js and Nuxt.js. As a seasoned author, he brings a hands-on approach to technical writing, ensuring readers gain real-world capabilities to implement projects confidently.

Who is it for?

This book is ideal for JavaScript developers and full-stack engineers familiar with Vue.js basics and ready to delve deeper into advanced SSR architectures. Readers looking to enhance their application performance and SEO with Nuxt.js will benefit greatly. It is also well-suited for developers interested in creating scalable, dynamic web applications with sophisticated data handling and deployment workflows.