All News Jobs Education Computer Science Python Golang Backend DevOps Vue JavaScript Security Rust

Vue Articles

Keyup and Keydown Event Handlers in Vue 3
Sep 04, 2022 by Lane Wagner
I recently spent far too long fighting with Vue’s keyup and keydown functionality while building Boot.dev’s front-end. I wanted to handle ctrl+period keyboard events and it took me forever to find the part of the documentation that addressed my use case. Hopefully, this guide can save you some time!
Migrating From Vue-CLI & Webpack to Vitejs
Apr 26, 2021 by Lane Wagner
Boot.dev’s web app that hosts all of my coding courses is a single-page application written in Vue 2, with plans to migrate to Vue 3 soon™©®. In the meantime, I happened across a cool new tooling app called Vite that promised a few things that caught my attention.
How to Create a Custom Checkbox Form in Vue
Nov 25, 2020 by Lane Wagner
You have a problem. The browser’s default checkbox form is ugly and outdated, but importing an entire library just to change the styling seems like overkill. Instead, let’s build a custom checkbox form component from scratch. It will take 15 minutes to type up, or just 3 if you just copy and paste my boilerplate code.
How to Make a Custom Slider Component in Vue
Nov 24, 2020 by Lane Wagner
Creating a custom slider component can be tricky, especially if you want to create a lean standalone Vue component. In this quick article, you’ll learn how to build a fully customizable slider component in Vue. Feel free to swap out the majority of the CSS to get the styling you want, but I’ll give you a good jumping-off point.
How to Make a Simple Vue Custom Select Component
Sep 25, 2020 by Lane Wagner
Creating a custom select tag with its own styling is notoriously difficult. Sometimes it’s impossible to build from scratch without a combination of styled divs and custom JavaScript. In this article, you’ll learn how to create a custom select component in Vue that can be easily styled with your own CSS. In fact, it’s the same component we use in production on boot.dev, and you can see it in action on our JavaScript playground.
Creating a Custom Tooltip Component in Vue
Aug 28, 2020 by Lane Wagner
There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time. For that reason, we’re going to build a custom single file tooltip component that you can build yourself and tweak to your heart’s content. It might take 15 minutes instead of 3… sorry about that.
How to Create a Custom Toggle Switch Component in Vue.js
Jul 21, 2020 by Lane Wagner
Custom toggle switches are a pain to code from scratch. So many lines for such a simple UI widget! In this quick tutorial, we will learn how to build a fully encapsulated toggle switch component in Vue.js. The component we’re building is used currently on boot.dev’s login page. Go take a look to see a live demo.
Vue History Mode - Support Legacy Hash URLs
Jul 15, 2020 by Lane Wagner
When we first launched the boot.dev’s single-page-app, we were using Vue Router’s default hash routing. Hash routing looks ugly to the end-user, and when you want to be able to share parts of your app via direct link those hashes can get really annoying.
How to Rerender a Vue Route When Path Parameters Change
Jul 07, 2020 by Lane Wagner
In single-page apps that use the Vue Router, it’s common to create a path parameter that changes the behavior of a route. Often a problem occurs however when a user alters the path manually in the address bar. Manually changing the URL does not rerender the view! This can cause unexpected behavior because mounted() hooks don’t fire and nested components don’t reload.
Simple Setup - Vue Linting in VS Code
Jun 17, 2020 by Lane Wagner
I’m a gopher by nature, so I expect consistent styling and linting in my codebases. More importantly, I don’t like to think about styling. I like to type haphazardly and then have my editor apply styles automatically on save (ctrl+s, cmd+s). If you are the same way, hopefully, this will help you in your next Vue.js project.

Vue Articles

Keyup and Keydown Event Handlers in Vue 3

Migrating From Vue-CLI & Webpack to Vitejs

How to Create a Custom Checkbox Form in Vue

How to Make a Custom Slider Component in Vue

How to Make a Simple Vue Custom Select Component

Creating a Custom Tooltip Component in Vue

How to Create a Custom Toggle Switch Component in Vue.js

Vue History Mode - Support Legacy Hash URLs

How to Rerender a Vue Route When Path Parameters Change

Simple Setup - Vue Linting in VS Code