Vue3 Core Hub

切换主题

UI 工具 ​

事件处理 ​

处理用户事件（滚动、点击、按键等）

  • vue-shortkey - Vue-ShortKey - Vue.js 插件。
  • vue-throttle-event - 基于 requestAnimationFrame 的事件节流。
  • vue-waypoint - Vue 的 Waypoint 组件，这是在滚动时触发函数的最简单方法。
  • vue-clickaway - 可重用的 Vue.js 组件的可重用 clickaway 指令。
  • vue-scrollfire - 在特定滚动位置触发事件。
  • vue-resize-directive - Vue 指令，用于检测带有防抖和节流能力的调整大小事件。
  • v-click-outside - Vue 指令，用于对元素外部的点击做出反应，而不停止事件传播。
  • vue-outside-events - Vue 2.x 指令，帮助指定的元素监听发生在其外部的特定事件。
  • vue-selectable - Vue 1.x/2.x 指令，使项目可通过鼠标选择。
  • vue-click-helper - Vue2.x 指令，用于处理同一元素上的单击事件和双击事件。
  • v-hotkey - Vue 2.x 指令，用于将热键绑定到组件。
  • vue-resize - Vue 2.x 组件，用于检测 DOM 元素大小调整（基于事件/无 window.onresize）
  • vue-observe-visibility - Vue 2.x 指令，使用 Intersection Observer API 检测元素是否可见（在视口中且未被 CSS 隐藏）。
  • v-dragged - 用于拖放事件检测的 Vue 2.x 指令插件。
  • vue-esc - Vue.js 指令，用于在转义键松开时添加文档事件监听器。
  • vue-global-events - 一个组件，使用 Vue 的事件修饰符处理全局事件（如快捷键）
  • vue-edge-check - 检查浏览器边缘，以防止在使用 vue-router 滑动边缘时奇怪地触发过渡效果
  • vue-mutation-observer - 一个简单而小巧的指令，使用 MutationObserver API 观察 DOM 中的变化
  • vue-scroll-show - 如果用户滚动后到达元素，则显示该元素
  • vue-tabevents - 在其他打开的标签页之间轻松通信
  • vue-visibility-trigger - 当滚动到视图中时声明性地触发方法
  • v-click-outside-x - Vue V2 指令，用于对元素外部的点击、触摸、指针或多个事件做出反应
  • vue-keypress - Vue.js 应用程序的全局按键事件处理程序组件
  • vue-pseudo-window - 组件，用于在 Vue 模板中声明式地接口 window/document
  • v-on-page-video - Vue.js 指令，用于在可见性变化时更改视频元素的状态
  • vue3-click-outside - Vue 3 指令，用于在点击绑定元素外部时运行方法
  • vue-exit-intent - Vue 组合式 API，用于处理用户的退出意图

响应式设计 ​

  • vue-viewports - 定义自定义视口并在组件中使用它们。
  • vue-responsive - Vue.js(2.x) 指令，用于使用 Bootstrap 4、3 或自定义断点隐藏/显示 HTML 元素。
  • vue-match-media - 兼容 Vue 2.x 的插件，提供一致的语义方法，使组件能够感知媒体查询。
  • vue-media-query-mixin - Vue 2 媒体查询 mixin，可在组件 js 和组件模板中使用。与 bootstrap 和 vuetify 视口兼容。wXS 返回屏幕宽度是否为 xs，wSM 返回屏幕宽度是否为 sm，等等...
  • vue-breakpoints - Vue 2 最小组件，用于根据断点显示和隐藏元素。受 Airbnb 启发。
  • vue-mq - 提供一些有用的工具，通过语义化和移动优先的 API 快速设置响应式设计（Vue 2.x）
  • VueResizeSensor - 支持调整大小事件的容器。
  • vue-breakpoint-component - 用于组合 CSS 断点状态的无渲染组件。
  • fine-mq - 一个精细的 API，用于轻松管理 JS 中的媒体查询，并作为插件与 VueJS 进行一流集成。
  • vue-responsive-components - 使用 ResizeObserver 创建响应式组件。
  • vue-screen-size - 轻松响应式访问屏幕的宽度和高度
  • vue-container-query-2 - 用于处理 css 容器查询的智能 vue 插件
  • vue-component-media-queries - Vue 的 MatchMedia 组件库

表单 ​

  • vue-formly - Vue.js 的 JavaScript 驱动表单。
  • vue-focus - 可重用的 Vue.js 组件的可重用焦点指令。
  • vue-form-generator - Vue.js 的基于架构的表单生成器组件。
  • FormSchema Native - 使用 JSON Schema 和 Vue.js 生成表单
  • ic-formly - 由 vue-formly 提供支持的简单表单组件。
  • Form Builder - 基于 Json 模板的表单构建器，基于 Vue 和 Laravel。
  • vue-autofocus-directive - Vue 自动聚焦指令。
  • vue-awesome-form - 一个类似于 json-editor 的 vue.js 组件
  • vue-form-components - 带有验证的干净简约的 vue 表单元素
  • v-ajax-form - Vue.js 组件插件，使 Form 标签与 ajax 请求兼容
  • Vue Formulate - 使用 Vue 构建表单的最简单方法。验证、错误处理、表单生成、全面的文档等
  • Reforms.js - Vue 3 和 Bootstrap 表单和卡片生成器。验证、多个字段、分组、架构等
  • FormKit - Vue 3 表单开发。快 10 倍。表单输入、验证、提交、错误处理、生成、可访问性、主题等
  • vrf - 声明性可扩展的与 UI 无关的基于标记的 Vue 表单

验证 ​

  • vee-validate - 简单的 Vue.js 输入验证插件。
  • vue-rawmodel - Vue.js v2 的 RawModel.js 插件。表单验证从未如此简单。
  • vuelidate - Vue.js 的简单、轻量级基于模型的验证。
  • simple-vue-validator - 一个简单但灵活的 vue.js 验证器库。
  • vue-vform - Vue.js 2 表单组件，集成了 jQuery Validation 和 Axios。
  • vue-form - Vue.js 的全面表单验证。
  • vuelidation - 简单、强大的 vuejs 验证。
  • laravel-vue-validator - 显示来自 laravel 验证规则的错误
  • vue-daval - 超级 vue 数据验证器。简单、准确。
  • willvalidate - Vue.js 的验证表单。
  • vue-isyourpasswordsafe - 一个用 Vue 编写的小工具，检查给定的密码是否已通过 Have I Been Pwned API 泄露。
  • vue-form-send - 一个 Vue.js 指令，用于从表单发送数据和原始验证
  • FormVuelar - 考虑服务器端验证的 Vue 表单组件
  • vue-final-validate - 基于我的开发经验的 Vue 验证解决方案，支持嵌套、异步。
  • vform - 一种在 Vue 中处理 Laravel 后端验证的简单方法。
  • vue-form-container - 一个 Provider Component，封装您的表单并处理它们的状态和验证
  • ps-validation - 一个 Vue 插件，提供开箱即用的数据验证规则，非常受 Laravel 验证系统的启发
  • vue-laravel-errors - 一个 Vue.JS 插件，添加了一个全局 mixin，可用于从 laravel 错误响应填充 errors 变量并将其显示为对象或数组，也可作为本地 mixin 使用
  • vue-input-validator - Vue 2 的高度可扩展和可自定义的输入验证器
  • @vuito/vue - 简单、轻量级、同构且基于模板的验证库
  • vue-tiny-validate - 微小（2.5KB 压缩）的 Vue Validate Composition
  • vest - 受单元测试启发的声明性表单验证框架
  • VFM - Vue 驱动的表单管理工具
  • vorms - 使用 Composition API 的 Vue 表单验证

调整大小 ​

  • vue-not-visible - Vue 指令，用于在屏幕小于断点时从 dom 中删除（如 v-if）元素。
  • vue-window-size - 提供响应式窗口大小属性。
  • vue-responsive-text - ↔ 组件，根据其父节点的宽度缩放其子节点
  • v-hide - v-hide 指令，伴随 v-if 和 v-show。在 DOM 中保留布局空间

滚动 ​

设置窗口滚动位置

虚拟滚动条

  • VBar - Vue.js 2x 的虚拟响应式跨浏览器滚动条组件。
  • Vuebar - Vue 2 指令，用于使用原生滚动行为的自定义滚动条。轻量级、高性能、可自定义且无依赖。
  • vue-detached-scrollbar - 一个简单的滚动条，可以与其正在滚动的容器分离。
  • vuescroll - 基于 Vue.js 的滚动插件，用于统一 PC 和移动设备的滚动。
  • vue-simplebar - simplebar 插件的 Vue.js 包装器。
  • smooth-vuebar - smooth-scrollbar 的 Vue 指令包装器

检测组件何时进入视口

  • vue-scrollview - 一个利用作用域插槽的组件，用于检测 Vue 组件何时进入和离开视口。
  • vue-scrollactive - 基于当前视口中的部分在菜单项中添加活动类，也在点击菜单项时滚动到该部分。
  • vue-intersect - 一个 Vue 组件，用于向 Vue 组件或 HTML 元素添加交叉观察器。
  • vue-scrollmonitor - 一个 Vue 插件，用于监视视口中元素的可见性状态，支持广泛的浏览器（使用 provide/inject 因此兼容 Vue 2.2.x）
  • vue-stroll - 一个用于 Vue.js 2.x 的令人惊叹的 CSS3 列表滚动效果组件。
  • navscroll-js - 当您滚动时突出显示菜单项，并在点击菜单项时滚动到部分。用作 vue 组件、vue 指令或与 vanilla js 一起使用。
  • vue-scrollwatch - 一个轻量级插件，用于检测滚动事件，在元素进入视口时自定义回调，暴露 'scrollTo' api 以滚动到特定元素。使用 vue 指令。
  • vue-check-view - 一个检查元素是否在视口中的插件。快速、小巧、无依赖，有现场演示。
  • vue-stickto - 一个 vue 指令，支持多个 DOM 节点自动粘在顶部
  • vue2-scrollspy - 一个滚动监视插件和动画滚动到。
  • vue-trip-wire - 一个自定义指令，用于当元素到达视口中的指定点时触发函数，可选择导入具有全局可访问函数的模块
  • v-intersect - 一个 Vue 指令和组件，用于检测元素在视口中何时可见或隐藏
  • vue-scrollama - 一个 Vue 组件，可轻松设置滚动驱动的交互（又名 scrollytelling）
  • vue-use-active-scroll - 突出显示 Vue 3 菜单/侧边栏链接，无需妥协

自定义滚动行为

无缝滚动

路由 ​

懒加载 ​

  • vue-lazyload - 一个 Vue.js 插件，用于在应用程序中懒加载图像或组件。
  • vue-lazy-background-images - 为 Vue 2 懒加载背景图像。
  • vue-progressive-image - Vue 渐进式图像加载插件。
  • vue-l-lazyload - 一个用于 Vue.js v2.x+ 的懒加载插件。
  • vue-lazyload-img - 特别针对移动浏览器进行了优化。支持 V2 和 v1。
  • vue-lazy-images - 一个用于 Vue 2.x 的懒加载图像插件。
  • v-lazy-img - 用于 Vue 2 渐进式图像加载的微小（<0.6kb）指令。
  • vue-clazy-load - 轻量级可转换图像懒加载组件，使用 IntersecionObserver 用于 Vue 2。
  • vue-lazy-this - 使用 Intersection Observer API 的懒加载组件。
  • v2-lazy-list - 基于 Vue 2.x 的简单懒加载列表组件
  • pimg - 一个用于懒加载图像的简单渐进式图像组件。
  • vue-tiny-lazyload-img - 一个小尺寸的 Vue.js v.2+ 指令，用于懒加载图像
  • vue-lazy-youtube-video - 一个简单的 Vue.js 组件，用于懒加载 YouTube 视频。
  • lazyload-vue - vanilla-lazyload 的 Vue 插件。
  • vue-lazy-loading - 一个 vue 插件，更好地支持图像和 iframe 的原生懒加载
  • v-lazy-component - Vue 组件在可见时渲染。使用 Intersection Observer API
  • vue-lazy - 基于 Intersection API 的轻量级图像/图片懒加载
  • vue3-lazyload - Vue 模块，用于在 Vue 3 应用程序中懒加载图像

分页 ​

动画 ​

  • vue-animate - Animate.css 的 Vue.js 端口。用于 Vue 的内置过渡
  • animated-vue - 一个 Vue.js 2.x 插件，可以轻松地将 Animate.css 动画用作过渡。就像 <animated-tada> 一样简单！
  • vue-lottie - 一个 Vue.js 2.x 插件，用于基于 bodymovin 渲染 after effects 动画
  • Vueg - 让 vue-router 有过渡效果 / 为 webApp 提供转场特效的开源 Vue 插件
  • v-animate-css - 最容易实现的 Vue 2 指令，用于 Animate.css
  • vue-mixin-tween - Mixin 工厂，为动画向组件上下文添加补间值
  • v-odometer - 轻松平滑过渡数字。使用此库为您的应用程序提供平滑的动画，仅适用于数字。
  • vue2-transitions - 可重用的 Vue 2 过渡组件
  • vue-overdrive - Vue 应用程序的超级简单魔法移动过渡
  • animated-number-vue - 超级简单的数字动画方法。
  • vue-typed-js - Typed.js 集成，轻松创建打字动画
  • vue-parent-change-transition - 启用子组件在更改父组件时进行动画
  • vue-smooth-reflow - 响应数据变化的元素回流过渡。
  • VueTween - 允许组件补间其属性。
  • vue-slide-up-down - 就像 jQuery 的 slideUp / slideDown，但用于 Vue！
  • vue-animejs - 用于 Vue 的简单 anime.js 指令。
  • Eagle.js - Eagle.js 是一个基于 Vue.js 的基于 Web 的幻灯片框架。
  • vue-pose - Pose for Vue 是一个声明性运动系统，结合了 CSS 过渡的简单性和 JavaScript 的强大性和灵活性。
  • vue-slide-up-down-component - 这是一个简单的界面，但实现了非常灵活和强大的滑动动画，用于 Vue！
  • femtoTween - 一个极简主义（零依赖，小于 1k）的补间库，具有一流的 Vue 支持
  • vue-sequential-entrance - 一个插件，用于为页面上的元素列表创建优雅的顺序动画入口。零努力。简单轻便
  • vue-animate-scroll - 一种超级轻量级的方法，在元素滚动到视图中时为其添加 CSS 动画。
  • vue-svg-transition - 创建 2 状态、SVG 驱动的过渡
  • vue-page-transition - Vue.js 的简单路由/页面过渡
  • Vuenime - Animejs 的灵活 Vue 包装器
  • vue-flipper - 一个组件，用于以良好的过渡效果翻转子元素
  • v-number - Vue.js 的动画数字过渡库
  • vue-kinesis - 一组用于创建交互式动画的组件
  • vue-digital-transform - 一个用于更好的数字变换动画的 vue 组件
  • vue-typical - Vue 动画打字，约 400 字节的 JavaScript
  • vue3-lottie - 一个用于在 Vue 3 中导入和显示 Lottie 动画的组件
  • @morev/vue-transitions - Vue 2 和 Vue 3 的过渡库，无需 CSS
  • @formkit/auto-animate - 只需一行代码即可为您的应用添加动效
  • vue-contextual-transition - 具有共享元素和/或顺序的页面之间的跨浏览器过渡，相对容易
  • blottie - Vue 3 的 Lottie 组件

元标签 ​

管理文档头部的元信息

  • vue-head - 管理 head 标签的元信息，一种简单易行的方法。
  • vue-meta - 在 Vue 2.0 组件中管理页面元信息。支持 SSR + 流式传输。
  • vue-headful - 从您的视图中设置文档 <title> 和元标签。
  • vue-simple-headful - 使用 vue.js 轻松设置元标签 - 一个更简单的 vue-headful 替代方案，支持 TypeScript。

门户 ​

将 DOM 节点移动到目标 DOM 节点

  • vue-dom-portal - Vue.js 组件中 DOM 元素的逃生舱口。
  • portal-vue - 一个 Vue 插件，用于在 DOM 的任何位置渲染组件的模板（在 virtualDOM 级别工作，不在 DOM 内移动节点）

过滤器 ​

SVG ​

  • vue-svgicon - 一个创建 svg 图标组件的工具。（vue 2.x）。
  • vue-content-loading - Vue 组件，用于轻松构建（或使用预设）SVG 加载卡片 Facebook 风格。
  • vue-annotator - 使用任何 SVG 元素（rect、polygon 等，甚至 HTML 元素如 canvas 如果包装在 foreignObject 中）注释页面
  • vue-svg-sprite - 一个插件、组件或指令，用于简单使用 SVG sprite（vue 3.x，vue 2.x）
  • vue-svg-filler - 用于自定义 svg 文件的 Vue 组件（vue 2.x）。
  • vue-inline-svg - Vue 组件动态加载 SVG 源并内联 <svg>，以便您可以使用 CSS 或 JS 操作其样式。（vue 2.x，vue 3.x）

杂项 ​

WebGL ​

  • vue-3d-model - Vue 组件中的 3D 模型查看器。
  • vue-pano - Vue 组件中的全景查看器。
  • vue-threejs - Three.js 的 Vue 绑定。
  • VueGL - Vue.js 组件，通过 three.js 反应性渲染 3D 图形
  • vue-vr - 一个基于 threejs 和 Panolens 的 Vue VR 应用程序构建框架，灵感来自 react-vr
  • vue-displacement-slideshow - 一个 Vue.js 组件，使 Webgl 图像位移过渡更容易。
  • vue-fake3d-image-effect - 使用 WebGL 中深度图的图像交互式 3D 假效果
  • drie - 一个 Vue 3 组件库，用于 three.js，灵感来自 react-three-fiber
  • TresJs - 使用 Vue 组件的声明式 ThreeJS
  • Cientos - 为 TresJs 提供有用的助手和功能齐全、现成的抽象

全屏 ​

  • vue-fullscreen - 一个简单的全屏 Vue 组件，支持 Vue 2 和 Vue 3

页面可见性 ​

打印 ​

  • vue-html-to-paper - Vue mixin，用于将 html 元素打印到纸张上
  • vue-to-print - 在浏览器中打印 Vue 3 组件。支持 Chrome、Safari、Firefox 和 Edge

基于VitePress构建 | 所有资源均为开源免费

Copyright © 2026 V3Hub | 粤ICP备12345678号