Master Vue props binding with this in-depth guide! Learn how to correctly pass strings, numbers, booleans, objects, arrays, and functions as props. Avoid common mistakes, understand prop types, and follow best practices to write clean, efficient, and error-free Vue components.

A comprehensive guide for React developers transitioning to Vue. Learn the differences in components, styling, state management, lifecycle hooks, and more. Master Vue concepts quickly with React comparisons. We will dive into Vue's unique features, like the ref and reactive functions, v-if directives, and computed properties, make it a powerful alternative to React. Whether you're a React developer exploring Vue or simply curious about its differences, this guide provides practical examples and insights to get you started.

This blog post dives into the Container/Presentational Pattern, demonstrating how to create cleaner, more modular, and reusable code with React Hooks and Vue 3 Composables. Explore how to modernise this classic frontend pattern by transitioning from traditional implementations to scalable, maintainable solutions. Perfect for developers looking to streamline logic, enhance maintainability, and build better React and Vue applications.

Learn how to create a reactive system in JavaScript using Proxy, step-by-step, from monitoring changes to implementing a Vue.js-inspired ref function. This guide covers everything from simple examples to advanced TypeScript integration, culminating in a practical demo of two-way HTML bindings. Perfect for developers exploring reactivity concepts and building modern web apps.

If you've used Vue or Nuxt, you're likely familiar with the "v-html" directive. This is used to dynamically insert HTML content into an element. It takes a string value containing HTML tags and text, replacing the inner HTML of the target element with this content. One limitation of "v-html" is that it does not allow you to render "<nuxt-link>". Instead, all "<a>" HTML tags do not use the native Vue router. However, we can address this limitation by writing our own directive. This will allow all "<a>" tags to be converted into "<nuxt-link>". Thanks to Nuxt and its plugin system, we can easily expand the functionality of Nuxt. Let's get started.

If you're familiar with Nuxt.js, you might know that the latest version, Nuxt version 3, runs on a new server engine called Nitro. Nitro isn't just used in Nuxt, it's also an independent open-source framework for developing web server applications. It provides several built-in features that make it a modern, user-friendly backend framework. Nitro is open-source and maintained by the same core team as Nuxt.js. In this blog post, we'll show you how to build a simple web server using Nitro and connect it to an SQLite database. We'll also explain the process of database migration with TypeORM, a popular typescript library, introduce the widely-used pattern for validating request data, the Data Transfer Object (DTO), and utilise some of Nitro's built-in features to cache results.

In this blog article, we have demonstrated how to define multiple components in a single .vue file in Nuxt using JSX. By using JSX, we can combine regular Vue components and JSX components in the same file, thus utilising the same reactivity system provided by Vue. While it is generally recommended to separate components into individual files, there are situations where declaring small components in the same file can be beneficial. We hope you found this blog article useful. Please subscribe for more articles like this in the future.

The idea for this experimental project, which I am going to demonstrate in this blog article, came to me from the Office Works website. Here's how it all happened. As a hobbyist landscape photographer, I have accumulated hundreds of images over the years. Recently, I decided to print these photos in a 10x12" photo book. I immediately checked the Office Works website to see if they offer such a service, and I was in luck. Office Works has an incredible platform that allows customers to easily create photo books using their online editor. While I was able to accomplish what I wanted, there was one feature that I was missing but would be nice to have the ability to sort all of the images based on their colours. In my case, I uploaded 160 images, and manually sorting all of them was a bit tedious.

I had an idea to create an image-to-text automation tool for writing descriptions for my images. As a hobby landscape photographer, I have a lot of images, and this tool would speed up my workflow when posting on Instagram. I thought, "Well, I am a software developer. I can develop something like that very quickly, right?" I only need to add my credit card details to OpenAI, and then I can start using their API. This sounds simple enough. Well, let's discuss how it all went. Imagine attaching an image and then starting a conversation with an AI assistant about the description you need help writing for that image. It would look something like this.

If you're a JavaScript developer, you may have heard about the buzz around signals lately. Several popular JavaScript frameworks, such as Vue, Preact, Solid, Angular, and Quick, have recently implemented and supported the use of signals. But what exactly are signals? As web applications become more complex, managing the state of JavaScript applications becomes a challenge. This is where signals can be a valuable tool, allowing the application to respond to changes in the state, such as a variable change. In this article, we will explore the concept of signals and how they can be used in Vanilla JavaScript applications. We will use the Vue and Preact reactivity libraries and see how easy and similar these two approaches are to implement. For the demo project, we will use Vite. So let's get started by creating a Vite app.