book

Vue.js: 11 Practical Projects

by James Hibbard, Yomi Eluwande, Michael Wanyoike, Nilson Jacques, Christopher Vundi, Deji Atoyebi, Ivaylo Gerchev

June 2019

Intermediate to advanced

363 pages

4h 38m

English

SitePoint

Read now

Unlock full access

Notice of RightsNotice of LiabilityTrademark NoticeAbout SitePoint
Who Should Read This Book?Conventions Used
Install the ToolingCreating the Node Back EndCreating the Vue Front EndTaking it FurtherConclusion
Charts, Charts, ChartsScaffolding the Project with Vue CLIMaking Charts with vue-chartjsMaking Charts with vue-chartsMaking Charts with vue-chartkickComparisonsConclusion
PrerequisitesAbout the ProjectSetting up a ChatKit InstanceScaffolding the Vue.js ProjectBuilding the UI InterfacePassword-less AuthenticationSubscribing to a RoomChanging RoomsReconnecting the User After a Page RefreshSending Messages, Detecting User Typing and Logging OutSummary
PrerequisitesAbout the ProjectCreate GraphCMS Project DatabaseGraphQL Data MigrationBuilding the Blog’s Front End Using Vue.jsPulling in Data From GraphCMSDisplaying the Data in a TemplateDisplaying an Individual PostSummary
The Basics of a Chrome ExtensionOverriding Chrome’s New Tab PageAdding Vue to the ExtensionUsing a Vue Component for the New Tab PageFetching and Displaying JokesPersisting Jokes to Chrome’s StorageAdding Some Polish to the ExtensionUploading the Extension to the Chrome Web StoreConclusion
Installing Nuxt.jsLayout and StylingFaking the Back EndAuthenticationAdding New PostsFetching and Displaying PostsThe NewsItem ComponentHandling CommentsUpvoting PostsAuthorizationSummary
What is D3?What We’ll Be BuildingPrerequisitesNew Vue ProjectBuilding the Search InterfaceDrawing a Bar Chart Using D3Some Final UI/UX TouchesConclusion
But Why a Modal?What To Consider Before Building Our ComponentBuilding the Modal ComponentCreating an Authentication ModalMaking Our Modal Reusable with SlotsSingle-file ComponentsConclusion

Why Vue Instead of a Real Game Development FrameworkPlanning the GameGetting StartedPreparing the Project Files and ComponentsBuilding the Game ComponentsConclusion
PrerequisitesCreate a New ProjectBasic Project SetupBuilding the To-do ListTaking it FurtherSummary
What Is Storybook?Getting StartedWriting StoriesInstalling and Using Add-onsTesting ComponentsExporting Storybook as a Static AppConclusion

Overview

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