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 …

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 …

Vue.js comes with a solid templating engine. It allows you to use JavaScript expressions in conditionals and loops. That way you can typically calculate everything you need to run complex application code. This tutorial goes in tandem with our previous tutorial on how to reverse array items in v-for …

Vue.js provides a solid and feature-rich templating engine. You can use conditionals and loops with JavaScript expressions. You can work with arrays in Vue.js as you would in any other JavaScript code. And JavaScript provides an Array#reverse method that you can use to turn over the item …

Vue.js 3 provides a handy createApp function allowing you to fluently create and mount a single page application. We’re currently working on a project that mainly uses native JavaScript and we’re adding Vue.js programmatically when creating and interacting with a complex modal. Using Vue.js for …