├── .editorconfig ├── .github └── workflows │ └── ci.yml ├── .gitignore ├── .npmrc ├── CHANGELOG.md ├── LICENSE ├── README.md ├── docs └── public │ └── social-card.jpg ├── eslint.config.mjs ├── package-lock.json ├── package.json ├── playground ├── app.vue ├── components │ ├── GSAPLogo.vue │ └── NuxtLogo.vue ├── nuxt.config.ts ├── package.json ├── pages │ ├── custom-bounce.vue │ ├── custom-ease.vue │ ├── custom-wiggle.vue │ ├── draggable.vue │ ├── easel-plugin.vue │ ├── expo-scale.vue │ ├── flip.vue │ ├── gsap-dev-tools.vue │ ├── index.vue │ ├── inertia.vue │ ├── motion-path-plugin.vue │ ├── observer.vue │ ├── physics-2d.vue │ ├── pixi-plugin.vue │ ├── rough-ease.vue │ ├── scramble-text.vue │ ├── scroll-smoother.vue │ ├── scroll-to-plugin.vue │ ├── scroll-trigger.vue │ ├── slow-mo.vue │ ├── split-text.vue │ └── text-plugin.vue ├── server │ └── tsconfig.json └── tsconfig.json ├── src ├── module.ts └── runtime │ ├── composables │ └── createGsapComposable.ts │ ├── create-gsap-composable.ts │ ├── gsap-plugins.ts │ ├── plugin.ts │ └── utils │ └── gsap-export.ts ├── test ├── basic.test.ts └── fixtures │ └── basic │ ├── app.vue │ ├── nuxt.config.ts │ └── package.json └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_size = 2 5 | indent_style = space 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: ci 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | branches: 9 | - main 10 | 11 | jobs: 12 | lint: 13 | runs-on: ubuntu-latest 14 | 15 | steps: 16 | - uses: actions/checkout@v4 17 | - run: corepack enable 18 | - uses: actions/setup-node@v4 19 | with: 20 | node-version: 20 21 | 22 | - name: Install dependencies 23 | run: npx nypm@latest i 24 | 25 | - name: Lint 26 | run: npm run lint 27 | 28 | # test: 29 | # runs-on: ubuntu-latest 30 | 31 | # steps: 32 | # - uses: actions/checkout@v4 33 | # - run: corepack enable 34 | # - uses: actions/setup-node@v4 35 | # with: 36 | # node-version: 20 37 | 38 | # - name: Install dependencies 39 | # run: npx nypm@latest i 40 | 41 | # - name: Playground prepare 42 | # run: npm run dev:prepare 43 | 44 | # - name: Test 45 | # run: npm run test 46 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | node_modules 3 | 4 | # Logs 5 | *.log* 6 | 7 | # Temp directories 8 | .temp 9 | .tmp 10 | .cache 11 | 12 | # Yarn 13 | **/.yarn/cache 14 | **/.yarn/*state* 15 | 16 | # Generated dirs 17 | dist 18 | 19 | # Nuxt 20 | .nuxt 21 | .output 22 | .data 23 | .vercel_build_output 24 | .build-* 25 | .netlify 26 | 27 | # Env 28 | .env 29 | 30 | # Testing 31 | reports 32 | coverage 33 | *.lcov 34 | .nyc_output 35 | 36 | # VSCode 37 | .vscode/* 38 | !.vscode/settings.json 39 | !.vscode/tasks.json 40 | !.vscode/launch.json 41 | !.vscode/extensions.json 42 | !.vscode/*.code-snippets 43 | 44 | # Intellij idea 45 | *.iml 46 | .idea 47 | 48 | # OSX 49 | .DS_Store 50 | .AppleDouble 51 | .LSOverride 52 | .AppleDB 53 | .AppleDesktop 54 | Network Trash Folder 55 | Temporary Items 56 | .apdisk 57 | 58 | # Tarballs 59 | *.tgz -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | strict-peer-dependencies=false 3 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | 4 | ## v1.1.2 5 | 6 | [compare changes](https://github.com/LucaArgentieri/gsap-nuxt-module/compare/v1.1.1...v1.1.2) 7 | 8 | ### 🚀 Enhancements 9 | 10 | - Update GSAP to version 3.13.0 and enhance plugin support ([b52f240](https://github.com/LucaArgentieri/gsap-nuxt-module/commit/b52f240)) 11 | 12 | ### 🏡 Chore 13 | 14 | - **release:** V1.1.1 ([a05da9f](https://github.com/LucaArgentieri/gsap-nuxt-module/commit/a05da9f)) 15 | 16 | ### ❤️ Contributors 17 | 18 | - LucaArgentieri 19 | 20 | ## v1.1.1 21 | 22 | [compare changes](https://github.com/LucaArgentieri/gsap-nuxt-module/compare/v1.1.1...v1.1.1) 23 | 24 | ## v1.1.1 25 | 26 | [compare changes](https://github.com/LucaArgentieri/gsap-nuxt-module/compare/v1.2.0...v1.1.1) 27 | 28 | ## v1.2.0 29 | 30 | [compare changes](https://github.com/LucaArgentieri/gsap-nuxt-module/compare/v1.1.0...v1.2.0) 31 | 32 | ### 🚀 Enhancements 33 | 34 | - Add logo placeholder to README for gsap-nuxt-module ([ccc73e1](https://github.com/LucaArgentieri/gsap-nuxt-module/commit/ccc73e1)) 35 | 36 | ### 🩹 Fixes 37 | 38 | - Comment out unused GSAP Club plugins and import gsap in plugin file ([5e29da7](https://github.com/LucaArgentieri/gsap-nuxt-module/commit/5e29da7)) 39 | 40 | ### 💅 Refactors 41 | 42 | - Reorganize GSAP plugins structure and remove unused files ([21086a9](https://github.com/LucaArgentieri/gsap-nuxt-module/commit/21086a9)) 43 | - Update ModuleOptions to restrict plugins and remove unused GSAP Club plugins ([dd80046](https://github.com/LucaArgentieri/gsap-nuxt-module/commit/dd80046)) 44 | 45 | ### 🏡 Chore 46 | 47 | - **release:** V1.1.0 ([9b179a9](https://github.com/LucaArgentieri/gsap-nuxt-module/commit/9b179a9)) 48 | 49 | ### ❤️ Contributors 50 | 51 | - LucaArgentieri 52 | 53 | ## v1.1.0 54 | 55 | [compare changes](https://github.com/LucaArgentieri/gsap-nuxt-module/compare/v1.0.2...v1.1.0) 56 | 57 | ### 🚀 Enhancements 58 | 59 | - Reorganize GSAP plugins structure and remove unused files ([1ffa1b7](https://github.com/LucaArgentieri/gsap-nuxt-module/commit/1ffa1b7)) 60 | 61 | ### 🩹 Fixes 62 | 63 | - Update README for quick setup instructions and correct package version in package.json ([78509f0](https://github.com/LucaArgentieri/gsap-nuxt-module/commit/78509f0)) 64 | - Comment out test job in CI workflow for temporary disablement ([ee69ee7](https://github.com/LucaArgentieri/gsap-nuxt-module/commit/ee69ee7)) 65 | - Update README with correct links for online playground and GSAP documentation ([992b3ad](https://github.com/LucaArgentieri/gsap-nuxt-module/commit/992b3ad)) 66 | 67 | ### ❤️ Contributors 68 | 69 | - LucaArgentieri 70 | 71 | ## v1.0.2 72 | 73 | [compare changes](https://github.com/LucaArgentieri/gsap-nuxt-module/compare/v1.0.1...v1.0.2) 74 | 75 | ## v1.0.1 76 | 77 | 78 | ### 🩹 Fixes 79 | 80 | - Update module name to @nuxtjs/gsap in README, package.json, and module.ts ([ec15aba](https://github.com/LucaArgentieri/gsap-nuxt-module/commit/ec15aba)) 81 | - Update module name from @nuxtjs/gsap to @gsap/nuxt in README, package.json, and module.ts ([35ea27b](https://github.com/LucaArgentieri/gsap-nuxt-module/commit/35ea27b)) 82 | - Update module name from @gsap/nuxt to gsap-nuxt-module in README, package.json, package-lock.json, and module.ts ([a4a945e](https://github.com/LucaArgentieri/gsap-nuxt-module/commit/a4a945e)) 83 | - Update repository URL in package.json and fix badge URLs in README ([fa5bfea](https://github.com/LucaArgentieri/gsap-nuxt-module/commit/fa5bfea)) 84 | - Clean up code by commenting out unused imports and improving formatting ([096bf67](https://github.com/LucaArgentieri/gsap-nuxt-module/commit/096bf67)) 85 | 86 | ### 💅 Refactors 87 | 88 | - Streamline GSAP plugin exports and update TypeScript configurations ([2a1e153](https://github.com/LucaArgentieri/gsap-nuxt-module/commit/2a1e153)) 89 | - Remove unused GSAP composables and improve error handling in existing ones ([50b4763](https://github.com/LucaArgentieri/gsap-nuxt-module/commit/50b4763)) 90 | 91 | ### ❤️ Contributors 92 | 93 | - LucaArgentieri 94 | 95 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 Luca Argentieri 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 9 | 10 | ![gsap-nuxt-module](https://github.com/LucaArgentieri/gsap-nuxt-module/blob/main/docs/public/social-card.jpg) 11 | 12 | # gsap-nuxt-module 13 | 14 | [![npm version][npm-version-src]][npm-version-href] 15 | [![npm downloads][npm-downloads-src]][npm-downloads-href] 16 | [![License][license-src]][license-href] 17 | [![Nuxt][nuxt-src]][nuxt-href] 18 | 19 | **Enhance your Nuxt application with powerful animations and transitions using GSAP!** 20 | 21 | - [✨  Release Notes](/CHANGELOG.md) 22 | - [🏀 Online playground](https://stackblitz.com/edit/gsap-nuxt-module?file=app.vue) 23 | - [📖 GSAP](https://gsap.com/) 24 | 25 | ## Features 26 | 27 | - **Auto-import GSAP**: Easily integrate GSAP without manually importing it in every file. 28 | - **Dynamic Plugin Registration**: Import and register GSAP plugins only if enabled in `nuxt.config.ts`, optimizing performance. 29 | - **Composable for Each Plugin**: Use GSAP plugins as composables for a simple and direct experience. 30 | 31 | ## Quick Setup 32 | 33 | 1. Install the module to your Nuxt application with one command: 34 | 35 | 38 | 39 | ```bash 40 | npm i gsap-nuxt-module 41 | ``` 42 | 43 | 2. Add gsap-nuxt-module to the modules section of nuxt.config.ts 44 | 45 | ```bash 46 | export default defineNuxtConfig({ 47 | modules: ['gsap-nuxt-module'], 48 | }) 49 | ``` 50 | 51 | 3. Here's how to use GSAP in your component: 52 | 53 | ```js 54 | 63 | 64 | 67 | ``` 68 | 69 | ## Example Configuration 70 | 71 | 1. In your nuxt.config.ts, enable the desired GSAP plugins: 72 | 73 | ```js 74 | export default defineNuxtConfig({ 75 | modules: ["gsap-nuxt-module"], 76 | gsap: { 77 | plugins: ["Draggable"], 78 | }, 79 | }); 80 | ``` 81 | 82 | 2. Here's how to use the Draggable plugin in your component: 83 | 84 | ```js 85 | 94 | 95 | 98 | ``` 99 | 100 | ##### You can find more examples in [playground](https://github.com/LucaArgentieri/gsap-nuxt-module/tree/main/playground/pages) 101 | 102 | That's it! You can now use gsap-nuxt-module in your Nuxt app ✨ 103 | 104 | ## Contribution 105 | 106 |
107 | Local development 108 | 109 | ```bash 110 | # Install dependencies 111 | npm install 112 | 113 | # Generate type stubs 114 | npm run dev:prepare 115 | 116 | # Develop with the playground 117 | npm run dev 118 | 119 | # Build the playground 120 | npm run dev:build 121 | 122 | # Run ESLint 123 | npm run lint 124 | 125 | # Run Vitest 126 | npm run test 127 | npm run test:watch 128 | 129 | # Release new version 130 | npm run release 131 | ``` 132 | 133 |
134 | 135 | 136 | 137 | [npm-version-src]: https://img.shields.io/npm/v/gsap-nuxt-module/latest.svg?style=flat&colorA=020420&colorB=00DC82 138 | [npm-version-href]: https://npmjs.com/package/gsap-nuxt-module 139 | [npm-downloads-src]: https://img.shields.io/npm/dm/gsap-nuxt-module.svg?style=flat&colorA=020420&colorB=00DC82 140 | [npm-downloads-href]: https://npm.chart.dev/gsap-nuxt-module 141 | [license-src]: https://img.shields.io/npm/l/gsap-nuxt-module.svg?style=flat&colorA=020420&colorB=00DC82 142 | [license-href]: https://npmjs.com/package/gsap-nuxt-module 143 | [nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js 144 | [nuxt-href]: https://nuxt.com 145 | -------------------------------------------------------------------------------- /docs/public/social-card.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucaArgentieri/gsap-nuxt-module/0a226a7e334d8adfd8a507825131ea6ec6426c5b/docs/public/social-card.jpg -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { createConfigForNuxt } from '@nuxt/eslint-config/flat' 3 | 4 | // Run `npx @eslint/config-inspector` to inspect the resolved config interactively 5 | export default createConfigForNuxt({ 6 | features: { 7 | // Rules for module authors 8 | tooling: true, 9 | // Rules for formatting 10 | stylistic: true, 11 | }, 12 | dirs: { 13 | src: [ 14 | './playground', 15 | ], 16 | }, 17 | }) 18 | .append( 19 | // your custom flat config here... 20 | ) 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gsap-nuxt-module", 3 | "version": "1.1.2", 4 | "description": "GSAP integration for Nuxt.", 5 | "repository": "LucaArgentieri/gsap-nuxt-module", 6 | "author": "Luca Argentieri", 7 | "license": "MIT", 8 | "type": "module", 9 | "keywords": [ 10 | "nuxt", 11 | "nuxt-module", 12 | "gsap" 13 | ], 14 | "exports": { 15 | ".": { 16 | "types": "./dist/types.d.ts", 17 | "import": "./dist/module.mjs", 18 | "require": "./dist/module.cjs" 19 | } 20 | }, 21 | "main": "./dist/module.cjs", 22 | "types": "./dist/types.d.ts", 23 | "files": [ 24 | "dist" 25 | ], 26 | "scripts": { 27 | "prepack": "nuxt-module-build build", 28 | "dev": "nuxi dev playground", 29 | "dev:build": "nuxi build playground", 30 | "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground", 31 | "release": "npm run lint && npm run prepack && changelogen --release --patch && npm publish && git push --follow-tags", 32 | "lint": "eslint .", 33 | "test": "vitest run", 34 | "test:watch": "vitest watch", 35 | "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit" 36 | }, 37 | "dependencies": { 38 | "@nuxt/kit": "^3.15.4", 39 | "gsap": "^3.13.0" 40 | }, 41 | "devDependencies": { 42 | "@nuxt/devtools": "^2.1.0", 43 | "@nuxt/eslint-config": "^1.1.0", 44 | "@nuxt/module-builder": "^0.8.4", 45 | "@nuxt/schema": "^3.15.4", 46 | "@nuxt/test-utils": "^3.17.0", 47 | "@types/node": "latest", 48 | "changelogen": "^0.6.0", 49 | "eslint": "^9.21.0", 50 | "nuxt": "^3.15.4", 51 | "typescript": "~5.7.3", 52 | "vitest": "^3.0.7", 53 | "vue-tsc": "^2.2.4" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /playground/app.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 12 | -------------------------------------------------------------------------------- /playground/components/GSAPLogo.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 33 | -------------------------------------------------------------------------------- /playground/components/NuxtLogo.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 39 | -------------------------------------------------------------------------------- /playground/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | export default defineNuxtConfig({ 2 | modules: ['../src/module'], 3 | devtools: { enabled: true }, 4 | runtimeConfig: { 5 | gsap: process.env.NUXT_GSAP_TOKEN, 6 | }, 7 | compatibilityDate: '2025-02-26', 8 | gsap: { 9 | plugins: ['Draggable', 'EaselPlugin', 'Flip', 'MotionPathPlugin', 'Observer', 'PixiPlugin', 'ScrollToPlugin', 'ScrollTrigger', 'TextPlugin', 'RoughEase', 'ExpoScaleEase', 'SlowMo', 'CustomEase', 'InertiaPlugin', 'ScrollSmoother', 'GSDevTools', 'MotionPathHelper', 'SplitText', 'ScrambleTextPlugin', 'Physics2DPlugin', 'PhysicsPropsPlugin', 'CustomWiggle', 'CustomBounce'], 10 | }, 11 | }) 12 | -------------------------------------------------------------------------------- /playground/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "my-module-playground", 4 | "type": "module", 5 | "scripts": { 6 | "dev": "nuxi dev", 7 | "build": "nuxi build", 8 | "generate": "nuxi generate" 9 | }, 10 | "dependencies": { 11 | "nuxt": "^3.15.4" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /playground/pages/custom-bounce.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 35 | 36 | 54 | -------------------------------------------------------------------------------- /playground/pages/custom-ease.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 26 | 27 | 45 | -------------------------------------------------------------------------------- /playground/pages/custom-wiggle.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 20 | 21 | 39 | -------------------------------------------------------------------------------- /playground/pages/draggable.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 16 | 17 | 27 | -------------------------------------------------------------------------------- /playground/pages/easel-plugin.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 38 | 39 | 44 | -------------------------------------------------------------------------------- /playground/pages/expo-scale.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 21 | 22 | 40 | -------------------------------------------------------------------------------- /playground/pages/flip.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 41 | 42 | 68 | -------------------------------------------------------------------------------- /playground/pages/gsap-dev-tools.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 32 | 33 | 43 | -------------------------------------------------------------------------------- /playground/pages/index.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 19 | 20 | 30 | -------------------------------------------------------------------------------- /playground/pages/inertia.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 24 | 25 | 35 | -------------------------------------------------------------------------------- /playground/pages/motion-path-plugin.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 37 | 38 | 48 | -------------------------------------------------------------------------------- /playground/pages/observer.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 49 | 50 | 67 | -------------------------------------------------------------------------------- /playground/pages/physics-2d.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 24 | 25 | 35 | -------------------------------------------------------------------------------- /playground/pages/pixi-plugin.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 35 | 36 | 45 | -------------------------------------------------------------------------------- /playground/pages/rough-ease.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /playground/pages/scramble-text.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 22 | 23 | 38 | -------------------------------------------------------------------------------- /playground/pages/scroll-smoother.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 28 | 29 | 38 | -------------------------------------------------------------------------------- /playground/pages/scroll-to-plugin.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 24 | 25 | 42 | -------------------------------------------------------------------------------- /playground/pages/scroll-trigger.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 51 | 52 | 69 | -------------------------------------------------------------------------------- /playground/pages/slow-mo.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 21 | 22 | 30 | -------------------------------------------------------------------------------- /playground/pages/split-text.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 25 | 26 | 41 | -------------------------------------------------------------------------------- /playground/pages/text-plugin.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 25 | 26 | 41 | -------------------------------------------------------------------------------- /playground/server/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../.nuxt/tsconfig.server.json" 3 | } 4 | -------------------------------------------------------------------------------- /playground/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.nuxt/tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /src/module.ts: -------------------------------------------------------------------------------- 1 | import { fileURLToPath } from 'node:url' 2 | import { defineNuxtModule, addPlugin, createResolver, addImportsDir } from '@nuxt/kit' 3 | import type { gsapPlugins } from './runtime/gsap-plugins' 4 | 5 | export type GSAPPluginName = keyof typeof gsapPlugins 6 | 7 | export interface ModuleOptions { 8 | plugins?: GSAPPluginName[] 9 | } 10 | 11 | export default defineNuxtModule({ 12 | meta: { 13 | name: 'gsap-nuxt-module', 14 | configKey: 'gsap', 15 | compatibility: { 16 | nuxt: '>=3.0.0', 17 | }, 18 | }, 19 | defaults: { 20 | plugins: [], 21 | }, 22 | setup(_options, _nuxt) { 23 | const resolver = createResolver(import.meta.url) 24 | const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url)) 25 | 26 | _nuxt.options.runtimeConfig.public.gsap = { 27 | plugins: _options.plugins ?? [], 28 | } 29 | 30 | addPlugin(resolver.resolve('./runtime/plugin')) 31 | addImportsDir(resolver.resolve(runtimeDir, 'composables')) 32 | addImportsDir(resolver.resolve(runtimeDir, 'utils')) 33 | }, 34 | }) 35 | -------------------------------------------------------------------------------- /src/runtime/composables/createGsapComposable.ts: -------------------------------------------------------------------------------- 1 | import { createGsapComposable } from '../create-gsap-composable' 2 | 3 | // Scroll Plugins 4 | export const useScrollTrigger = createGsapComposable('ScrollTrigger') 5 | export const useScrollSmoother = createGsapComposable('ScrollSmoother') 6 | 7 | // Text Plugins 8 | export const useSplitText = createGsapComposable('SplitText') 9 | 10 | // SVG Plugins 11 | export const useMotionPathHelper = createGsapComposable('MotionPathHelper') 12 | 13 | // UI Plugins 14 | export const useDraggable = createGsapComposable('Draggable') 15 | export const useFlip = createGsapComposable('Flip') 16 | export const useObserver = createGsapComposable('Observer') 17 | 18 | // Other Plugins 19 | export const useGSDevTools = createGsapComposable('GSDevTools') 20 | 21 | // Eases 22 | export const useCustomEase = createGsapComposable('CustomEase') 23 | export const useCustomWiggle = createGsapComposable('CustomWiggle') 24 | export const useCustomBounce = createGsapComposable('CustomBounce') 25 | -------------------------------------------------------------------------------- /src/runtime/create-gsap-composable.ts: -------------------------------------------------------------------------------- 1 | import { useNuxtApp } from '#app' 2 | 3 | /** 4 | * Factory to create GSAP plugin composables. 5 | * @param pluginName - Name of the GSAP plugin as provided in nuxtApp injects. 6 | * @param fallbackMessage - Optional error message for missing plugin. 7 | */ 8 | export function createGsapComposable( 9 | pluginName: string, 10 | fallbackMessage?: string, 11 | ): () => T { 12 | return () => { 13 | const nuxtApp = useNuxtApp() 14 | const plugin = nuxtApp[`$${pluginName}`] as T | undefined 15 | if (!plugin) { 16 | throw new Error( 17 | fallbackMessage || `[use${pluginName}] ${pluginName} is not registered! Did you enable it in nuxt.config.ts?`, 18 | ) 19 | } 20 | return plugin 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/runtime/gsap-plugins.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This object contains lazy-loaded GSAP plugins for use in the application. 3 | * 4 | */ 5 | 6 | export const gsapPlugins = { 7 | // Scroll Plugins 8 | ScrollTrigger: () => import('gsap/ScrollTrigger').then(mod => mod.ScrollTrigger), 9 | ScrollToPlugin: () => import('gsap/ScrollToPlugin').then(mod => mod.ScrollToPlugin), 10 | ScrollSmoother: () => import('gsap/ScrollSmoother').then(mod => mod.ScrollSmoother), 11 | 12 | // Text Plugins 13 | SplitText: () => import('gsap/SplitText').then(mod => mod.SplitText), 14 | ScrambleTextPlugin: () => import('gsap/ScrambleTextPlugin').then(mod => mod.ScrambleTextPlugin), 15 | TextPlugin: () => import('gsap/TextPlugin').then(mod => mod.TextPlugin), 16 | 17 | // SVG Plugins 18 | DrawSVGPlugin: () => import('gsap/DrawSVGPlugin').then(mod => mod.DrawSVGPlugin), 19 | MorphSVGPlugin: () => import('gsap/MorphSVGPlugin').then(mod => mod.MorphSVGPlugin), 20 | MotionPathPlugin: () => import('gsap/MotionPathPlugin').then(mod => mod.MotionPathPlugin), 21 | MotionPathHelper: () => import('gsap/MotionPathHelper').then(mod => mod.MotionPathHelper), 22 | 23 | // UI Plugins 24 | Flip: () => import('gsap/Flip').then(mod => mod.Flip), 25 | Draggable: () => import('gsap/Draggable').then(mod => mod.Draggable), 26 | InertiaPlugin: () => import('gsap/InertiaPlugin').then(mod => mod.InertiaPlugin), 27 | Observer: () => import('gsap/Observer').then(mod => mod.Observer), 28 | 29 | // Other Plugins 30 | PixiPlugin: () => import('gsap/PixiPlugin').then(mod => mod.PixiPlugin), 31 | EaselPlugin: () => import('gsap/EaselPlugin').then(mod => mod.EaselPlugin), 32 | Physics2DPlugin: () => import('gsap/Physics2DPlugin').then(mod => mod.Physics2DPlugin), 33 | PhysicsPropsPlugin: () => import('gsap/PhysicsPropsPlugin').then(mod => mod.PhysicsPropsPlugin), 34 | GSDevTools: () => import('gsap/GSDevTools').then(mod => mod.GSDevTools), 35 | 36 | // Eases 37 | CustomEase: () => import('gsap/CustomEase').then(mod => mod.CustomEase), 38 | RoughEase: () => import('gsap/EasePack').then(mod => mod.RoughEase), 39 | ExpoScaleEase: () => import('gsap/EasePack').then(mod => mod.ExpoScaleEase), 40 | SlowMo: () => import('gsap/EasePack').then(mod => mod.SlowMo), 41 | CustomBounce: () => import('gsap/CustomBounce').then(mod => mod.CustomBounce), 42 | CustomWiggle: () => import('gsap/CustomWiggle').then(mod => mod.CustomWiggle), 43 | } 44 | -------------------------------------------------------------------------------- /src/runtime/plugin.ts: -------------------------------------------------------------------------------- 1 | import { gsap } from 'gsap' 2 | import { gsapPlugins } from './gsap-plugins' 3 | import { defineNuxtPlugin, useRuntimeConfig } from '#app' 4 | 5 | export default defineNuxtPlugin(async (nuxtApp) => { 6 | const config = useRuntimeConfig().public.gsap 7 | const pluginsToRegister = new Set(config.plugins || []) as Set 8 | 9 | const pluginDependencies: Partial> = { 10 | ScrollSmoother: ['ScrollTrigger'], 11 | CustomWiggle: ['CustomEase'], 12 | CustomBounce: ['CustomEase'], 13 | } 14 | 15 | const resolvedPlugins = new Set() 16 | const resolvePlugin = (plugin: keyof typeof gsapPlugins) => { 17 | if (resolvedPlugins.has(plugin)) return 18 | const deps = pluginDependencies[plugin] || [] 19 | deps.forEach(resolvePlugin) 20 | resolvedPlugins.add(plugin) 21 | } 22 | 23 | for (const plugin of pluginsToRegister) { 24 | resolvePlugin(plugin) 25 | } 26 | 27 | // Load and register all plugins 28 | for (const pluginName of resolvedPlugins) { 29 | const loader = gsapPlugins[pluginName] 30 | if (!loader) { 31 | throw new Error( 32 | `[gsap-nuxt-module] Plugin "${pluginName}" not found. Available plugins: ${Object.keys(gsapPlugins).join(', ')}`, 33 | ) 34 | } 35 | 36 | try { 37 | const plugin = await loader() 38 | gsap.registerPlugin(plugin) 39 | nuxtApp.provide(pluginName, plugin) 40 | } 41 | catch (err) { 42 | console.error(`[gsap-nuxt-module] Failed to load plugin "${pluginName}":`, err) 43 | } 44 | } 45 | }) 46 | -------------------------------------------------------------------------------- /src/runtime/utils/gsap-export.ts: -------------------------------------------------------------------------------- 1 | export { gsap } from 'gsap' 2 | -------------------------------------------------------------------------------- /test/basic.test.ts: -------------------------------------------------------------------------------- 1 | import { fileURLToPath } from 'node:url' 2 | import { describe, it, expect } from 'vitest' 3 | import { setup, $fetch } from '@nuxt/test-utils/e2e' 4 | 5 | describe('ssr', async () => { 6 | await setup({ 7 | rootDir: fileURLToPath(new URL('./fixtures/basic', import.meta.url)), 8 | }) 9 | 10 | it('renders the index page', async () => { 11 | // Get response to a server-rendered page with `$fetch`. 12 | const html = await $fetch('/') 13 | expect(html).toContain('
basic
') 14 | }) 15 | }) 16 | -------------------------------------------------------------------------------- /test/fixtures/basic/app.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 7 | -------------------------------------------------------------------------------- /test/fixtures/basic/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | import MyModule from '../../../src/module' 2 | 3 | export default defineNuxtConfig({ 4 | modules: [ 5 | MyModule, 6 | ], 7 | }) 8 | -------------------------------------------------------------------------------- /test/fixtures/basic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "basic", 4 | "type": "module" 5 | } 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.nuxt/tsconfig.json", 3 | "exclude": ["dist", "node_modules", "playground"] 4 | } 5 | --------------------------------------------------------------------------------