Skip to content
This repository was archived by the owner on Jan 7, 2026. It is now read-only.

Commit c86a081

Browse files
SlgoetzSlgoetz
committed
release 1.0
1 parent 9739b04 commit c86a081

File tree

9 files changed

+4258
-2440
lines changed

9 files changed

+4258
-2440
lines changed

‎.nuxtrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
imports.autoImport=false
2-
typescript.includeWorkspace=true
2+
typescript.includeWorkspace=true

‎package.json‎

Lines changed: 47 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,49 @@
11
{
2-
"name": "nuxt-lenis",
3-
"version": "1.0.0",
4-
"license": "MIT",
5-
"type": "module",
6-
"exports": {
7-
".": {
8-
"import": "./dist/module.mjs",
9-
"require": "./dist/module.cjs"
10-
}
11-
},
12-
"main": "./dist/module.cjs",
13-
"types": "./dist/types.d.ts",
14-
"files": [
15-
"dist"
16-
],
17-
"scripts": {
18-
"prepack": "nuxt-module-build",
19-
"dev": "nuxi dev playground",
20-
"dev:build": "nuxi build playground",
21-
"dev:prepare": "nuxt-module-build --stub && nuxi prepare playground"
22-
},
23-
"dependencies": {
24-
"@nuxt/kit": "^3.0.0",
25-
"@studio-freight/lenis": "^0.2.28"
26-
},
27-
"devDependencies": {
28-
"@nuxt/module-builder": "^0.2.1",
29-
"@nuxt/schema": "^3.0.0",
30-
"@nuxtjs/eslint-config-typescript": "^12.0.0",
31-
"eslint": "^8.29.0",
32-
"nuxt": "^3.0.0"
33-
}
2+
"name": "nuxt-lenis",
3+
"version": "1.0.0",
4+
"license": "MIT",
5+
"type": "module",
6+
"repository": {
7+
"type" : "git",
8+
"url" : "https://github.com/MilkshakeStudio/nuxt-lenis.git"
9+
},
10+
"exports": {
11+
".": {
12+
"types": "./dist/types.d.ts",
13+
"import": "./dist/module.mjs",
14+
"require": "./dist/module.cjs"
15+
}
16+
},
17+
"main": "./dist/module.cjs",
18+
"types": "./dist/types.d.ts",
19+
"files": [
20+
"dist"
21+
],
22+
"scripts": {
23+
"prepack": "nuxt-module-build",
24+
"dev": "nuxi dev playground",
25+
"dev:build": "nuxi build playground",
26+
"dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
27+
"release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
28+
"lint": "eslint .",
29+
"test": "vitest run",
30+
"test:watch": "vitest watch"
31+
},
32+
"dependencies": {
33+
"@nuxt/kit": "^3.6.5",
34+
"@studio-freight/lenis": "^1.0.19"
35+
},
36+
"devDependencies": {
37+
"@nuxt/devtools": "latest",
38+
"@nuxt/eslint-config": "^0.1.1",
39+
"@nuxt/module-builder": "^0.4.0",
40+
"@nuxt/schema": "^3.6.5",
41+
"@nuxt/test-utils": "^3.6.5",
42+
"@nuxtjs/eslint-config-typescript": "^12.0.0",
43+
"@types/node": "^18.17.1",
44+
"changelogen": "^0.5.4",
45+
"eslint": "^8.46.0",
46+
"nuxt": "^3.6.5",
47+
"vitest": "^0.33.0"
48+
}
3449
}

‎playground/app.vue‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,44 @@
11
<template>
2-
<lenis :options="vsOptions" id="test" @scroll="scrollEmitter" ref="lenisRef">
3-
<h1>hello world</h1>
4-
<div></div>
5-
<div></div>
6-
<div></div>
7-
<div></div>
8-
<div></div>
9-
<div></div>
10-
<div></div>
11-
<div></div>
12-
<div></div>
13-
<div></div>
14-
<div></div>
15-
<div></div>
16-
<div></div>
17-
</lenis>
2+
<lenis id="test" ref="lenisRef" :options="vsOptions" @scroll="scrollEmitter">
3+
<h1>hello world</h1>
4+
<div />
5+
<div />
6+
<div />
7+
<div />
8+
<div />
9+
<div />
10+
<div />
11+
<div />
12+
<div />
13+
<div />
14+
<div />
15+
<div />
16+
<div />
17+
</lenis>
1818
</template>
1919

2020
<script setup>
21-
import { ref, inject, watch, onMounted } from "vue";
22-
const scrollState = inject("scrollState");
23-
const lenisRef = ref(null);
21+
import { ref, inject, watch, onMounted } from 'vue'
22+
const scrollState = inject('scrollState')
23+
const lenisRef = ref(null)
2424
const vsOptions = ref({
25-
duration: 3,
26-
direction: "Horizontal",
27-
touchMultiplier: 20,
28-
infinite: false,
29-
});
25+
duration: 3,
26+
direction: 'Horizontal',
27+
touchMultiplier: 20,
28+
infinite: false
29+
})
3030
3131
watch(scrollState, async (val) => {
32-
console.log("scrollState", val);
33-
});
32+
console.log('scrollState', val)
33+
})
3434
3535
const scrollEmitter = (val) => {
36-
console.log("scrollEmitter", val);
37-
};
36+
console.log('scrollEmitter', val)
37+
}
3838
3939
onMounted(() => {
40-
console.log("ref", lenisRef.value);
41-
});
40+
console.log('ref', lenisRef.value)
41+
})
4242
</script>
4343

4444
<style>

‎src/module.ts‎

Lines changed: 40 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,48 @@
1-
import { fileURLToPath } from "url";
1+
import { fileURLToPath } from 'url'
22
import {
3-
addComponent,
4-
defineNuxtModule,
5-
addPlugin,
6-
createResolver,
7-
addImports,
8-
} from "@nuxt/kit";
3+
addComponent,
4+
defineNuxtModule,
5+
addPlugin,
6+
createResolver,
7+
addImports
8+
} from '@nuxt/kit'
99

1010
export interface ModuleOptions {
1111
addPlugin: boolean;
1212
}
1313

1414
export default defineNuxtModule<ModuleOptions>({
15-
meta: {
16-
name: "@nuxt-lenis",
17-
configKey: "nuxtLenis",
18-
compatibility: {
19-
nuxt: "^3.0.0",
20-
},
21-
},
22-
defaults: {
23-
addPlugin: true,
24-
},
25-
async setup(options, nuxt) {
26-
// if (options.addPlugin) { }
27-
const { resolve } = createResolver(import.meta.url);
28-
const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
29-
nuxt.options.build.transpile.push(runtimeDir);
15+
meta: {
16+
name: '@nuxt-lenis',
17+
configKey: 'nuxtLenis',
18+
compatibility: {
19+
nuxt: '^3.0.0'
20+
}
21+
},
22+
defaults: {
23+
addPlugin: true
24+
},
25+
async setup (options, nuxt) {
26+
const { resolve } = createResolver(import.meta.url)
27+
addImports([
28+
{
29+
name: 'default',
30+
as: 'Lenis',
31+
from: '@studio-freight/lenis'
32+
}
33+
])
34+
addImports([
35+
{
36+
name: 'useScrollState',
37+
as: 'useScrollState',
38+
from: resolve('./runtime/composables/useScrollState')
39+
}
40+
])
3041

31-
32-
addImports([
33-
{
34-
name: "default",
35-
as: "Lenis",
36-
from: "@studio-freight/lenis",
37-
},
38-
// { name: 'useScrollState', as: 'useScrollState', from: join(runtimeDir, 'composables') },
39-
]);
40-
41-
addPlugin(resolve(runtimeDir, "plugin"));
42-
addComponent({
43-
name: "lenis", // name of the component to be used in vue templates
44-
filePath: resolve(runtimeDir, "components", "lenis.vue"), // resolve(runtimeDir, 'components', 'MyComponent.vue')
45-
});
46-
},
47-
});
42+
addPlugin(resolve('./runtime/plugin'))
43+
addComponent({
44+
name: 'lenis', // name of the component to be used in vue templates
45+
filePath: resolve('./runtime/components', 'lenis.vue') // resolve(runtimeDir, 'components', 'MyComponent.vue')
46+
})
47+
}
48+
})

‎src/runtime/components/lenis.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@ import {
1313
inject,
1414
onUpdated,
1515
} from "vue";
16-
1716
export default defineComponent({
1817
props: ["options"],
1918
setup({ options }, { emit }) {
2019
const Lenis = inject("Lenis");
2120
const setScrollState = inject("setScrollState");
21+
const setLenis = inject("setLenis");
2222
const lenisVS = ref(0);
2323
const lenisContent = ref(null);
2424
/**
@@ -61,6 +61,8 @@ export default defineComponent({
6161
setScrollState(scrollData);
6262
emit("scroll", scrollData);
6363
});
64+
setLenis(lenisVS.value);
65+
emit("initiated", { lenis: lenisVS.value });
6466
requestAnimationFrame(raf);
6567
} else {
6668
throw new Error("Process Client is false");
@@ -81,6 +83,7 @@ export default defineComponent({
8183
};
8284
return {
8385
destroyLenis,
86+
initLenis,
8487
lenisContent,
8588
lenisVS,
8689
};

‎src/runtime/composables/scrollState.js‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎src/runtime/composables/useScrollState.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { readonly } from 'vue'
2+
import { useState } from '#app'
3+
4+
export function useScrollState (initialState = false) {
5+
const scrollState = useState('scrollState', () => initialState)
6+
const lenisVS = useState('lenisVS', () => initialState)
7+
8+
const setScrollState = (newScrollState) => {
9+
scrollState.value = newScrollState
10+
}
11+
const setLenis = (virtualScroll) => {
12+
lenisVS.value = virtualScroll
13+
}
14+
15+
return {
16+
scrollState: readonly(scrollState),
17+
setScrollState,
18+
setLenis
19+
}
20+
}

‎src/runtime/plugin.ts‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import { defineNuxtPlugin } from "#app";
1+
import { defineNuxtPlugin } from '#app'
22
// import Lenis from "@studio-freight/lenis";
3-
import { useScrollState } from './composables/scrollState'
3+
import { useScrollState } from './composables/useScrollState'
44
import { Lenis } from '#imports'
55

66
export default defineNuxtPlugin((nuxtApp) => {
7-
const [scrollState, setScrollState] = useScrollState();
8-
9-
nuxtApp.vueApp.provide("Lenis", Lenis);
10-
nuxtApp.vueApp.provide("setScrollState", setScrollState);
11-
nuxtApp.vueApp.provide("scrollState", scrollState);
12-
});
7+
const { scrollState, setScrollState, setLenis } = useScrollState()
8+
9+
nuxtApp.vueApp.provide('Lenis', Lenis)
10+
nuxtApp.vueApp.provide('setScrollState', setScrollState)
11+
nuxtApp.vueApp.provide('setLenis', setLenis)
12+
nuxtApp.vueApp.provide('scrollState', scrollState)
13+
})

0 commit comments

Comments
 (0)