In many user interfaces, especially with grouped or hierarchical selections (like categories, projects, folders), you need more than just a checked or unchecked checkbox. For example: What if only some items in a group are selected? Should the parent checkbox show checked, unchecked… or something else? That’s where the indeterminate state comes in. What is… Continue reading How to Show “Partially Selected” Checkboxes in Vue (Using indeterminate)
Tag: vue3
Vue 3 and TypeScript: Advanced Patterns
Integrating TypeScript with Vue 3 can greatly improve the maintainability and robustness of your applications. Using advanced patterns like type-safe components and generics can make your code more predictable and error-resistant. Setting Up Type-Safe Components To make your Vue components type-safe, define the props with TypeScript interfaces. Example: <script lang=”ts” setup> import { defineProps }… Continue reading Vue 3 and TypeScript: Advanced Patterns
Vue Local Storage Binding (Reactive)
<script setup> import { useLocalStorage } from ‘@vueuse/core’ const name = useLocalStorage(‘username’, ‘Guest’) </script> <template> <input v-model=”name” /> </template>
Vue Dark Mode Toggle
<script setup> import { useDark, useToggle } from ‘@vueuse/core’ const isDark = useDark() const toggleDark = useToggle(isDark) </script> <template> <button @click=”toggleDark()”>Toggle Dark Mode</button> </template>
VueUse
VueUse is a collection of essential utility functions (a.k.a. composables) built on top of the Vue 3 Composition API. Think of it as a Vue-native version of lodash, React Hooks, and browser API helpers combined. It helps you write less code, stay reactive, and boost productivity by handling common patterns in a modular way. 📦… Continue reading VueUse
Vue Query
Hooks for fetching, caching and updating asynchronous data in Vue. Install vue-query npm install vue-query # or yarn add vue-query If you are using Vue 2.x, make sure to also setup @vue/composition-api Initialize Vue Query via VueQueryPlugin import { createApp } from “vue”; import { VueQueryPlugin } from “vue-query”; import App from “./App.vue”; createApp(App).use(VueQueryPlugin).mount(“#app”); Use query import { defineComponent }… Continue reading Vue Query
Optimizing Performance with Vue 3 Suspense and Async Components
Vue 3’s Suspense and async components provide a way to handle asynchronous data fetching while keeping the UI responsive. What is Suspense? Suspense is a component that displays a fallback while waiting for async data. <template> <Suspense> <template #default> <AsyncComponent /> </template> <template #fallback> <p>Loading…</p> </template> </Suspense> </template> Using Async Components You can dynamically load… Continue reading Optimizing Performance with Vue 3 Suspense and Async Components
VueUse – Utility Functions
Description: VueUse is a collection of useful utility functions that help with state management, browser APIs, and performance optimizations. Installation: npm install @vueuse/core Example: Dark Mode Toggle import { useDark } from ‘@vueuse/core’ const isDark = useDark() <template> <button @click=”isDark = !isDark”>Toggle Dark Mode</button> </template>
Vue Draggable
Vue component (Vue.js 2.0) or directive (Vue.js 1.0) allowing drag-and-drop and synchronization with view model array. Based on and offering all features of Sortable.js Description: Makes elements draggable and reorderable with Vue.js. Installation: npm install vuedraggable Example Usage <script setup> import { ref } from ‘vue’ import draggable from ‘vuedraggable’ const items = ref([‘Item 1’, ‘Item… Continue reading Vue Draggable
Vue Chart.js – Data Visualization
vue-chartjs is a wrapper for Chart.js in Vue. You can easily create reuseable Install this library with peer dependencies: pnpm add vue-chartjs chart.js # or yarn add vue-chartjs chart.js # or npm i vue-chartjs chart.js Then, import and use individual components: <template> <Bar :data=”data” :options=”options” /> </template> <script lang=”ts”> import { Chart as ChartJS, Title,… Continue reading Vue Chart.js – Data Visualization