Author: Anis KCHAOU

In Vue 3 (especially when using the Composition API), fetching data cleanly and reactively is simple once you understand the pattern.Let’s go through it step-by-step using both fetch() and axios. 🌐 1. Where to Fetch Data? Usually, you’ll fetch data inside the onMounted() lifecycle hook — this ensures: The component is mounted in the…

Slots let you pass content (HTML, text, or components) from a parent into a child component, so you can create highly reusable, flexible UI components. Let’s break them down step-by-step:→ Default Slots→ Named Slots→ Scoped Slots 🧩 1. What Is a Slot? A slot is a placeholder inside a component’s template where the parent…

🧩 1. What Is a Component? A component in Vue is a reusable building block that encapsulates: HTML (template) CSS (style) JavaScript logic (script) Each Vue app is built by nesting components together like LEGO pieces. 🟢 2. Creating a Basic Component ✅ Example: HelloWorld.vue <template> <h2>Hello, {{ name }}!</h2> </template> <script setup> const…

🧩 1. What is setup()? 🧠 Concept: The setup() function is the entry point for using the Composition API inside a Vue component.It runs before the component is created — and is used to define: Reactive state (ref, reactive) Computed properties Methods Watchers Lifecycle hooks (onMounted, etc.) Whatever you return from setup() becomes available…

⚙️ 1. What Are Methods? In Vue, methods are regular JavaScript functions you define inside the component.They are used for logic, event handling, and manipulating data — but unlike computed properties, they do not cache results. ✅ Example: Basic Methods <template> <div> <p>Count: {{ count }}</p> <button @click="increment">+</button> <button @click="decrement">−</button> </div> </template> <script setup>…

🧠 1. Computed Properties 📘 What they are Computed properties are reactive values that depend on other reactive data.They are cached and automatically re-run only when their dependencies change. ✅ Example: Basic Computed Property <template> <div> <input v-model="firstName" placeholder="First name"> <input v-model="lastName" placeholder="Last name"> <p>Full name: {{ fullName }}</p> </div> </template> <script setup> import…

🧩 1. Interpolation ({{ }}) Interpolation lets you insert dynamic data into your HTML templates. ✅ Example: <template> <h1>Hello, {{ name }}!</h1> </template> <script setup> const name = 'Vue Learner' </script> <template> <h1>Hello, {{ name }}!</h1> </template> <script setup> const name = 'Vue Learner' </script> 🧠 Output: Hello, Vue Learner! Hello, Vue Learner! You…

WebSockets is a communication protocol that enables full-duplex, persistent connections between a client (like a web browser) and a server over a single TCP connection. Here’s a breakdown: Traditional HTTP is request-response based: the client sends a request, and the server responds, then the connection usually closes. WebSockets, on the other hand, keep the…