Learn Vue.js: The Collection
Published on 6. June 2019
524 pages
978-1-4920-7147-1 (ISBN)
Description
Since its release in 2014, Vue.js has seen a meteoric rise to popularity and is is now considered one of the primary front-end frameworks, and not without good reason. Its component-based architecture was designed to be flexible and easy to adopt, making it just as easy to integrate into projects and use alongside non-Vue code as it is to build complex client-side applications.
This is a collection of three books covering crucial Vue topics. It contains:
- Working with Vue.js
- 11 Practical Vue.js Projects
- Vue.js: Tools & Skills
More details
Person
I'm a web developer currently living in the sunny north of Germany. I enjoy coding in both JavaScript and Ruby and can often be found in SitePoint's JavaScript forum. When I'm not coding, I enjoy running.
Content
- Working with Vue.js
- Notice of Rights
- Notice of Liability
- Trademark Notice
- About SitePoint
- Preface
- Who Should Read This Book?
- Conventions Used
- Book 1: Working with Vue.js
- Chapter 1: Getting up and Running with the Vue.js 2.0 Framework
- Inspiration from Other Libraries
- Components, Components, Components
- Setting Up a Project
- Writing Our First Vue.js App
- Vue Devtools
- Building the App
- Forms in Vue.js
- Tracking a Form Input
- Displaying Results From GitHub
- Refactors
- Conclusion
- Chapter 2: Getting Started with Vuex: a Beginner's Guide
- A Shopping Cart Example
- Prerequisites
- Build a Counter Using Local State
- How Vuex Works
- Re-build Counter App Using Vuex
- Conclusion
- Chapter 3: A Beginner's Guide to Vue CLI
- Vue CLI v3 Installation and Requirements
- Creating a Vue Project
- Vue CLI Plugins
- What About webpack?
- Vue CLI UI
- Conclusion
- Chapter 4: A Beginner's Guide to Working With Components in Vue
- How to Create Components in Vue
- Passing Data to Components Via Props
- Communicating From a Child to Parent Component via an Event Bus
- Nesting Content in Components Using Slots
- Conclusion
- Chapter 5: A Beginner's Guide to Working with Forms in Vue
- Two-way Data Binding with v-model
- Altering the Browser's Default Behavior with Modifiers
- Formatting Output with Filters
- VeeValidate
- Conclusion
- Chapter 6: How to Conditionally Apply a CSS Class in Vue.js
- Step 1: Define Your CSS Classes
- Step 2: Create Your Class Bindings
- Chapter 7: How to Replace jQuery with Vue
- What We're Building
- jQuery
- Converting to Vue
- Summing Up
- Chapter 8: Nuxt.js: a Minimalist Framework for Creating Universal Vue.js Apps
- What Nuxt.js Is
- Creating A Serverless Static Site With Nuxt.js
- Conclusion
- Chapter 9: Optimize the Performance of a Vue App with Async Components
- Async Components
- Dynamic Imports
- Conditionally Loading Async Components
- Async with Loading and Error Component
- Conclusion
- Book 2: Vue.js: 11 Practical Projects
- Chapter 1: Build a Basic CRUD App with Vue.js, Node and MongoDB
- Install the Tooling
- Creating the Node Back End
- Creating the Vue Front End
- Taking it Further
- Conclusion
- Chapter 2: Creating Beautiful Charts Using Vue.js Wrappers for Chart.js
- Charts, Charts, Charts
- Scaffolding the Project with Vue CLI
- Making Charts with vue-chartjs
- Making Charts with vue-charts
- Making Charts with vue-chartkick
- Comparisons
- Conclusion
- Chapter 3: Build a Real-time Chat App with Pusher and Vue.js
- Prerequisites
- About the Project
- Setting up a ChatKit Instance
- Scaffolding the Vue.js Project
- Building the UI Interface
- Password-less Authentication
- Subscribing to a Room
- Changing Rooms
- Reconnecting the User After a Page Refresh
- Sending Messages, Detecting User Typing and Logging Out
- Summary
- Chapter 4: Building a Vue Front End for a Headless CMS
- Prerequisites
- About the Project
- Create GraphCMS Project Database
- GraphQL Data Migration
- Building the Blog's Front End Using Vue.js
- Pulling in Data From GraphCMS
- Displaying the Data in a Template
- Displaying an Individual Post
- Summary
- Chapter 5: How to Build a Chrome Extension with Vue
- The Basics of a Chrome Extension
- Overriding Chrome's New Tab Page
- Adding Vue to the Extension
- Using a Vue Component for the New Tab Page
- Fetching and Displaying Jokes
- Persisting Jokes to Chrome's Storage
- Adding Some Polish to the Extension
- Uploading the Extension to the Chrome Web Store
- Conclusion
- Chapter 6: Build Your Own Link-sharing Site with Nuxt.js and vue-kindergarten
- Installing Nuxt.js
- Layout and Styling
- Faking the Back End
- Authentication
- Adding New Posts
- Fetching and Displaying Posts
- The NewsItem Component
- Handling Comments
- Upvoting Posts
- Authorization
- Summary
- Chapter 7: An Introduction to Data Visualization with Vue and D3.js
- What is D3?
- What We'll Be Building
- Prerequisites
- New Vue Project
- Building the Search Interface
- Drawing a Bar Chart Using D3
- Some Final UI/UX Touches
- Conclusion
- Chapter 8: How to Build a Reusable Component with Vue
- But Why a Modal?
- What To Consider Before Building Our Component
- Building the Modal Component
- Creating an Authentication Modal
- Making Our Modal Reusable with Slots
- Single-file Components
- Conclusion
- Chapter 9: How to Build a Game with Vue.js
- Why Vue Instead of a Real Game Development Framework
- Planning the Game
- Getting Started
- Preparing the Project Files and Components
- Building the Game Components
- Conclusion
- Chapter 10: Build a Shopping List App with Vue, Vuex and Bootstrap Vue
- Prerequisites
- Create a New Project
- Basic Project Setup
- Building the To-do List
- Taking it Further
- Summary
- Chapter 11: How to Develop and Test Vue Components with Storybook
- What Is Storybook?
- Getting Started
- Writing Stories
- Installing and Using Add-ons
- Testing Components
- Exporting Storybook as a Static App
- Conclusion
- Book 3: 11 Practical Vue.js Projects
- Chapter 1: Setting Up a Vue Development Environment
- Installing and Setting Up Your Editor
- An Example Project with Vue CLI
- Vue Browser Tools
- Conclusion
- Chapter 2: Five Top Vue Animation Libraries
- Why Animation on the Web?
- Vue.js Transition and Animation Systems
- #1 Animate.css
- #2 Animatelo.js
- #3 Pose.js
- #4 GreenSock (GSAP)
- #5 Anime.js
- Conclusion
- Chapter 3: Build Your First Static Site with VuePress
- What Is VuePress?
- The Benefits of a Static Site.
- Why Use VuePress?
- Getting Started
- Building Your Site
- Internationalize Your Site
- Deploy Your Site to GitHub Pages
- Conclusion
- Chapter 4: Five Vue UI Libraries for Your Next Project
- 1. Ant Design for Vue
- 2. Element UI
- 3. Vue Material
- 4. iView
- 5. Mint-UI
- The Bottom Line
- Chapter 5: Five Handy Tips when Starting Out with Vue
- Incremental Adoption
- Devtools
- Wrapping Up
