Nuxt Swiper

Name: nuxt-swiper
Rating: 5 (292 reviews)
Author: cpreston321

[!IMPORTANT]

Nuxt Swiper 以 Swiper.js 作为基础，使用其 web 组件。在使用此模块并报告任何与 Nuxt Swiper 无直接关系的问题之前，请确保阅读 Swiper.js 的文档。如果存在底层错误，请向 Swiper.js 的仓库提交问题。

[!NOTE]

如果您想学习如何在 Vue.js 中使用 web 组件，请参考此处的文档：Vue.js Web 组件

功能

📖 开源
🪄 支持 TypeScript
✅ 自动导入已启用
✨ 开箱即用，如魔法般简单

安装

在线尝试

第 1 步：安装模块

npx nuxi@latest module add swiper

用法

[!注意]

由于这些是网页组件，它们使用短横线命名法，而不是 Vue 使用的驼峰命名法。

| Swiper 组件（网页组件） | | ---------------------- | | | | |

模块选项

interface ModuleOptions {
  /
   Enable custom Swiper composables to help you access Swiper instance.
   @example ``vue

   
   
*
   
   `

   @default true
   
*/
  enableComposables?: boolean
  /
   
Bundle Swiper custom elements.
   if disabled, you need to import swiper css and modules manually.
   @see https://swiperjs.com/element#core-version--modules
   @default true
   */
  bundled?: boolean
}

`基本用法`

`高级用法`


💻 开发


  本地开发

克隆此仓库
安装最新的 LTS 版本的 Node.js

使用 corepack enable 启用 Corepack

使用 pnpm install 安装依赖

使用 pnpm dev:prepare 生成类型存根

使用 pnpm dev 运行测试

`致谢`

Swiper.js 由 @nolimits4web 开发。

Nuxt Swiper` 由 @cpreston321 开发。

📧 联系方式

X（原名 Twitter） - @christian_ggg

如果你喜欢我的工作，也欢迎请我喝咖啡 ☕️

贡献者

--- Tranlated By Open Ai Tx | Last indexed: 2025-12-15 ---