Tagged articles

pinia

25 articles · Page 1 of 1

Jun 11, 2026 · Backend Development

Building a Production-Ready SpringBoot + Vue3 Front‑End/Back‑End Separation Architecture

This article presents a step‑by‑step guide to constructing a full‑stack SpringBoot + Vue3 project with production‑grade features such as global exception handling, unified error codes, JWT authentication, multi‑environment configuration, CORS solutions, pagination, Pinia state management, on‑demand UI imports, and Nginx reverse‑proxy deployment.

CORSJWTNGINX

0 likes · 17 min read

Building a Production-Ready SpringBoot + Vue3 Front‑End/Back‑End Separation Architecture

Coder Trainee

Apr 16, 2026 · Backend Development

Building a Tech Blog from Scratch (Part 2): Implementing Login Authentication with Spring Security and JWT

This article walks through creating a complete login authentication system—including registration, login, token refresh, and permission control—by replacing Spring Security's default session handling with JWT, configuring backend filters and utilities, and integrating a Vue 3 + Pinia front‑end with automatic token renewal.

JWTSpring BootSpring Security

0 likes · 19 min read

Building a Tech Blog from Scratch (Part 2): Implementing Login Authentication with Spring Security and JWT

macrozheng

Mar 10, 2026 · Frontend Development

How We Upgraded Mall Admin Web from Vue2 to Vue3 with TypeScript

This article details the comprehensive migration of the mall‑admin‑web front‑end from Vue 2 to Vue 3, including the shift to TypeScript, replacement of Element UI with Element Plus, adoption of Pinia for state management, and updates to chart libraries, with code snippets and demo links.

Frontend UpgradeTypeScriptVue3

0 likes · 6 min read

How We Upgraded Mall Admin Web from Vue2 to Vue3 with TypeScript

Full-Stack Cultivation Path

Sep 16, 2025 · Frontend Development

Pinia + This Plugin: An Unbeatable Combo

Pinia Colada adds a smart data‑fetching layer to Vue's Pinia, eliminating boilerplate for loading, error, retry, caching and optimistic updates, offering a tiny ~2 kB bundle, seamless DevTools integration, SSR support, and a clear advantage over TanStack Query for pure Vue projects.

Data FetchingOptimistic UpdatesPinia Colada

0 likes · 8 min read

Pinia + This Plugin: An Unbeatable Combo

Rare Earth Juejin Tech Community

Aug 30, 2025 · Game Development

How I Built a City‑Building Game with Three.js, Vue, and Pinia

After a two‑month hiatus, the author details the creation of CubeCity—a 17×17 grid city‑building game built with Three.js, Vue, and Pinia—covering metadata design, rendering pipeline, interaction modes, code architecture, and reflections on using Three.js for game development.

Game DevelopmentVueWebGL

0 likes · 26 min read

How I Built a City‑Building Game with Three.js, Vue, and Pinia

Rare Earth Juejin Tech Community

Jul 21, 2025 · Frontend Development

Automate Vue Button Permissions with a Custom Vite Plugin

This article explains how to create a Vite plugin that automatically injects permission checks into Vue button components by generating unique permission codes, handling various UI libraries, and integrating with Pinia or Vuex for seamless front‑end access control.

PermissionPluginVite

0 likes · 11 min read

Automate Vue Button Permissions with a Custom Vite Plugin

IT Services Circle

May 17, 2025 · Frontend Development

Essential Vue3 Ecosystem Tools and Their Installation Guides

This article introduces a curated collection of Vue 3 ecosystem tools—including create‑vue, TypeScript support, vue‑router, Pinia, Vite, VueUse, ESLint/Prettier, UnoCSS, UI component libraries, debugging plugins, uni‑app, electron integration, VitePress, and Nuxt—providing concise descriptions and npm installation commands to help developers quickly set up modern front‑end projects.

NuxtTypeScriptVite

0 likes · 8 min read

Essential Vue3 Ecosystem Tools and Their Installation Guides

Rare Earth Juejin Tech Community

Mar 21, 2025 · Frontend Development

Component Communication in Vue 3: Props, Emit, Sibling Communication, Event Bus, Pinia, Provide/Inject, and Ref

This article provides a comprehensive guide to Vue 3 component communication, covering parent‑to‑child props, child‑to‑parent emit, sibling communication via parent mediation, event bus, Pinia state management, provide/inject, shared reactive objects, and component instance references, with code examples and a comparison table.

EmitPropscomponent communication

0 likes · 13 min read

Component Communication in Vue 3: Props, Emit, Sibling Communication, Event Bus, Pinia, Provide/Inject, and Ref

Rare Earth Juejin Tech Community

Feb 9, 2025 · Frontend Development

A Comprehensive Guide to Using Pinia for State Management in Vue 3

This article explains why Pinia is a lightweight alternative to Vuex, shows how to install and configure Pinia in a Vue project, demonstrates both option‑store and setup‑store definitions, covers state, getters, actions, destructuring techniques, built‑in helpers like $reset, $patch, $state, $subscribe, and introduces persistence with pinia‑plugin‑persistedstate.

JavaScriptState ManagementVue

0 likes · 9 min read

A Comprehensive Guide to Using Pinia for State Management in Vue 3

Rare Earth Juejin Tech Community

Dec 1, 2024 · Frontend Development

Migrating a Vue2 Project to Vue3 with Pinia and Composition API

This article details a step‑by‑step migration from Vue 2 to Vue 3, emphasizing the use of the latest Vue 3 version, TypeScript typings, replacing mixins with composition functions, adopting Pinia for state management, and demonstrating how to share and protect reactive state with composition APIs.

Composition APIState ManagementTypeScript

0 likes · 8 min read

Migrating a Vue2 Project to Vue3 with Pinia and Composition API

Java Architecture Stack

Oct 9, 2024 · Frontend Development

Mastering Pinia: A Complete Guide to Vue 3 State Management

This comprehensive tutorial walks through Pinia's core concepts—including stores, defineStore, reactive integration, devtools, plugins, TypeScript support, SSR handling, and mapping helpers—providing step‑by‑step code examples and detailed explanations for building robust Vue 3 applications.

Composition APIDevToolsPlugins

0 likes · 26 min read

Mastering Pinia: A Complete Guide to Vue 3 State Management

Rare Earth Juejin Tech Community

Sep 18, 2024 · Frontend Development

Implementing Page and Button Permission Control in Vue.js Using RBAC

This article explains how to build a Vue.js admin interface with role‑based access control, covering ACL vs. RBAC concepts, dynamic route generation, layout composition, Pinia state management, custom permission directives for page and button visibility, and alternative v‑if based checks.

PermissionRBACRouting

0 likes · 13 min read

Implementing Page and Button Permission Control in Vue.js Using RBAC

Rare Earth Juejin Tech Community

May 18, 2024 · Frontend Development

Vue3 + Vite4 + Pinia + Axios Project Setup and Usage Guide

This guide walks through setting up a Vue3 project with Vite4, Pinia, and Axios—including version specifications, directory structure, installation commands, Pinia persistence, Axios configuration, auto‑import setup, and Uni‑UI integration—providing complete code snippets for each step.

Vite4Vue3pinia

0 likes · 9 min read

Vue3 + Vite4 + Pinia + Axios Project Setup and Usage Guide

Java Captain

May 10, 2024 · Frontend Development

Douyin‑Vue: A TikTok‑Like Short Video Front‑End Project and Setup Guide

This article introduces the open‑source Douyin‑Vue project—a TikTok‑style short‑video app built with Vue 3, Vite 5 and Pinia—provides its repository and demo links, and walks through the required environment setup and local deployment steps.

GitHubViteVue3

0 likes · 2 min read

Douyin‑Vue: A TikTok‑Like Short Video Front‑End Project and Setup Guide

Rare Earth Juejin Tech Community

Mar 18, 2024 · Frontend Development

Implementing One‑Click Theme Switching and Custom Color Themes for ECharts in Vue3 with TypeScript

This article demonstrates how to integrate ECharts into a Vue3 + TypeScript project, create a reusable useEcharts hook for rendering charts, implement one‑click theme switching, and generate custom chart themes from user‑selected colors using the tvision‑color library and Pinia store management.

Custom ColorsEChartsTheme Switching

0 likes · 10 min read

Implementing One‑Click Theme Switching and Custom Color Themes for ECharts in Vue3 with TypeScript

Rare Earth Juejin Tech Community

Oct 27, 2023 · Frontend Development

Is Pinia/Vuex Really Necessary? A Critical Look at State Management in Vue 3

This article examines whether Pinia or Vuex is required for Vue 3 projects by comparing their features, discussing scenarios such as shared state, devtools, hot‑module replacement, TypeScript support, SSR, and offering simple native alternatives with code examples.

Vuexfrontendpinia

0 likes · 10 min read

Is Pinia/Vuex Really Necessary? A Critical Look at State Management in Vue 3

政采云技术

Oct 18, 2023 · Frontend Development

Getting Started with Pinia: Installation, Store Creation, and Core Concepts

This guide introduces Pinia, a lightweight Vue state‑management library, covering its installation, creation of a Pinia instance, defining stores in both options and setup styles, and detailed usage of state, getters, and actions with code examples, highlighting its simplicity compared to Vuex.

State ManagementTypeScriptVue

0 likes · 8 min read

Getting Started with Pinia: Installation, Store Creation, and Core Concepts

Yunxuetang Frontend Team

Apr 14, 2023 · Frontend Development

Building a Vue + SpringBoot Management System: Setup, Architecture, and Deployment

This step‑by‑step guide shows backend developers how to create a small management system with Vue 3, TypeScript, Vite, and SpringBoot, covering the technology stack, development‑tool installation, project scaffolding, core components, routing, Pinia state, Axios API wrappers, TypeScript interfaces, environment configuration, and deployment.

TypeScriptViteVue

0 likes · 22 min read

Building a Vue + SpringBoot Management System: Setup, Architecture, and Deployment

JD Tech

Feb 21, 2023 · Frontend Development

Exploring Vue 3 New Features: Composition API, Props, Pinia State Management, and Reactive Patterns

This article introduces Vue 3's latest capabilities—including the Composition API, setup syntax sugar, Pinia state management, and advanced reactive patterns—demonstrating how they simplify component logic, improve code reuse, and enhance maintainability for modern frontend development.

Composition APIReactiveVue3

0 likes · 16 min read

Exploring Vue 3 New Features: Composition API, Props, Pinia State Management, and Reactive Patterns

Rare Earth Juejin Tech Community

Nov 29, 2022 · Frontend Development

Comprehensive Guide to Setting Up Nuxt 3 with SSR, Routing, Layouts, Components, Plugins, and More

This article provides a step‑by‑step tutorial on installing the stable Nuxt 3 release, explaining server‑side rendering concepts, configuring routes, layouts, components, plugins, composables, Pinia, VueUse, CSS preprocessing, and best practices for building a modern frontend application.

ComposablesNuxt3SSR

0 likes · 18 min read

Comprehensive Guide to Setting Up Nuxt 3 with SSR, Routing, Layouts, Components, Plugins, and More

Rare Earth Juejin Tech Community

Oct 20, 2022 · Frontend Development

Comprehensive Guide to Using Pinia for State Management in Vue

This article provides an in‑depth tutorial on Pinia, covering its origins, differences from Vuex, installation, store definition, state, getters, actions, plugin creation, persistence strategies, and practical code examples for integrating Pinia into Vue applications.

JavaScriptPluginsState Management

0 likes · 15 min read

Comprehensive Guide to Using Pinia for State Management in Vue

Rare Earth Juejin Tech Community

Mar 1, 2022 · Frontend Development

Comprehensive Guide to Building a Vue 3 + Vite + TypeScript Project with Full Tooling and Best Practices

This tutorial walks through setting up a modern Vue 3 development environment using Vite, TypeScript, ESLint, Stylelint, Pinia, Vue‑Router, Naive UI, ECharts, and Axios, covering Node.js installation, project scaffolding, configuration files, code standards, git hooks, and integration steps for each library.

EChartsNaive UIVite

0 likes · 37 min read

Comprehensive Guide to Building a Vue 3 + Vite + TypeScript Project with Full Tooling and Best Practices

ByteFE

Jan 7, 2022 · Frontend Development

Curated Frontend Development Resources and Articles

This collection presents a variety of recent frontend‑focused articles and tutorials—including WebGPU fundamentals, low‑code implementation principles, Esbuild performance tricks, design‑pattern insights, TypeScript type programming, NestJS dependency injection, Pinia state management, image‑loading optimization, and Immer.js immutable data handling—each accompanied by QR‑code links to the original sources.

NestJSWebGPUdesign-patterns

0 likes · 7 min read

Curated Frontend Development Resources and Articles

Taobao Frontend Technology

Jan 3, 2022 · Frontend Development

Explore CRA v5, Express‑Validator, and Pinia: Latest Tools for Modern Web Development

This roundup introduces Create React App 5 with Webpack 5 and Tailwind support, demonstrates how to use the express‑validator middleware in Express, highlights Pinia as a type‑safe Vue state manager, and points to a practical Nginx location configuration guide.

Express-validatorNGINXReAct

0 likes · 3 min read

Explore CRA v5, Express‑Validator, and Pinia: Latest Tools for Modern Web Development