Author: Francies Sunny

One of the standout features introduced in Vue 3 is <teleport>, which allows you to render a component or element outside of its parent DOM hierarchy. This is especially useful for modals, tooltips, dropdowns, or overlays that need to break out of container boundaries. How to Use <teleport> <template> <div class=”app-container”> <button @click=”showModal = true”>Open… Continue reading Teleport in Vue 3: Moving Components Anywhere in the DOM

Toggle buttons are a common UI element used to switch between two states, like on/off, active/inactive, or enabled/disabled. In this article, we’ll create a modern, functional toggle button using Vue 3’s Composition API with clean, reusable code. Step 1: Setting Up the ToggleButton Component <template>   <button     :class=”[‘toggle-button’, { active: isActive }]”  … Continue reading Building a Toggle Button in Vue 3 (Composition API)

Slots provide a powerful way to compose components and inject content. Default Slots Pass unnamed content into a child component: <template> <Card> <p>This is a default slot</p> </Card> </template> <!– Card.vue –> <template> <div class=”card”> <slot /> </div> </template> Named Slots Pass content into specific slots: <template> <Card> <template #header> <h1>Header Content</h1> </template> <p>Main Content</p>… Continue reading Handling Slots in Vue 3

Dynamic components allow switching between components at runtime using the <component> element. Example: Switching Components Dynamically <template> <div> <button @click=”currentView = ‘ComponentA'”>Show A</button> <button @click=”currentView = ‘ComponentB'”>Show B</button> <component :is=”currentView” /> </div> </template> <script> import ComponentA from ‘./ComponentA.vue’; import ComponentB from ‘./ComponentB.vue’; export default { data() { return { currentView: ‘ComponentA’ }; }, components: {… Continue reading Dynamic Component Rendering in Vue 3

Reusable components improve maintainability and consistency in your application. Creating a Reusable Component A reusable button component: <template> <button :class=”buttonClass” @click=”$emit(‘click’)”> <slot>Default Text</slot> </button> </template> <script> export default { props: { type: { type: String, default: ‘primary’ }, }, computed: { buttonClass() { return `btn-${this.type}`; }, }, }; </script> Using the Reusable Component <MyButton type=”secondary”… Continue reading Building Reusable Components in Vue 3

The Composition API introduces a flexible approach to writing Vue components. setup() Function The setup() function is the entry point for Composition API logic, executed before the component is created: <script> import { ref } from ‘vue’; export default { setup() { const message = ref(‘Hello, Vue 3!’); return { message }; }, }; </script>… Continue reading Introduction to Vue 3 Composition API: Setup, Reactive State Management, and Lifecycle Hooks

Communication between parent and child components is essential in Vue 3. Props are used to pass data from parent to child, while events are emitted by the child to notify the parent about actions. Using Props Props are defined in the child component and passed from the parent: <!– Parent.vue –> <ChildComponent :message=”parentMessage” /> <script>… Continue reading Using Props and Emitting Events: A Guide to Parent-Child Communication in Vue 3 Components