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.

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store