Freaks City

Frontend Pagination In this approach, the backend delievrs all data to the frontend, and pagination is handled client-side. <template> <div class="flex items-center justify-center mt-5"> <el-pagination background v-model:current-page="currentPage" v-model:page-size="pageSize&quot ...

Overview Environment: Vue 3 + Vite + Ant Design Vue + Vue Router Complete Global Registration Install Ant Design Vue npm install ant-design-vue@next --save Register in main.ts import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' import router from '@/router' import Antd from 'ant-design-vue'; impo ...

Core Renderer Responsibilities A renderer bridges virtual DOM (vDOM) nodes and platform-specific UI elements, integrating with reactivity systems to trigger targeted updates only when state changes. Its primary focus is minimizing DOM operations by pinpointing and acting on exact differences between previous and current vDOM trees. Terminology ...

This component provides a flexible way to embed interactive maps within a Vue 3 application, supporting various map providers like Tianditu, Baidu Maps, Tencent Maps, and Amap. It includes geocoding functionality to find coordinates from addresses and supports marker dragging for point selection. The component can be integrated into your Vue pr ...

Leveraging the VueUse Fullscreen Composable The @vueuse/core ecosystem provides a suite of composition utilities that streamline browser API interactions. Among these, useFullscreen wraps the native Fullscreen API to offer reactive state management for viewport expansion and restoration. Package Installation Integrate the dependency into your p ...

The icon system changed significantly between Element UI and Element Plus, with the latter adopting SVG icons. If you are accustomed to the Element UI aproach but prefer working with Vue 3, you can wrap Element Plus icons into a custom component that replicates the simpler interface of the older library. Design Goals The custom <e-icon> c ...

Data Flow from Parent to Child Using Props Passing Static Values When passing fixed string literals to a child component, the v-bind directive (shorthand :) is not required. <DashboardWidget app-name="Analytics Hub" current-release="2.4" /> Inside the child component, declare the expected properties using definePr ...

Implementation Frontend: Vue Component A reusable file upload component that converts selected images to base64 format and sends them to the backend. <template> <el-avatar :size="80" :src="avatarSrc" @click="showDialog = true" style="cursor: pointer;" > <img src= ...

Vue 3’s watch API lets you run arbitrary code whenever a reactive value changes. Its the reactive system’s hook for side-effects—loggging, validation, network requests, or synchronizing related state. Listening to a single ref <template> <p>Counter: {{ count }}</p> <button @click="count++">Increment</but ...

Introduction In many projects, there's a need to import and export Excel data in batches. This functionality can either be handled on the frontend by parsing data and generating files directly in the browser, or through backend services that process file streams and generate downloadable files. Compared to server-side processing, frontend handl ...