Vue.js: 11 Practical Projects

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