├── .circleci └── config.yml ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── babel.config.js ├── commitlint.config.js ├── example ├── nuxt.config.js └── pages │ └── index.vue ├── husky.config.js ├── jest.config.js ├── lib ├── module.js └── plugin.js ├── package.json ├── renovate.json ├── test └── module.test.js └── yarn.lock /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | jobs: 3 | build: 4 | docker: 5 | - image: circleci/node 6 | steps: 7 | # Checkout repository 8 | - checkout 9 | 10 | # Restore cache 11 | - restore_cache: 12 | key: yarn-cache-{{ checksum "yarn.lock" }} 13 | 14 | # Install dependencies 15 | - run: 16 | name: Install Dependencies 17 | command: NODE_ENV=dev yarn 18 | 19 | # Keep cache 20 | - save_cache: 21 | key: yarn-cache-{{ checksum "yarn.lock" }} 22 | paths: 23 | - "node_modules" 24 | 25 | # Lint 26 | - run: 27 | name: Lint 28 | command: yarn lint 29 | 30 | # Tests 31 | - run: 32 | name: Tests 33 | command: yarn jest 34 | 35 | # Coverage 36 | - run: 37 | name: Coverage 38 | command: yarn codecov 39 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_size = 2 6 | indent_style = space 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | # Common 2 | node_modules 3 | dist 4 | .nuxt 5 | coverage 6 | 7 | # Plugin 8 | lib/plugin.js 9 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parserOptions: { 4 | parser: 'babel-eslint', 5 | sourceType: 'module' 6 | }, 7 | extends: [ 8 | '@nuxtjs' 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.iml 3 | .idea 4 | *.lock 5 | yarn.lock 6 | *.log* 7 | .nuxt 8 | .vscode 9 | .DS_Store 10 | coverage 11 | dist 12 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | ### [0.1.4](https://github.com/pirony/nuxt-gsap/compare/v0.1.3...v0.1.4) (2020-03-21) 6 | 7 | ### [0.1.3](https://github.com/pirony/nuxt-gsap/compare/v0.1.2...v0.1.3) (2020-03-21) 8 | 9 | ### [0.1.2](https://github.com/pirony/nuxt-gsap/compare/v0.1.1...v0.1.2) (2020-03-21) 10 | 11 | ### 0.1.1 (2020-03-21) 12 | 13 | ### 0.0.4 (2020-03-21) 14 | 15 | ### [0.0.3](https://github.com/pirony/nuxt-gsap/compare/v0.0.1...v0.0.3) (2020-03-21) 16 | 17 | ### [0.0.4](https://github.com/pirony/nuxt-gsap/compare/v0.0.3...v0.0.4) (2020-03-21) 18 | 19 | ### [0.0.3](https://github.com/pirony/nuxt-gsap/compare/v0.0.2...v0.0.3) (2020-03-21) 20 | 21 | ### [0.0.2](https://github.com/pirony/nuxt-gsap/compare/v0.0.1...v0.0.2) (2020-03-21) 22 | 23 | ### 0.0.1 (2020-03-21) 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) pirony 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 | # nuxt-gsap 2 | 3 | [![npm version][npm-version-src]][npm-version-href] 4 | [![npm downloads][npm-downloads-src]][npm-downloads-href] 5 | [![Circle CI][circle-ci-src]][circle-ci-href] 6 | [![Codecov][codecov-src]][codecov-href] 7 | [![License][license-src]][license-href] 8 | 9 | > Easy GSAP ([https://greensock.com/](https://greensock.com/)) integration with Nuxt.js 10 | 11 | 12 | [📖 **Release Notes**](./CHANGELOG.md) 13 | 14 | ## Setup 15 | 16 | #### For Nuxt version > 2.9 17 | 1. Add `nuxt-gsap` dependency to your project 18 | 19 | ```bash 20 | yarn add --dev nuxt-gsap # or npm install -dev nuxt-gsap 21 | ``` 22 | 23 | 2. Add `nuxt-gsap` to the `buildModules` section of `nuxt.config.js` 24 | 25 | ```js 26 | { 27 | buildModules: [ 28 | 'nuxt-gsap', 29 | ] 30 | } 31 | ``` 32 | 33 | #### For Nuxt version < 2.9 34 | 1. Add `nuxt-gsap` dependency to your project 35 | 36 | ```bash 37 | yarn add nuxt-gsap # or npm install nuxt-gsap 38 | ``` 39 | 40 | 2. Add `nuxt-gsap` to the `modules` section of `nuxt.config.js` 41 | 42 | ```js 43 | { 44 | modules: [ 45 | 'nuxt-gsap' 46 | ] 47 | } 48 | ``` 49 | ## options 50 | 51 | You can pass different options using module inline options: 52 | 53 | ```js 54 | buildModules: [ 55 | 'nuxt-gsap', [ 56 | { 57 | imports: ['Back', 'Circ'] // Specify the gsap modules you want to import. By default, gsap & Linear are loaded 58 | } 59 | ] 60 | ] 61 | ``` 62 | 63 | or nuxtGsap section in nuxt.config.js 64 | 65 | ```js 66 | buildModules: [ 67 | 'nuxt-gsap' 68 | ], 69 | nuxtGsap: { 70 | imports: ['Back', 'Circ'] // Specify the gsap modules you want to import. By default, gsap & Linear are loaded 71 | } 72 | ``` 73 | 74 | ## Usage 75 | This module globally injects $gsap instance, meaning that you can access it anywhere using this.$gsap. For plugins, asyncData, fetch, nuxtServerInit and Middleware, you can access it from context.$gsap 76 | 77 | #### Example: 78 | 79 | index.vue 80 | 81 | ```js 82 | 87 | 88 | 99 | 105 | ``` 106 | 107 | ## Development 108 | 109 | 1. Clone this repository 110 | 2. Install dependencies using `yarn install` or `npm install` 111 | 3. Start development server using `npm run dev` 112 | 4. Visit http://localhost:3000 113 | 114 | ## License 115 | 116 | [MIT License](./LICENSE) 117 | 118 | Copyright (c) pirony 119 | 120 | 121 | [npm-version-src]: https://img.shields.io/npm/v/nuxt-gsap/latest.svg?style=flat-square 122 | [npm-version-href]: https://npmjs.com/package/nuxt-gsap 123 | 124 | [npm-downloads-src]: https://img.shields.io/npm/dt/nuxt-gsap.svg?style=flat-square 125 | [npm-downloads-href]: https://npmjs.com/package/nuxt-gsap 126 | 127 | [circle-ci-src]: https://img.shields.io/circleci/project/github/pirony/nuxt-gsap.svg?style=flat-square 128 | [circle-ci-href]: https://circleci.com/gh/pirony/nuxt-gsap 129 | 130 | [codecov-src]: https://img.shields.io/codecov/c/github/pirony/nuxt-gsap.svg?style=flat-square 131 | [codecov-href]: https://codecov.io/gh/pirony/nuxt-gsap 132 | 133 | [license-src]: https://img.shields.io/npm/l/nuxt-gsap.svg?style=flat-square 134 | [license-href]: https://npmjs.com/package/nuxt-gsap 135 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | [ 4 | '@babel/preset-env', { 5 | targets: { 6 | esmodules: true 7 | } 8 | } 9 | ] 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | '@commitlint/config-conventional' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /example/nuxt.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | rootDir: resolve(__dirname, '..'), 5 | buildDir: resolve(__dirname, '.nuxt'), 6 | srcDir: __dirname, 7 | render: { 8 | resourceHints: false 9 | }, 10 | buildModules: [ 11 | { handler: require('../') } 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /example/pages/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 24 | -------------------------------------------------------------------------------- /husky.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | hooks: { 3 | 'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS', 4 | 'pre-commit': 'yarn lint', 5 | 'pre-push': 'yarn lint' 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | testEnvironment: 'node', 3 | collectCoverage: true, 4 | collectCoverageFrom: [ 5 | 'lib/**/*.js', 6 | '!lib/plugin.js' 7 | ], 8 | moduleNameMapper: { 9 | '^~/(.*)$': '/lib/$1', 10 | '^~~$': '', 11 | '^@@$': '', 12 | '^@/(.*)$': '/lib/$1' 13 | }, 14 | transform: { 15 | '^.+\\.js$': 'babel-jest' 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /lib/module.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = function gsapNuxtModule (moduleOptions) { 4 | const options = { 5 | ...this.options['nuxt-gsap'], 6 | ...moduleOptions 7 | } 8 | const DefaultImports = ['gsap', 'Linear'] 9 | options.imports = [ 10 | ...(options.imports || []), 11 | ...DefaultImports 12 | ].join(', ') 13 | 14 | this.options.build.transpile.push('gsap') 15 | this.addPlugin({ 16 | src: resolve(__dirname, 'plugin.js'), 17 | fileName: 'nuxt-gsap.js', 18 | options 19 | }) 20 | } 21 | 22 | module.exports.meta = require('../package.json') 23 | -------------------------------------------------------------------------------- /lib/plugin.js: -------------------------------------------------------------------------------- 1 | import {<%= options.imports %>} from "gsap" 2 | const activated = [ 3 | gsap, <%= options.imports %> 4 | ] 5 | export default async (context, inject) => { 6 | const OptionsObject = { 7 | <%= options.imports %> 8 | } 9 | Object.keys(OptionsObject).forEach(key => gsap[key] = OptionsObject[key] ) 10 | inject('gsap', gsap) 11 | } 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-gsap", 3 | "version": "0.1.4", 4 | "description": "Add GSAP to nuxt", 5 | "repository": "pirony/nuxt-gsap", 6 | "license": "MIT", 7 | "contributors": [ 8 | { 9 | "name": "pirony " 10 | } 11 | ], 12 | "files": [ 13 | "lib" 14 | ], 15 | "main": "lib/module.js", 16 | "scripts": { 17 | "dev": "nuxt example", 18 | "lint": "eslint --ext .js,.vue example lib test", 19 | "release": "yarn test && standard-version && git push --follow-tags && npm publish", 20 | "test": "yarn lint && jest" 21 | }, 22 | "dependencies": { 23 | "gsap": "^3.2.5" 24 | }, 25 | "devDependencies": { 26 | "@babel/core": "latest", 27 | "@babel/preset-env": "latest", 28 | "@commitlint/cli": "latest", 29 | "@commitlint/config-conventional": "latest", 30 | "@nuxtjs/eslint-config": "latest", 31 | "@nuxtjs/module-test-utils": "latest", 32 | "babel-eslint": "latest", 33 | "babel-jest": "latest", 34 | "codecov": "latest", 35 | "eslint": "latest", 36 | "husky": "latest", 37 | "jest": "latest", 38 | "nuxt": "^2.12.0", 39 | "standard-version": "latest" 40 | }, 41 | "publishConfig": { 42 | "access": "public" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "@nuxtjs" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /test/module.test.js: -------------------------------------------------------------------------------- 1 | const { setup, loadConfig, get } = require('@nuxtjs/module-test-utils') 2 | 3 | describe('module', () => { 4 | let nuxt 5 | 6 | beforeAll(async () => { 7 | ({ nuxt } = (await setup(loadConfig(__dirname, '../../example')))) 8 | }, 60000) 9 | 10 | afterAll(async () => { 11 | await nuxt.close() 12 | }) 13 | 14 | test('render', async () => { 15 | const html = await get('/') 16 | expect(html).toContain('Works!') 17 | }) 18 | }) 19 | --------------------------------------------------------------------------------