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