Vue.js: 11 Practical Projects
Published on 6. June 2019
363 pages
978-1-4920-7136-5 (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 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
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
- 11 Practical Vue.js Projects
- Notice of Rights
- Notice of Liability
- Trademark Notice
- About SitePoint
- Preface
- Who Should Read This Book?
- Conventions Used
- 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
