Vue.js: 11 Practical Projects

Book 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 book contains a selection of 11 practical projects covering different aspects of working with Vue. It contains:

  • Build a Basic CRUD App with Vue.js, Node and MongoDB by James Hibbard
  • Creating Beautiful Charts Using Vue.js Wrappers for Chart.js by Yomi Eluwande
  • Build a Real-time Chat App with Pusher and Vue.js by Michael Wanyoike
  • Building a Vue Front End for a Headless CMS by Michael Wanyoike
  • How to Build a Chrome Extension with Vue by James Hibbard
  • Build Your Own Link-sharing Site with Nuxt.js and vue-kindergarten by Nilson Jacques
  • An Introduction to Data Visualization with Vue and D3.js by Christopher Vundi
  • How to Build a Reusable Component with Vue by Deji Atoyebi
  • How to Build a Game with Vue.js by Ivaylo Gerchev
  • Build a Shopping List App with Vue, Vuex and Bootstrap Vue by Michael Wanyoike
  • How to Develop and Test Vue Components with Storybook by Ivaylo Gerchev

Publisher Resources

View/Submit Errata

Table of Contents

  1. 11 Practical Vue.js Projects
  2. Notice of Rights
  3. Notice of Liability
  4. Trademark Notice
  5. About SitePoint
  6. Preface
    1. Who Should Read This Book?
    2. Conventions Used
  7. Chapter 1: Build a Basic CRUD App with Vue.js, Node and MongoDB
    1. Install the Tooling
    2. Creating the Node Back End
    3. Creating the Vue Front End
    4. Taking it Further
    5. Conclusion
  8. Chapter 2: Creating Beautiful Charts Using Vue.js Wrappers for Chart.js
    1. Charts, Charts, Charts
    2. Scaffolding the Project with Vue CLI
    3. Making Charts with vue-chartjs
    4. Making Charts with vue-charts
    5. Making Charts with vue-chartkick
    6. Comparisons
    7. Conclusion
  9. Chapter 3: Build a Real-time Chat App with Pusher and Vue.js
    1. Prerequisites
    2. About the Project
    3. Setting up a ChatKit Instance
    4. Scaffolding the Vue.js Project
    5. Building the UI Interface
    6. Password-less Authentication
    7. Subscribing to a Room
    8. Changing Rooms
    9. Reconnecting the User After a Page Refresh
    10. Sending Messages, Detecting User Typing and Logging Out
    11. Summary
  10. Chapter 4: Building a Vue Front End for a Headless CMS
    1. Prerequisites
    2. About the Project
    3. Create GraphCMS Project Database
    4. GraphQL Data Migration
    5. Building the Blog’s Front End Using Vue.js
    6. Pulling in Data From GraphCMS
    7. Displaying the Data in a Template
    8. Displaying an Individual Post
    9. Summary
  11. Chapter 5: How to Build a Chrome Extension with Vue
    1. The Basics of a Chrome Extension
    2. Overriding Chrome’s New Tab Page
    3. Adding Vue to the Extension
    4. Using a Vue Component for the New Tab Page
    5. Fetching and Displaying Jokes
    6. Persisting Jokes to Chrome’s Storage
    7. Adding Some Polish to the Extension
    8. Uploading the Extension to the Chrome Web Store
    9. Conclusion
  12. Chapter 6: Build Your Own Link-sharing Site with Nuxt.js and vue-kindergarten
    1. Installing Nuxt.js
    2. Layout and Styling
    3. Faking the Back End
    4. Authentication
    5. Adding New Posts
    6. Fetching and Displaying Posts
    7. The NewsItem Component
    8. Handling Comments
    9. Upvoting Posts
    10. Authorization
    11. Summary
  13. Chapter 7: An Introduction to Data Visualization with Vue and D3.js
    1. What is D3?
    2. What We’ll Be Building
    3. Prerequisites
    4. New Vue Project
    5. Building the Search Interface
    6. Drawing a Bar Chart Using D3
    7. Some Final UI/UX Touches
    8. Conclusion
  14. Chapter 8: How to Build a Reusable Component with Vue
    1. But Why a Modal?
    2. What To Consider Before Building Our Component
    3. Building the Modal Component
    4. Creating an Authentication Modal
    5. Making Our Modal Reusable with Slots
    6. Single-file Components
    7. Conclusion
  15. Chapter 9: How to Build a Game with Vue.js
    1. Why Vue Instead of a Real Game Development Framework
    2. Planning the Game
    3. Getting Started
    4. Preparing the Project Files and Components
    5. Building the Game Components
    6. Conclusion
  16. Chapter 10: Build a Shopping List App with Vue, Vuex and Bootstrap Vue
    1. Prerequisites
    2. Create a New Project
    3. Basic Project Setup
    4. Building the To-do List
    5. Taking it Further
    6. Summary
  17. Chapter 11: How to Develop and Test Vue Components with Storybook
    1. What Is Storybook?
    2. Getting Started
    3. Writing Stories
    4. Installing and Using Add-ons
    5. Testing Components
    6. Exporting Storybook as a Static App
    7. Conclusion

Product Information

  • Title: Vue.js: 11 Practical Projects
  • Author(s): James Hibbard, Yomi Eluwande, Michael Wanyoike, Nilson Jacques, Christopher Vundi, Deji Atoyebi, Ivaylo Gerchev
  • Release date: June 2019
  • Publisher(s): SitePoint
  • ISBN: 9781925836271