├── .npmrc
├── playground
    ├── tsconfig.json
    ├── server
    │   └── tsconfig.json
    ├── nuxt.config.ts
    ├── package.json
    ├── pages
    │   ├── index.vue
    │   └── horizontal-scroll.vue
    └── app.vue
├── .vscode
    └── settings.json
├── test
    ├── fixtures
    │   └── basic
    │   │   ├── package.json
    │   │   ├── app.vue
    │   │   └── nuxt.config.ts
    └── basic.test.ts
├── tsconfig.json
├── src
    ├── runtime
    │   ├── locomotive.ts
    │   └── locomotive.client.ts
    └── module.ts
├── .editorconfig
├── CHANGELOG.md
├── eslint.config.mjs
├── .gitignore
├── package.json
└── README.md


/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | 


--------------------------------------------------------------------------------
/playground/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./.nuxt/tsconfig.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "eslint.experimental.useFlatConfig": true
3 | }
4 | 


--------------------------------------------------------------------------------
/playground/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/test/fixtures/basic/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "private": true,
3 |   "name": "basic",
4 |   "type": "module"
5 | }
6 | 


--------------------------------------------------------------------------------
/test/fixtures/basic/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>basic</div>
3 | </template>
4 | 
5 | <script setup>
6 | </script>
7 | 


--------------------------------------------------------------------------------
/playground/nuxt.config.ts:
--------------------------------------------------------------------------------
1 | export default defineNuxtConfig({
2 |   modules: ['../src/module'],
3 |   devtools: { enabled: true },
4 | })
5 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./.nuxt/tsconfig.json",
3 |   "exclude": [
4 |     "dist",
5 |     "node_modules",
6 |     "playground",
7 |   ]
8 | }
9 | 


--------------------------------------------------------------------------------
/src/runtime/locomotive.ts:
--------------------------------------------------------------------------------
1 | import { defineNuxtPlugin } from '#app'
2 | 
3 | export default defineNuxtPlugin(({ vueApp }) => {
4 |   vueApp.directive('locomotive', {})
5 | })
6 | 


--------------------------------------------------------------------------------
/test/fixtures/basic/nuxt.config.ts:
--------------------------------------------------------------------------------
1 | import MyModule from '../../../src/module'
2 | 
3 | export default defineNuxtConfig({
4 |   modules: [
5 |     MyModule,
6 |   ],
7 | })
8 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/playground/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "nuxt-locomotive-scroll-playground",
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "dev": "nuxi dev",
 7 |     "build": "nuxi build",
 8 |     "generate": "nuxi generate"
 9 |   },
10 |   "dependencies": {
11 |     "nuxt": "^3.11.2"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | 
 3 | 
 4 | ## v0.0.1
 5 | 
 6 | 
 7 | ### 🩹 Fixes
 8 | 
 9 | - Tsconfig path ([d96f90d](https://github.com/arashsheyda/nuxt-locomotive-scroll/commit/d96f90d))
10 | 
11 | ### 🏡 Chore
12 | 
13 | - Update readme ([82f3fe5](https://github.com/arashsheyda/nuxt-locomotive-scroll/commit/82f3fe5))
14 | 
15 | ### ❤️ Contributors
16 | 
17 | - Arash <arashi.sheyda@gmail.com>
18 | 
19 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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('<div>basic</div>')
14 |   })
15 | })
16 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/src/module.ts:
--------------------------------------------------------------------------------
 1 | import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
 2 | 
 3 | // Module options TypeScript interface definition
 4 | export interface ModuleOptions {}
 5 | 
 6 | export default defineNuxtModule<ModuleOptions>({
 7 |   meta: {
 8 |     name: 'nuxt-locomotive-scroll',
 9 |     configKey: 'locomotive',
10 |   },
11 |   // Default configuration options of the Nuxt module
12 |   defaults: {},
13 |   setup(_options, _nuxt) {
14 |     const { resolve } = createResolver(import.meta.url)
15 | 
16 |     addPlugin({
17 |       src: resolve('runtime/locomotive.client'),
18 |       name: 'locomotive-scroll',
19 |       mode: 'client',
20 |     })
21 | 
22 |     // to resolve "ERROR [worker] Cannot read properties of undefined (reading 'getSSRProps')" error
23 |     addPlugin({
24 |       src: resolve('runtime/locomotive'),
25 |       name: 'locomotive-scroll',
26 |       mode: 'server',
27 |     })
28 |   },
29 | })
30 | 


--------------------------------------------------------------------------------
/src/runtime/locomotive.client.ts:
--------------------------------------------------------------------------------
 1 | import LocomotiveScroll from 'locomotive-scroll'
 2 | import 'locomotive-scroll/dist/locomotive-scroll.css'
 3 | import type { InstanceOptions } from 'locomotive-scroll'
 4 | 
 5 | import { defineNuxtPlugin } from 'nuxt/app'
 6 | 
 7 | export default defineNuxtPlugin({
 8 |   name: 'locomotive-scroll',
 9 |   setup({ vueApp }) {
10 |     vueApp.directive<HTMLElement, InstanceOptions>('locomotive', {
11 |       mounted(el, binding) {
12 |         const scroll = new LocomotiveScroll({
13 |           el: el,
14 |           smooth: true,
15 |           ...binding.value,
16 |         })
17 | 
18 |         el.locomotive = scroll
19 |       },
20 |       beforeUnmount(el) {
21 |         el.locomotive.destroy()
22 |         el.locomotive = undefined
23 |       },
24 |     })
25 |   },
26 | })
27 | 
28 | declare module '@vue/runtime-core' {
29 |   interface GlobalDirective {
30 |     locomotive: Directive<HTMLElement, InstanceOptions>
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/playground/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     v-locomotive
 4 |     class="example vertical"
 5 |   >
 6 |     <header data-scroll-section>
 7 |       <h1>
 8 |         Vertical<br>
 9 |         Scroll
10 |       </h1>
11 |     </header>
12 |     <div
13 |       class="example-section"
14 |       data-scroll-section
15 |     >
16 |       <div class="example-content">
17 |         <div
18 |           class="example-big-square"
19 |           data-scroll
20 |           data-scroll-speed="-0.5"
21 |         />
22 |         <div
23 |           class="example-small-square"
24 |           data-scroll
25 |           data-scroll-speed="2.5"
26 |         />
27 |       </div>
28 |     </div>
29 |     <div
30 |       class="example-section"
31 |       data-scroll-section
32 |     >
33 |       <div class="example-content">
34 |         <div
35 |           class="example-small-square"
36 |           data-scroll
37 |           data-scroll-speed="2.5"
38 |         />
39 |         <div
40 |           class="example-big-square"
41 |           data-scroll
42 |           data-scroll-speed="-0.5"
43 |         />
44 |       </div>
45 |     </div>
46 |     <div
47 |       class="example-section"
48 |       data-scroll-section
49 |     >
50 |       <div class="example-content">
51 |         <div
52 |           class="example-big-square"
53 |           data-scroll
54 |           data-scroll-speed="-0.5"
55 |         />
56 |         <div
57 |           class="example-small-square"
58 |           data-scroll
59 |           data-scroll-speed="2.5"
60 |         />
61 |       </div>
62 |     </div>
63 |     <footer data-scroll-section>
64 |       <NuxtLink to="/horizontal-scroll/">
65 |         Go to Horizontal Scroll
66 |       </NuxtLink>
67 |     </footer>
68 |   </div>
69 | </template>
70 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-locomotive-scroll",
 3 |   "version": "0.0.1",
 4 |   "description": "A Nuxt module to easily integrate Locomotive Scroll into your Nuxt application.",
 5 |   "repository": "arashsheyda/nuxt-locomotive-scroll",
 6 |   "license": "MIT",
 7 |   "type": "module",
 8 |   "exports": {
 9 |     ".": {
10 |       "types": "./dist/types.d.ts",
11 |       "import": "./dist/module.mjs",
12 |       "require": "./dist/module.cjs"
13 |     }
14 |   },
15 |   "main": "./dist/module.cjs",
16 |   "types": "./dist/types.d.ts",
17 |   "files": [
18 |     "dist"
19 |   ],
20 |   "scripts": {
21 |     "prepack": "nuxt-module-build build",
22 |     "dev": "nuxi dev playground",
23 |     "dev:build": "nuxi build playground",
24 |     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
25 |     "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
26 |     "lint": "eslint .",
27 |     "test": "vitest run",
28 |     "test:watch": "vitest watch",
29 |     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
30 |   },
31 |   "dependencies": {
32 |     "@nuxt/kit": "^3.11.2",
33 |     "locomotive-scroll": "^4.1.4"
34 |   },
35 |   "devDependencies": {
36 |     "@nuxt/devtools": "^1.2.0",
37 |     "@nuxt/eslint-config": "^0.3.10",
38 |     "@nuxt/module-builder": "^0.6.0",
39 |     "@nuxt/schema": "^3.11.2",
40 |     "@nuxt/test-utils": "^3.12.1",
41 |     "@types/locomotive-scroll": "^4.1.3",
42 |     "@types/node": "^20.12.11",
43 |     "changelogen": "^0.5.5",
44 |     "eslint": "^9.2.0",
45 |     "nuxt": "^3.11.2",
46 |     "sass": "^1.77.2",
47 |     "typescript": "latest",
48 |     "vitest": "^1.6.0",
49 |     "vue-tsc": "^2.0.16"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/playground/pages/horizontal-scroll.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     v-locomotive="{
 4 |       direction: 'horizontal',
 5 |       smartphone: {
 6 |         smooth: true,
 7 |         direction: 'horizontal',
 8 |       },
 9 |       tablet: {
10 |         smooth: true,
11 |         direction: 'horizontal',
12 |       },
13 |     }"
14 |     class="example horizontal"
15 |   >
16 |     <header data-scroll-section>
17 |       <h1>
18 |         Horizontal<br>
19 |         Scroll
20 |       </h1>
21 |     </header>
22 |     <div
23 |       class="example-section"
24 |       data-scroll-section
25 |     >
26 |       <div class="example-content">
27 |         <div
28 |           class="example-big-square"
29 |           data-scroll
30 |           data-scroll-speed="-0.5"
31 |         />
32 |         <div
33 |           class="example-small-square"
34 |           data-scroll
35 |           data-scroll-speed="2"
36 |         />
37 |       </div>
38 |     </div>
39 |     <div
40 |       class="example-section"
41 |       data-scroll-section
42 |     >
43 |       <div class="example-content">
44 |         <div
45 |           class="example-big-square"
46 |           data-scroll
47 |           data-scroll-speed="-0.5"
48 |         />
49 |         <div
50 |           class="example-small-square"
51 |           data-scroll
52 |           data-scroll-speed="2"
53 |         />
54 |       </div>
55 |     </div>
56 |     <div
57 |       class="example-section"
58 |       data-scroll-section
59 |     >
60 |       <div class="example-content">
61 |         <div
62 |           class="example-big-square"
63 |           data-scroll
64 |           data-scroll-speed="-0.5"
65 |         />
66 |         <div
67 |           class="example-small-square"
68 |           data-scroll
69 |           data-scroll-speed="2"
70 |         />
71 |       </div>
72 |     </div>
73 |   </div>
74 | </template>
75 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | > thanks to [starter-kit-nuxt-locomotive-scroll nuxt v2](https://github.com/DidoMarchet/starter-kit-nuxt-locomotive-scroll) by [DidoMarchet](https://github.com/DidoMarchet/)
  3 | 
  4 | # Nuxt Locomotive Scroll
  5 | 
  6 | A Nuxt module to easily integrate [Locomotive Scroll](https://github.com/locomotivemtl/locomotive-scroll) into your Nuxt application.
  7 | 
  8 | [![npm version][npm-version-src]][npm-version-href]
  9 | [![npm downloads][npm-downloads-src]][npm-downloads-href]
 10 | [![License][license-src]][license-href]
 11 | [![Nuxt][nuxt-src]][nuxt-href]
 12 | 
 13 | 
 14 | - [✨ &nbsp;Release Notes](/CHANGELOG.md)
 15 | - [🏀 Online playground](https://stackblitz.com/github/arashsheyda/nuxt-locomotive-scroll?file=playground%2Fapp.vue)
 16 | - [📖 &nbsp;Documentation](https://docs.arashsheyda.me/nuxt-locomotive-scroll)
 17 | 
 18 | ## Features
 19 | 
 20 | - 🚀 &nbsp;Easy to use
 21 | - 🎨 &nbsp;Customizable
 22 | 
 23 | ## Quick Setup
 24 | 
 25 | Install the module to your Nuxt application with one command:
 26 | 
 27 | ```bash
 28 | npx nuxi module add locomotive-scroll
 29 | ```
 30 | 
 31 | That's it! You can now use Nuxt Locomotive Scroll in your Nuxt app ✨ or you can install it manually:
 32 | 
 33 | ```bash
 34 | # npm
 35 | npm install nuxt-locomotive-scroll
 36 | 
 37 | # yarn
 38 | yarn add nuxt-locomotive-scroll
 39 | 
 40 | # pnpm
 41 | pnpm add nuxt-locomotive-scroll
 42 | ```
 43 | 
 44 | and add `nuxt-locomotive-scroll` to the `modules` section of `nuxt.config`.
 45 | 
 46 | ```ts
 47 | export default defineNuxtConfig({
 48 |   modules: [
 49 |     'nuxt-locomotive-scroll',
 50 |   ],
 51 | })
 52 | ```
 53 | 
 54 | ## Usage
 55 | 
 56 | Just add `v-locomotive` directive to the element you want to animate.
 57 | 
 58 | ```vue
 59 | <template>
 60 |   <div v-locomotive>
 61 |     <!-- Your content here -->
 62 |   </div>
 63 | </template>
 64 | ```
 65 | 
 66 | you can check the [playground](https://github.com/arashsheyda/nuxt-locomotive-scroll/tree/main/playground) for more examples.
 67 | 
 68 | ## Contribution
 69 | 
 70 | <details>
 71 |   <summary>Local development</summary>
 72 |   
 73 |   ```bash
 74 |   # Install dependencies
 75 |   npm install
 76 |   
 77 |   # Generate type stubs
 78 |   npm run dev:prepare
 79 |   
 80 |   # Develop with the playground
 81 |   npm run dev
 82 |   
 83 |   # Build the playground
 84 |   npm run dev:build
 85 |   
 86 |   # Run ESLint
 87 |   npm run lint
 88 |   
 89 |   # Run Vitest
 90 |   npm run test
 91 |   npm run test:watch
 92 |   
 93 |   # Release new version
 94 |   npm run release
 95 |   ```
 96 | 
 97 | </details>
 98 | 
 99 | 
100 | <!-- Badges -->
101 | [npm-version-src]: https://img.shields.io/npm/v/nuxt-locomotive-scroll/latest.svg?style=flat&colorA=020420&colorB=00DC82
102 | [npm-version-href]: https://npmjs.com/package/nuxt-locomotive-scroll
103 | 
104 | [npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-locomotive-scroll.svg?style=flat&colorA=020420&colorB=00DC82
105 | [npm-downloads-href]: https://npmjs.com/package/nuxt-locomotive-scroll
106 | 
107 | [license-src]: https://img.shields.io/npm/l/nuxt-locomotive-scroll.svg?style=flat&colorA=020420&colorB=00DC82
108 | [license-href]: https://npmjs.com/package/nuxt-locomotive-scroll
109 | 
110 | [nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
111 | [nuxt-href]: https://nuxt.com
112 | 


--------------------------------------------------------------------------------
/playground/app.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <NuxtPage />
  3 | </template>
  4 | 
  5 | <style lang="scss">
  6 | *{
  7 |   box-sizing: border-box;
  8 | }
  9 | 
 10 | body {
 11 |   background-image: url(data:image/png;base64,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);
 12 |   background-color: #9B9B9B;
 13 |   margin: 0;
 14 |   font-family: 'Barlow', sans-serif;
 15 |   font-weight: 400;
 16 | }
 17 | 
 18 | h1, h2{
 19 |   font-weight: 400;
 20 | }
 21 | 
 22 | .example.horizontal{
 23 |   width: 500vw;
 24 |   height: 100vh;
 25 |   overflow: hidden;
 26 |   display: flex;
 27 | }
 28 | 
 29 | header{
 30 |   padding: 12.5vw 6.25vw;
 31 |   h1{
 32 |     font-size: 11vw;
 33 |     line-height: 1;
 34 |     margin: 0;
 35 |     color: #000;
 36 |   }
 37 | }
 38 | 
 39 | footer{
 40 |   padding: 12.5vw 6.25vw;
 41 |   a{
 42 |     font-size: 5vw;
 43 |     color: #000;
 44 |   }
 45 | }
 46 | 
 47 | .example-content{
 48 |   display: flex;
 49 |   flex-wrap: wrap;
 50 |   align-items: center;
 51 |   justify-content: space-around;
 52 |   width: 100%;
 53 |   height: 100%;
 54 | }
 55 | 
 56 | .example-big-square{
 57 |   width: 50vw;
 58 |   padding-top: 50vw;
 59 |   background-color: #000;
 60 | }
 61 | 
 62 | .example-small-square{
 63 |   width: 25vw;
 64 |   padding-top: 25vw;
 65 |   background-color: #000;
 66 | }
 67 | 
 68 | .example-big-image{
 69 |   img{
 70 |     width: 100%;
 71 |     width: 50vw;
 72 |     height: auto;
 73 |     display: block;
 74 |   }
 75 | }
 76 | 
 77 | .example.horizontal header{
 78 |   width: 100vw;
 79 |   height: 100vh;
 80 |   display: flex;
 81 |   align-items: center;
 82 |   padding: 0 12.5vw ;
 83 | }
 84 | 
 85 | .example.horizontal footer{
 86 |   width: 100vw;
 87 |   height: 100vh;
 88 |   display: flex;
 89 |   align-items: center;
 90 |   padding: 0 12.5vw ;
 91 | }
 92 | 
 93 | .example.horizontal .example-section{
 94 |   width: 100vw;
 95 | }
 96 | 
 97 | .example.vertical .example-section, .example.vertical footer {
 98 |   padding-top: 50vw;
 99 | }
100 | 
101 | .example-fade-text{
102 |   padding: 12.5vw 6.25vw;
103 |   h2{
104 |     font-size: 5vw;
105 |   }
106 | }
107 | </style>
108 | 


--------------------------------------------------------------------------------