Building a Vue Admin Dashboard with TypeScript and Element UI

The foundation of this application relies on a centralized layout structure located within the src/layout directory. This pattern organizes the shell of the application separately from the core business logic, allowing for a modular design. The recommended directory structure for the layout module is as follows: src/ └── layout/ ├── compone ...

Posted on Thu, 18 Jun 2026 18:07:19 +0000 by neofox

Implementing Resumable File Uploads with Axios

Installation First, add Axios to your project using npm: npm install axios Core Implementation The following example demonstrates a complete resumable upload system with all essential features: import axios from 'axios'; // Create a cancellation token source const CancelToken = axios.CancelToken; let cancelSource = null; // Initialize chunk ...

Posted on Tue, 16 Jun 2026 17:45:32 +0000 by misterfine

Mobile Web Setup and Vue.js Dynamic Route & Vuex State Hydration

Configuring the Mobile Viewport When developing web applications for mobile devices, it is crucial to prevent unintended user scaling to maintain a consistent UI. This is achieved by configuring the viewport meta tag in the HTML head. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maxi ...

Posted on Sun, 07 Jun 2026 17:57:53 +0000 by Vinsanity

Configuring Axios Base URL and Request Headers in Vue.js

Creating an HTTP Configuration Module First, create an http.js file to store the server configuration and request interceptors. import axios from "axios"; const apiInstance = axios.create({ baseURL: 'https://your-api-domain.com', timeout: 15000 }); apiInstance.interceptors.request.use((config) => { const storedToken = ...

Posted on Thu, 04 Jun 2026 18:35:14 +0000 by henryhund

Reactive Side-Effects with Vue 3 Watchers

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 ...

Posted on Wed, 03 Jun 2026 17:54:37 +0000 by pingu

Implementing Excel File Downloads in JavaScript

Handling file downloads in web applications—specifically exporting Excel files—requires careful management of binary data. Below are the primary technical approaches to triggering these downloads in a frontend environment. 1. Handling Blob Data via Axios When interacting with APIs that return binary data, the most robust approach involvse setti ...

Posted on Wed, 03 Jun 2026 16:39:36 +0000 by hours12

Using Reverse Proxy to Handle CORS Issues

Setting Up a Vue CLI 3 Project with Axios Create a new Vue project and install Axios: vue create test cd test npm install axios npm serve Adding a Page with a API Request Add a button to trigger a GET request to https://www.baidu.com/home/xman/data/tipspluslist: <template> <div class="hello"> <h1 @click="fet ...

Posted on Tue, 02 Jun 2026 16:57:55 +0000 by Birch

Integrating Django, Vue, Axios, CORS, and Global Settings in a Full-Stack Project

Backend Setup with Django Internationalization & Timezone # d_prj/settings.py LANGUAGE_CODE = 'zh-hans' TIME_ZONE = 'Asia/Shanghai' USE_TZ = False Frontend HTTP Client: Axios Installation & Global Registration # v-proj/src/main.js import axios from 'axios' Vue.prototype.$http = axios Sample GET Request inapting to Vue Lifecycle // v-p ...

Posted on Fri, 22 May 2026 22:54:09 +0000 by andycastle

Canceling Axios Requests with AbortController

Initializing the Abort Controller To enable request cancellation in Axios, you first need to create an instance of the AbortController. This controller generates a signal object, wich you then pass to the Axios request configuration. This signal acts as a communication channel between your code and the in-flight request. Here's how you can conf ...

Posted on Sat, 16 May 2026 02:06:15 +0000 by daniel_mintz

Managing Session Persistence Using Dual JWT Tokens in Vue and SpringBoot

Architecture Overview To enhance session security and manage user persistence, the architecture employs a pair of JSON Web Tokens (JWT). An access_token handles immediate API requests with a short lifespan (e.g., 30 minutes), while a refresh_token maintains longer-term validity (e.g., 60 minutes) to extend sessions without re-authentication. Wh ...

Posted on Thu, 14 May 2026 22:05:39 +0000 by eekeek