{"id":16149161,"url":"https://github.com/cpreston321/nuxt-swiper","last_synced_at":"2025-05-15T04:04:22.818Z","repository":{"id":59194170,"uuid":"535861880","full_name":"cpreston321/nuxt-swiper","owner":"cpreston321","description":"Swiper.js for Nuxt","archived":false,"fork":false,"pushed_at":"2025-05-10T01:14:52.000Z","size":2419,"stargazers_count":269,"open_issues_count":61,"forks_count":11,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-10T01:15:17.313Z","etag":null,"topics":["alternative","nuxt","nuxt-module","nuxt3","swiper","swiperjs","vue"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/nuxt-swiper","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cpreston321.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":["https://www.buymeacoffee.com/cpreston321"]}},"created_at":"2022-09-12T21:47:30.000Z","updated_at":"2025-05-10T01:14:55.000Z","dependencies_parsed_at":"2023-11-06T14:39:54.376Z","dependency_job_id":"c68395bb-8cfe-468e-bede-9aef6c5bffb5","html_url":"https://github.com/cpreston321/nuxt-swiper","commit_stats":{"total_commits":100,"total_committers":7,"mean_commits":"14.285714285714286","dds":0.26,"last_synced_commit":"8c22c0c53024084f623c77847d0133d77a4732e4"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cpreston321%2Fnuxt-swiper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cpreston321%2Fnuxt-swiper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cpreston321%2Fnuxt-swiper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cpreston321%2Fnuxt-swiper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cpreston321","download_url":"https://codeload.github.com/cpreston321/nuxt-swiper/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254270640,"owners_count":22042858,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alternative","nuxt","nuxt-module","nuxt3","swiper","swiperjs","vue"],"created_at":"2024-10-10T00:37:04.615Z","updated_at":"2025-05-15T04:04:22.798Z","avatar_url":"https://github.com/cpreston321.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/cpreston321"],"categories":["TypeScript"],"sub_categories":[],"readme":"# Nuxt Swiper\n\n[![npm](https://img.shields.io/npm/v/nuxt-swiper?style=flat-square)](https://www.npmjs.com/package/nuxt-swiper/)\n[![Downloads](https://img.shields.io/npm/dt/nuxt-swiper.svg?style=flat-square)](https://www.npmjs.com/package/nuxt-swiper)\n[![License](https://img.shields.io/npm/l/nuxt-swiper?style=flat-square)](/LICENSE)\n\n\u003e [!IMPORTANT]\n\u003e ***Nuxt Swiper*** utilizes Swiper.js as its foundation using its web components. Please ensure that you read the Swiper.js [documentation](https://swiperjs.com/element) before utilizing this module and reporting any issues that are not directly related to Nuxt Swiper. If there is an underlying bug, please submit an issue to the Swiper.js [repository](https://github.com/nolimits4web/swiper/issues).\n\n\u003e [!NOTE]\n\u003e If you want to learn how to use web components in **Vue.js** please refer to the docs here: [Vue.js Web Components](https://vuejs.org/guide/extras/web-components.html)\n\n## Features\n\n- 📖 Open Source\n- 🪄 TypeScript Support\n- ✅ Auto Imports Enabled\n- ✨ Just Works Out of the Box like Magic\n\n## Setup\n\n### Try it online\n\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/cpreston321/nuxt-swiper/tree/main/examples/swiper-basic?file=app.vue)\n\n### Step 1: Install module\n\n```bash\nnpx nuxi@latest module add swiper\n```\n\n## Usage\n\n\u003e [!NOTE]\n\u003e Since these are web components, they use the kebab-case naming convention vs the camelCase naming convention that Vue uses.\n\n| Swiper Components (WebComponent) |\n| -------------------------------- |\n| `\u003cswiper-container/\u003e`     |\n| `\u003cswiper-slide /\u003e`        |\n\n### Module Options\n\n```ts\ninterface ModuleOptions {\n  /**\n   * Enable custom Swiper composables to help you access Swiper instance.\n   * @example ```vue\n   * \u003cscript setup\u003e\n   * const swiperRef = ref\u003cnull\u003e(null)\n   * const swiper = useSwiper(swiperRef, { loop: true, autoplay: { delay: 5000 })\n   *\n   * const next = () =\u003e swiper.next()\n   * \u003c/script\u003e\n   *\n   * \u003ctemplate\u003e\n   *  \u003cswiper-container ref=\"swiperRef\" :init=\"false\"\u003e\n   *    \u003cswiper-slide\u003eSlide 1\u003c/swiper-slide\u003e\n   *    \u003cswiper-slide\u003eSlide 2\u003c/swiper-slide\u003e\n   *  \u003c/swiper-container\u003e\n   * \u003c/template\u003e\n   * ```\n   * @default true\n   */\n  enableComposables?: boolean\n\n  /**\n   * Bundle Swiper custom elements.\n   * if disabled, you need to import swiper css and modules manually.\n   * @see https://swiperjs.com/element#core-version--modules\n   * @default true\n   */\n  bundled?: boolean\n}\n```\n\n### Basic Usage\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\n// Create 10 slides\nconst containerRef = ref(null)\nconst slides = ref(Array.from({ length: 10 }))\n\nconst swiper = useSwiper(containerRef)\n\nonMounted(() =\u003e {\n  // Access Swiper instance\n  // Read more about Swiper instance: https://swiperjs.com/swiper-api#methods--properties\n  console.log(swiper.instance)\n})\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cClientOnly\u003e\n    \u003cswiper-container ref=\"containerRef\"\u003e\n      \u003cswiper-slide\n        v-for=\"(slide, idx) in slides\"\n        :key=\"idx\"\n        style=\"background-color: rgb(32, 233, 70); color: white;\"\n      \u003e\n        Slide {{ idx + 1 }}\n      \u003c/swiper-slide\u003e\n    \u003c/swiper-container\u003e\n  \u003c/ClientOnly\u003e\n\n  \u003c!-- Go back one slide --\u003e\n  \u003cbutton @click=\"swiper.prev()\"\u003e\n    Prev\n  \u003c/button\u003e\n  \u003c!-- Go forward one slide --\u003e\n  \u003cbutton @click=\"swiper.next()\"\u003e\n    Next\n  \u003c/button\u003e\n\u003c/template\u003e\n\n\u003cstyle lang=\"css\"\u003e\nswiper-slide {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 18px;\n  height: 20vh;\n  font-size: 4rem;\n  font-weight: bold;\n  font-family: 'Roboto', sans-serif;\n}\n\u003c/style\u003e\n```\n\n## Advanced Usage\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nconst containerRef = ref(null)\nconst slides = ref(Array.from({ length: 10 }))\nconst swiper = useSwiper(containerRef, {\n  effect: 'creative',\n  loop: true,\n  autoplay: {\n    delay: 5000,\n  },\n  creativeEffect: {\n    prev: {\n      shadow: true,\n      translate: [0, 0, -400],\n    },\n    next: {\n      shadow: true,\n      translate: [0, 0, -400],\n    },\n  },\n})\n\nonMounted(() =\u003e {\n  console.log(swiper.instance)\n})\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cClientOnly\u003e\n    \u003cswiper-container ref=\"containerRef\" :init=\"false\"\u003e\n      \u003cswiper-slide\n        v-for=\"(slide, idx) in slides\"\n        :key=\"idx\"\n        style=\"background-color: rgb(32, 233, 70); color: white;\"\n      \u003e\n        Slide {{ idx + 1 }}\n      \u003c/swiper-slide\u003e\n    \u003c/swiper-container\u003e\n  \u003c/ClientOnly\u003e\n\u003c/template\u003e\n\n\u003cstyle lang=\"css\"\u003e\nswiper-slide {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 18px;\n  height: 20vh;\n  font-size: 4rem;\n  font-weight: bold;\n  font-family: 'Roboto', sans-serif;\n}\n\u003c/style\u003e\n```\n\n## 💻 Development\n\n\u003cdetails\u003e\n  \u003csummary\u003eLocal development\u003c/summary\u003e\n\n- Clone this repository\n- Install the latest LTS version of [Node.js](https://nodejs.org/en/)\n- Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable`\n- Install dependencies using `pnpm install`\n- Generate type stubs using `pnpm dev:prepare`\n- Run tests using `pnpm dev`\n\n\u003c/details\u003e\n\n## Credits\n\n[`Swiper.js`](https://swiperjs.com/) is developed by [@nolimits4web](https://github.com/nolimits4web).\n\n[`Nuxt Swiper`](#nuxt-swiper) is developed by [@cpreston321](https://github.com/cpreston321).\n\n## 📧 Contact\n\n**X** (formely knowned as Twitter) - [@christian_ggg](https://x.com/christian_ggg)\n\nAlso, if you like my work, please feel free to [buy me a coffee](https://www.buymeacoffee.com/cpreston321) ☕️\n\n[![buymeacoffee](https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png)](https://www.buymeacoffee.com/cpreston321)\n\n## Contributors\n\n[![contributors](https://contrib.rocks/image?repo=cpreston321/nuxt-swiper)](https://contrib.rocks/image?repo=cpreston321/nuxt-swiper)\n\n---\n\n[MIT](./LICENSE) License © 2025 [CP](https://github.com/cpreston321)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcpreston321%2Fnuxt-swiper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcpreston321%2Fnuxt-swiper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcpreston321%2Fnuxt-swiper/lists"}