Takeaway:
Get your feet wet with some of the new Vue 3 features while building a fully functional checkbox component. We’ll be using Font Awesome to replace the default html checkbox and Tailwind CSS to handle styling.
Code Sandbox:
To make it easy to code-along, I’ve put together a couple code sandboxes.
- Starting Point 👈 Fork this one to code along
- Final State 👈 tl;dr
Lets get started
In the Starting Point sandbox we’ve got a basic checkbox input set up in ./components/checkbox.vue
<template>
<input type="checkbox" :id="fieldId" class="mr-2" /> <label
:for="fieldId"
class="flex flex-row items-center font-bold cursor-pointer"
>
{{ label }}
</label>
</template><script> export default {…
A step by step guide revealing the complexities that arise without state management.
Overview
This article provides a primer for state management in relation to Vue applications. We will walk through implementing a basic shopping cart example without global state management; this should reveal where the complexities lie that would hinder long-term maintainability. We will cover the anatomy of Vuex and implement a basic setup. Finally we will refactor our shopping cart implementation to utilize Vuex.
Resources and Setup
Vue.js Devtools Chrome Extension
If you haven’t already, be sure to download the Vue.js devtools chrome extension. It provides necessary visibility into any Vue project; today we’ll use it to watch our events and vuex state.
Github Repo
https://github.com/KevinBigelow/state-mgmt-w-vuex/tree/startingPoint
Clone or download the startingPoint…
Kevin Bigelow
Frontend Dev at Neutron Interactive
