1. Project Creation Vue 2 (using Vue CLI): vue create my-app cd my-app npm run serve Vue 3 (using create‑vue): npm create vue@latest cd my-app npm run dev During initialisation you are prompted to add TypeScript, Router, Pinia, testing tools, and linter formatters. 2. Component Template Vue 2 – Opti...
Setup Function and Basic Reactivity The setup() function serves as the entry point for Vue 3's Composition API, executing before component creation. <template> <div>Composition API: {{ message }}</div> <div>Options API: {{ legacyMessage }}</div> <div> Array iterat...
Project Setup Create a new Vue 3 project using Vite: npm init vite@latest my-project # Choose Vue template cd my-project npm install npm install sass Creating SCSS Variables Create a file named src/styles/theme.module.scss: $primary-color: #ff461f; $secondary-color: #065279; :export { primary: $prim...
Vue3 introduces two fundamental reactivity APIs: ref and reactive. These tools enable developers to create responsive data structures efficiently. 1. Core Concepts 1.1 Ref API ref creates a reactive reference to a primitive value: import { ref } from 'vue'; const counter = ref(0); console.log(counte...
pnpm Overview & Installation pnpm is a fast, efficient package manager similar to npm and Yarn, with key advantages: Blazing-fast package installation Optimized disk space utilization Install via npm: npm install -g pnpm Common command equivalences between npm and pnpm: npm Command pnpm Equivale...
Frontend Framework Architecture & Vue 3 Motivations Modern frontend frameworks like Vue emphasize simplicity and a data-driven approach. By reducing direct DOM manipulation, frameworks leverage reactivity systems, declarative rendering, and virtual DOM diffing to efficiently synchronize the UI w...
Parent-to-Child Communication URL Parameter Passing For small data payloads, embed parameters direct in the web-view URL. Parent Component (Vue 3) <template> <web-view src="/static/webpage.html?payload=demo"></web-view> </template> JavaScript Bridge Method Use Uni-a...
API Reference Props Property Descripiton Type Default icon Custom icon VNode | Slot undefined desrciption Text description string | Slot undefined tooltip Tooltip content string | Slot undefined tooltipProps Tooltip configuration object {} type Button style variant 'default' | 'primary' 'default' sh...
The TablePage component for Vue3 offers several configuration options beyond basic table setup. These properties allow customization of title display, data fetching behavior, and loading states to suit various application requirements. Title Configuration By default, the component retrieves the titl...