restructured (#6)

* restructured

* beta update

* matched number

* .5

* fixed lenis

* fixed watch

* multi lenis

* added single instance

Author: Slgoetz

README.md

@@ -1,11 +1,13 @@
 # Nuxt Lenis
+
 This is a Nuxt wrapper for [Lenis](https://lenis.studiofreight.com/) by [Studio Freight](https://studiofreight.com/). Thank them for the incredible tool.
 
 ## Getting Started
+
 1. `yarn add nuxt-lenis`
 2. Add `nuxt-lenis` to your modules in nuxt.config
 3. In your `app.vue` file, wrap the nuxt page in the lenis component
-   ```   
+   ```
       <lenis
          :options="LenisOptions"
          @initiated="foo"
@@ -15,3 +17,33 @@ This is a Nuxt wrapper for [Lenis](https://lenis.studiofreight.com/) by [Studio
       </lenis>
    ```
 
+## Composable
+
+```
+   const {scrollState, lenis} = useLenis()
+
+   watch(scrollState, (val) => {
+      console.log("scrollState", val);
+   },{deep:true});
+
+```
+### Multiple Instances
+If you have multiple instances of Lenis you can get each one via an ID set ont he Lenis component
+```
+   <lenis id="base" >
+      <NuxtPage />
+   </lenis>
+   
+   <lenis id="modal" >
+      <NuxtPage />
+   </lenis>
+
+   <!-- script -->
+   const {scrollState, lenis} = useLenis()
+
+   scrollState.value.base
+   lenis.value.base
+   scrollState.value.modal
+   lenis.value.modal
+
+```

package.json

@@ -1,6 +1,6 @@
 {
    "name": "nuxt-lenis",
-   "version": "1.0.8",
+   "version": "1.1.0-beta.13",
    "license": "MIT",
    "type": "module",
    "repository": {

playground/app.vue

@@ -16,16 +16,18 @@
 </template>
 
 <script setup>
+// const { scrollState } = useLenis();
 
+// watch(scrollState, (val) => {
+//    console.log(val);
+// });
 </script>
 
 <style>
 * {
    box-sizing: border-box;
-
-
 }
-body{
+body {
    margin: 0;
 }
 

playground/nuxt.config.ts

@@ -2,9 +2,7 @@ import { defineNuxtConfig } from 'nuxt/config'
 import MyModule from '..'
 
 export default defineNuxtConfig({
-  modules: [
-    MyModule
-  ],
+  modules: [MyModule],
   myModule: {
     addPlugin: true
   }

playground/pages/index.vue

@@ -10,31 +10,33 @@
       <div>
          <h2 @click="stop">STOP</h2>
          <h2 @click="start">START</h2>
+         <h2 @click="changeOptions">CHANGE</h2>
          <p>Playground for lenis scroll plugin for nuxt</p>
       </div>
 
-      <div></div>
-      <div></div>
-      <div></div>
+      <div />
+      <div />
+      <div />
       <!-- </div> -->
    </lenis>
 </template>
 
 <script setup>
-import { ref, reactive, inject, watch, onMounted } from "vue";
-
-const scrollState = inject("scrollState");
+import { ref, reactive, watch, onMounted } from "vue";
+import { useLenis } from "#imports";
+// import { useLenis } from "#app";
+const { scrollState, lenis:lenisN } = useLenis();
 const lenisRef = ref(null);
 const lenisVs = ref(false);
 const vsOptions = reactive({
-   wrapper: "#wrapper",
+   // wrapper: "#wrapper",
    touchMultiplier: 20,
    infinite: false,
 });
 
-watch(scrollState, (val) => {
-   console.log("scrollState", val);
-});
+// watch(()=>scrollState.value.wrapper, (val) => {
+//    console.log("scrollState", val);
+// },{deep:true});
 
 watch(vsOptions, (newVal) => {
    console.log("vsOptions newVal", newVal);

src/module.ts

@@ -1,47 +1,48 @@
 import {
-  addComponent,
-  defineNuxtModule,
-  addPlugin,
-  createResolver,
-  addImports
-} from '@nuxt/kit'
+   addComponent,
+   defineNuxtModule,
+   addPlugin,
+   createResolver,
+   addImports,
+} from "@nuxt/kit";
 
 export interface ModuleOptions {
    addPlugin: boolean;
 }
 
 export default defineNuxtModule<ModuleOptions>({
-  meta: {
-    name: '@nuxt-lenis',
-    configKey: 'nuxtLenis',
-    compatibility: {
-      nuxt: '^3.0.0'
-    }
-  },
-  defaults: {
-    addPlugin: true
-  },
-  setup (options, nuxt) {
-    const { resolve } = createResolver(import.meta.url)
-    addImports([
-      {
-        name: 'default',
-        as: 'Lenis',
-        from: '@studio-freight/lenis'
-      }
-    ])
-    addImports([
-      {
-        name: 'useScrollState',
-        as: 'useScrollState',
-        from: resolve('./runtime/composables/useScrollState')
-      }
-    ])
+   meta: {
+      name: "@milkshake/nuxt-lenis",
+      configKey: "lenis",
+      compatibility: {
+         nuxt: "^3.0.0",
+      },
+   },
+   defaults: {
+      addPlugin: true,
+   },
+   setup(options, nuxt) {
+      const { resolve } = createResolver(import.meta.url);
+      addImports([
+         {
+            name: "default",
+            as: "Lenis",
+            from: "@studio-freight/lenis",
+         },
+      ]);
+      addPlugin(resolve("./runtime/plugin"));
 
-    addPlugin(resolve('./runtime/plugin'))
-    addComponent({
-      name: 'lenis', // name of the component to be used in vue templates
-      filePath: resolve('./runtime/components', 'lenis.vue') // resolve(runtimeDir, 'components', 'MyComponent.vue')
-    })
-  }
-})
+      addImports([
+         {
+            name: "useLenis",
+            as: "useLenis",
+            from: resolve("./runtime/composables/useLenis"),
+         },
+      ]);
+
+      addComponent({
+         name: "Lenis", // name of the component to be used in vue templates
+         filePath: resolve("./runtime/components", "Lenis.vue"), // resolve(runtimeDir, 'components', 'MyComponent.vue')
+      });
+   },
+});