One of the benefits of using TypeScript is the type system which requires you to provide the correct values between all interactions in your application. For values that can be null or undefined, you may need to handle different code paths, for example by using default values. TypeScript comes with …

Vue 3 introduced the composition API using <script setup> blocks. You can write any JavaScript in there to set up your Vue components. The composition API also introduced some hiccups related to reactive properties. For example, it’s possible to lose reactivity when destructuring reactive objects, like props. …

Vite is a great build tool for your frontend assets. It works nicely with popular frontend frameworks, like Vue.js. When looking for Vue.js tutorials on the Internet you may find code outlining Vue single file components. The imports in the tutorials may start with an @ symbol, like a …

We’re using GitHub Actions to run tests when pushing to a given branch. GitHub Actions are a convenient way for testing because the tests can run on the same platform where the code lives. We also wanted to run the CI pipeline for pull requests. And GitHub Actions come …

Lerna v7 removes the package management commands bootstrap, add, and link. You can find more details on these changes Lerna’s 7.0.0 changelog entry. The Lerna team encourages you to use your package manager’s functionalities to manage project dependencies. All major package managers (NPM, Yarn, PNPM, …) work …

Vue.js comes with the practical v-model directive to create a two-way binding between HTML input fields and a variable’s value. This binding also works when using JavaScript dates and a related input field of type or datetime-local or datetime. This tutorial shows you how to use v-model on …

Vue.js uses the v-model directive on components to create a two-way binding. At first, Vue assigns the value of the model attribute to the component or native HTML element. And second, Vue updates the model value anytime it’s changed, for example, due to a changed text in an …

Vue’s template rendering abstracts most of the DOM operations. And yet you might run into a situation where you need to access a given DOM element. Vue uses “refs” to access DOM elements with the ref attribute on that element. This tutorial shows you how to reference elements in …