Vue.js logo
Vue.js logo

I recently had the need to update the state of a component any time its contents (slot, children, etc.) changed. For context, it’s a form component that tracks the validity state of its inputs.

I thought it would be more straight forward than it was, and I didn’t find a whole lot of content out there. So having a solution I’m satisfied with, I decided to share. Let’s build it out together :)

The following code snippets are written in the Options API format but should work with Vue.js version 2 and version 3 except where specified.

The Setup

Let’s start with…


There’s no denying that TypeScript has taken hold in the JavaScript community. And there’s no wonder when it offers features like improved Intellisense, static analysis (aka “type-checking”), and inline documentation.

These features are not unique to TypeScript. They’re part of any strongly-typed language, and they translate to improvements in productivity and code quality such as:

  • Write code faster with autocomplete code suggestions as you type.
  • Warns you if you have a typo or error in your code.
  • Easier to introduce new people into the codebase.
  • Better collaboration for team members across code they did not write.
  • Can prevent broken code…


This is the last article in a series covering all the various aspects of creating forms for the web. Each article can be read independently, but I wrote them in the order that makes the most sense. If you have not read the others, I would encourage you to take a look.

This final article in the series is arguably the most important. It covers security. While the other articles were mainly focused on the frontend, security goes beyond that. We have to consider the current user, other users, and our own security. …


If you’ve done any work with Vue.js and SASS (or SCSS from here on), you may have run into this a very common issue. You have SCSS variables in one file that you want to make available to your Vue components.

The good news is that the Vue CLI makes it incredibly easy to support writing SCSS, and with Vue’s single file components you can simply add lang="scss" to the <style> block ( docs).

The bad news is in order to use your sweet Sassy variables (or mixins and functions), you have to manually @import them into each component's style…


mobile application illustration
mobile application illustration

As you build out forms for the web, getting the semantics, accessibility, and styling right is a lot of work. If you can get all those right, you’re doing quite well for yourself. However, there are still some thing we can do to make life better for the folks filling out our forms.

In this article, we’ll look at some of the do’s and don’ts about HTML form user experience (UX). And if you are looking for a refresher on the previous steps mentioned above, take a look at the other articles in this series.


I’ve written a couple of articles now on how to write HTML forms for the modern web. The previous articles focused on semantics and accessibility, which are the foundation for any good form. If you’re interested in the overview of the entire series, here’s what it looks like:

This will be part 3, and it’s probably the article I’m most excited for. We’re going to look at some common form design patterns, some of the gotchas, and how to approach them with CSS…


I’m very happy to announce the latest minor version to Vuetensils. And without going any further, I should point out that I think this is going to be the last stop before a stable version 1 🎉🎉🎉

This release includes some nice new UI components, some components for better accessibility, some features for better development, and some new community updates. Let’s take a look.

VDate


As you build out Vue.js applications and they begin to reach a certain size, you will likely run into the need for global state management. Conveniently, the core development team provides Vuex, the de facto state management library for Vue.js applications.

Getting started is pretty simple, and I’m going to assume you already are familiar with implementing Vuex. This post is not about getting started after all. If you need that, then I would recommend checking out the documentation.

Vuex makes managing a global data store much simpler, and for the following examples, let’s assume we have a store that…


Forms are arguably the most important parts of any web application. Without forms, we would not have sites like Google, Facebook, Amazon, Reddit, etc. However, the more I browse the web, the more I see poor implementations of forms.

In this series, we will examine the proper steps to creating forms for the web, how to think about the code we write, and considerations to make along the way. The series is broken up into the following parts:

  • Part 1: Semantics
  • Part 2: Accessibility
  • Part 3: Custom Styles
  • Part 4: User Experience
  • Part 5: Security

Semantics

In the previous section, we…


Forms are arguably the most important parts of any web application. Without forms, we would not have sites like Google, Facebook, Amazon, Reddit, etc. However, the more I browse the web, the more I see poor implementations of forms.

In this series, we will examine the proper steps to creating forms for the web, how to think about the code we write, and considerations to make along the way. The series is broken up into the following parts:

  • Part 1: Semantics
  • Part 2: Accessibility
  • Part 3: Custom Styles
  • Part 4: User Experience
  • Part 5: Security

Starting with proper semantics makes…

Austin Gil

Full Stack @Revealbio | Author of Vuetensils & Particles CSS | Panelist @ViewsOnVue | Board Member @sandiegojs

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