├── .DS_Store
├── .babelrc
├── .editorconfig
├── .env.example
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── LICENSE
├── LocomotiveScroll
    ├── .DS_Store
    ├── component
    │   ├── index.vue
    │   └── style.scss
    └── plugin
    │   └── index.js
├── README.md
├── app.html
├── assets
    └── README.md
├── components
    └── README.md
├── configuration
    ├── .DS_Store
    ├── alias.js
    ├── apollo
    │   ├── config.js
    │   └── index.js
    ├── axios.js
    ├── build.js
    ├── buildDir.js
    ├── buildModules.js
    ├── cli.js
    ├── components.js
    ├── css.js
    ├── dev.js
    ├── dir.js
    ├── env.js
    ├── extendPlugins.js
    ├── generate.js
    ├── globalName.js
    ├── google-tag-manager.js
    ├── head
    │   ├── fonts.js
    │   └── index.js
    ├── hooks.js
    ├── i18n.js
    ├── image.js
    ├── loading.js
    ├── loadingIndicator.js
    ├── modules.js
    ├── modulesDir.js
    ├── pageTransition.js
    ├── plugins.js
    ├── pwa.js
    ├── render.js
    ├── rootDir.js
    ├── router.js
    ├── runtimeConfig.js
    ├── server.js
    ├── sitemap.js
    ├── srcDir.js
    ├── ssr.js
    ├── styleResources.js
    ├── target.js
    ├── telemetry.js
    ├── vueConfig.js
    ├── watch.js
    └── watchers.js
├── jest.config.js
├── jsconfig.json
├── layouts
    ├── README.md
    ├── default.vue
    └── error.vue
├── middleware
    └── README.md
├── netlify.toml
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
    ├── README.md
    ├── demo.scss
    ├── horizontal-scroll.vue
    ├── image-loads.vue
    ├── index.vue
    ├── on-call.vue
    └── scroll-trigger.vue
├── plugins
    ├── README.md
    ├── both.js
    ├── client.js
    └── server.js
├── static
    ├── README.md
    └── sw.js
├── store
    ├── README.md
    └── app.js
├── stylelint.config.js
└── test
    └── Logo.spec.js


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DidoMarchet/starter-kit-nuxt-locomotive-scroll/5b9c4228c491234c9a836b3b10b943fe81238f1b/.DS_Store


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "test": {
 4 |       "presets": [
 5 |         [
 6 |           "@babel/preset-env",
 7 |           {
 8 |             "targets": {
 9 |               "node": "current"
10 |             }
11 |           }
12 |         ]
13 |       ]
14 |     }
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 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 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | GOOGLE_TAG_MANAGER_ID = ''
2 | NUXT_ENV_BASE_URL = ''
3 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | ../utils
2 | ../library


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true,
 6 |   },
 7 |   parserOptions: {
 8 |     parser: 'babel-eslint',
 9 |     ecmaVersion: 2020,
10 |     sourceType: 'module',
11 |   },
12 |   extends: [
13 |     '@nuxtjs',
14 |     'prettier',
15 |     'plugin:prettier/recommended',
16 |     'plugin:nuxt/recommended',
17 |   ],
18 |   plugins: ['prettier'],
19 |   // add your custom rules here
20 |   rules: {
21 |     'no-console': 'off',
22 |     'no-restricted-syntax': [
23 |       'error',
24 |       {
25 |         selector:
26 |           "CallExpression[callee.object.name='console'][callee.property.name!=/^(log|warn|error|info|trace)$/]",
27 |         message: 'Unexpected property on console object was called',
28 |       },
29 |     ],
30 |   },
31 | }
32 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | # Directory for instrumented libs generated by jscoverage/JSCover
 19 | lib-cov
 20 | 
 21 | # Coverage directory used by tools like istanbul
 22 | coverage
 23 | *.lcov
 24 | 
 25 | # nyc test coverage
 26 | .nyc_output
 27 | 
 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 29 | .grunt
 30 | 
 31 | # Bower dependency directory (https://bower.io/)
 32 | bower_components
 33 | 
 34 | # node-waf configuration
 35 | .lock-wscript
 36 | 
 37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 38 | build/Release
 39 | 
 40 | # Dependency directories
 41 | node_modules/
 42 | jspm_packages/
 43 | 
 44 | # TypeScript v1 declaration files
 45 | typings/
 46 | 
 47 | # TypeScript cache
 48 | *.tsbuildinfo
 49 | 
 50 | # Optional npm cache directory
 51 | .npm
 52 | 
 53 | # Optional eslint cache
 54 | .eslintcache
 55 | 
 56 | # Microbundle cache
 57 | .rpt2_cache/
 58 | .rts2_cache_cjs/
 59 | .rts2_cache_es/
 60 | .rts2_cache_umd/
 61 | 
 62 | # Optional REPL history
 63 | .node_repl_history
 64 | 
 65 | # Output of 'npm pack'
 66 | *.tgz
 67 | 
 68 | # Yarn Integrity file
 69 | .yarn-integrity
 70 | 
 71 | # dotenv environment variables file
 72 | .env
 73 | .env.test
 74 | 
 75 | # parcel-bundler cache (https://parceljs.org/)
 76 | .cache
 77 | 
 78 | # Next.js build output
 79 | .next
 80 | 
 81 | # Nuxt.js build / generate output
 82 | .nuxt
 83 | dist
 84 | 
 85 | # Gatsby files
 86 | .cache/
 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
 88 | # https://nextjs.org/blog/next-9-1#public-directory-support
 89 | # public
 90 | 
 91 | # vuepress build output
 92 | .vuepress/dist
 93 | 
 94 | # Serverless directories
 95 | .serverless/
 96 | 
 97 | # FuseBox cache
 98 | .fusebox/
 99 | 
100 | # DynamoDB Local files
101 | .dynamodb/
102 | 
103 | # TernJS port file
104 | .tern-port
105 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true
4 | }
5 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Davide Marchet
 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 | 


--------------------------------------------------------------------------------
/LocomotiveScroll/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DidoMarchet/starter-kit-nuxt-locomotive-scroll/5b9c4228c491234c9a836b3b10b943fe81238f1b/LocomotiveScroll/.DS_Store


--------------------------------------------------------------------------------
/LocomotiveScroll/component/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-locomotive="{ options }" class="js-locomotive">
 3 |     <slot />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'LocomotiveScroll',
10 |   directives: {
11 |     locomotive: {
12 |       inserted(el, binding, vnode) {
13 |         vnode.context.locomotive = new vnode.context.LocomotiveScroll({
14 |           el,
15 |           ...binding.value.options,
16 |         })
17 |         vnode.context.locomotive.on('scroll', (e) => {
18 |           vnode.context.onScroll(e)
19 |           vnode.context.$emit('scroll')
20 |         })
21 |         vnode.context.$emit('init')
22 |       },
23 |       unbind(el, binding, vnode) {
24 |         vnode.context.locomotive.destroy()
25 |         vnode.context.locomotive = undefined
26 |       },
27 |     },
28 |   },
29 |   props: {
30 |     gettedOptions: {
31 |       type: Object,
32 |       default: () => {},
33 |     },
34 |   },
35 |   data: () => ({
36 |     locomotive: undefined,
37 |     defaultOptions: {
38 |       smooth: true,
39 |     },
40 |   }),
41 |   computed: {
42 |     options() {
43 |       return { ...this.defaultOptions, ...this.gettedOptions }
44 |     },
45 |   },
46 |   /**
47 |    *  You can remove mounted hook if you don't needs custom updates
48 |    *  Call this.$nuxt.$emit('update-locomotive') wherever you want
49 |    */
50 |   mounted() {
51 |     this.$nuxt.$on('update-locomotive', () => {
52 |       this?.locomotive?.update()
53 |     })
54 |   },
55 |   methods: {
56 |     onScroll(e) {
57 |       if (typeof this.$store._mutations['app/setScroll'] !== 'undefined') {
58 |         this.$store.commit('app/setScroll', {
59 |           isScrolling: this.locomotive.scroll.isScrolling,
60 |           limit: { ...e.limit },
61 |           ...e.scroll, // x, y
62 |         })
63 |       }
64 |     },
65 |   },
66 | }
67 | </script>
68 | 
69 | <style lang="scss">
70 | @import './style.scss';
71 | </style>
72 | 


--------------------------------------------------------------------------------
/LocomotiveScroll/component/style.scss:
--------------------------------------------------------------------------------
1 | .has-scroll-smooth body{
2 |   overflow: hidden;
3 | }
4 | 
5 | .has-scroll-smooth .js-locomotive {
6 |   min-height: 100%;
7 |   width: 100%;
8 | }


--------------------------------------------------------------------------------
/LocomotiveScroll/plugin/index.js:
--------------------------------------------------------------------------------
 1 | import LocomotiveScroll from 'locomotive-scroll'
 2 | import 'locomotive-scroll/dist/locomotive-scroll.css'
 3 | 
 4 | const install = (Vue) => {
 5 |   Vue.prototype.LocomotiveScroll = LocomotiveScroll
 6 | }
 7 | 
 8 | export default install
 9 | 
10 | if (typeof window !== 'undefined' && window.Vue) {
11 |   window.Vue.use(install)
12 |   if (install.installed) {
13 |     install.installed = false
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # How to Locomotive Scroll and Nuxt
  2 | 
  3 | :heart:  Every one loves smooth scrolling!
  4 | 
  5 | :zzz:  But sometimes working with Javascript frameworks and DOM can be boring and love fades away.
  6 | 
  7 | :package:  With this simple starter kit you can have fun with [Locomotive Scroll](https://github.com/locomotivemtl/locomotive-scroll) and [Nuxt](https://github.com/nuxt/nuxt.js) without giving it a second though. 
  8 | 
  9 | 
 10 | ### Table of content:
 11 | - [Plugin](#plugin)
 12 | - [Component](#component)
 13 |   - [Markup](#markup)
 14 |   - [Directive](#directive)
 15 | - [Implementation](#implementation)
 16 | - [Gotchas](#gotchas)
 17 | - [Examples](#examples)
 18 | 
 19 | You can try this starter kit by cloning this repo and running:
 20 | 
 21 | ``` bash
 22 | # install dependencies
 23 | $ npm install
 24 | 
 25 | # run dev enviroment
 26 | $ npm run dev
 27 | 
 28 | # generate static project
 29 | $ npm run generate
 30 | ```
 31 | 
 32 | # Plugin
 33 | First of all we setup the plugin enabling Locomotive Scroll instance works globally both in our component and for your own purposes.
 34 | 
 35 | In [`/LocomotiveScroll/plugin/index.js`](https://github.com/DidoMarchet/starter-kit-nuxt-locomotive-scroll/blob/main/LocomotiveScroll/plugin/index.js) we create the plugin:
 36 | ```{js filename="ch1/test_one.py"}
 37 | import LocomotiveScroll from 'locomotive-scroll'
 38 | import 'locomotive-scroll/dist/locomotive-scroll.css'
 39 | 
 40 | const install = (Vue) => {
 41 |   Vue.prototype.LocomotiveScroll = LocomotiveScroll
 42 | }
 43 | 
 44 | export default install
 45 | 
 46 | if (typeof window !== 'undefined' && window.Vue) {
 47 |   window.Vue.use(install)
 48 |   if (install.installed) {
 49 |     install.installed = false
 50 |   }
 51 | }
 52 | ```
 53 | After the setup,  it will be used in [`/plugins/client.js`](https://github.com/DidoMarchet/starter-kit-nuxt-locomotive-scroll/blob/main/plugins/client.js).
 54 | 
 55 | `/plugins/client.js` works with `mode: 'client'` in the Nuxt [plugins configuration](https://github.com/DidoMarchet/starter-kit-nuxt-locomotive-scroll/blob/main/configuration/plugins/index.js) .
 56 | 
 57 | # Component
 58 | This component is an useful wrap for our Locomotive Scroll implementation.
 59 | 
 60 | Below are the main steps of the implementation.
 61 | 
 62 | Complete code can be found here [`/LocomotiveScroll/component/index.js`](https://github.com/DidoMarchet/starter-kit-nuxt-locomotive-scroll/blob/main/LocomotiveScroll/component/index.vue).
 63 | 
 64 | ### Markup
 65 | ``` html
 66 | <div
 67 |   v-locomotive="{ options }"
 68 |   class="js-locomotive"
 69 | >
 70 |   <slot />
 71 | </div>
 72 | ```
 73 | The `v-locomotive` directive gets access to low-level DOM.
 74 | 
 75 | It takes one argument `options`.
 76 | 
 77 | `options` is a computed obtained merging the `defaultOption` data property with the `gettedOptions` prop.
 78 | 
 79 | `defaultOption` and `gettedOptions`contain the Locomotive Scroll [instance options](https://github.com/locomotivemtl/locomotive-scroll#instance-options).
 80 | ```js
 81 | computed: {
 82 |   options () {
 83 |     // this.defaultOptions = { smooth: true }
 84 |     // this.gettedOptions = { offset: ['30%',0], direction: 'horizontal' }
 85 |     return { ...this.defaultOptions, ...this.gettedOptions }
 86 |   }
 87 | }
 88 | ```
 89 | 
 90 | Through the `slot` element we're able to pass content to the component from each page.
 91 | 
 92 | ### Directive
 93 | 
 94 | ```js
 95 | directives: {
 96 |   locomotive: {
 97 |     inserted (el, binding, vnode) {
 98 |       vnode.context.locomotive = new vnode.context.LocomotiveScroll({ el, ...binding.value.options })
 99 |       vnode.context.locomotive.on('scroll', (e) => {
100 |         vnode.context.onScroll(e)
101 |         vnode.context.$emit('scroll')
102 |       })
103 |       vnode.context.$emit('init')
104 |     },
105 |     unbind (el, binding, vnode) {
106 |       vnode.context.locomotive.destroy()
107 |       vnode.context.locomotive = undefined
108 |     }
109 |   }
110 | }
111 | ```
112 | In the `inserted` hook we create the new instance of Locomotive Scroll from the [plugin](#plugin) previously created and we assign it to `locomotive` data property.
113 | The `inserted` hook guarantees the parent presence.
114 | 
115 | Once initialized we listen to scroll event.
116 | 
117 | Each time scroll event is fired we call `onScroll` method.
118 | 
119 | `onScroll` takes as parameter the scroll instance and uses this data to fill the store ([`/store/app.js`](https://github.com/DidoMarchet/starter-kit-nuxt-locomotive-scroll/blob/main/store/app.js)) making the state of the scroll accessible and usable in all our application.
120 | 
121 | ```js
122 | methods: {
123 |   onScroll (e) {
124 |     if (typeof this.$store._mutations['app/setScroll'] !== 'undefined') {
125 |       this.$store.commit('app/setScroll', {
126 |         isScrolling: this.locomotive.scroll.isScrolling,
127 |         limit: { ...e.limit },
128 |         ...e.scroll // x, y
129 |       })
130 |     }
131 |   }
132 | }
133 | ```
134 | 
135 | # Implementation
136 | Before using our component in the page we declare it globally in [`/plugins/both.js`](https://github.com/DidoMarchet/starter-kit-nuxt-locomotive-scroll/blob/main/plugins/both.js). 
137 | `/plugins/both.js` is called in the Nuxt [plugins configuration](https://github.com/DidoMarchet/starter-kit-nuxt-locomotive-scroll/blob/main/configuration/plugins/index.js).
138 | 
139 | Once the plugin is global we can use it in our page or components in this way ([`/pages/index.vue`](https://github.com/DidoMarchet/starter-kit-nuxt-locomotive-scroll/blob/main/pages/index.vue)):
140 | 
141 | ```html
142 | <template>
143 |   <LocomotiveScroll 
144 |     ref="scroller" 
145 |     :getted-options="{
146 |       offset: ['30%',0],
147 |       direction: 'horizontal'
148 |       // Other options
149 |     }">
150 |   
151 |     <!-- My Content:
152 |     Html elements, Components...
153 |     -->
154 |     
155 |   </LocomotiveScroll>
156 | </template>
157 | ```
158 | You can access to locomotive scroll instance using `this.$refs.scroller.locomotive`.
159 | 
160 | # Gotchas
161 | Reactive elements alter the state of the application and DOM's elements could change.
162 | 
163 | This changes can take place in nested components and updating Locomotive Scroll could be complex.
164 | 
165 | We can use the [`$nuxt`](https://nuxtjs.org/docs/2.x/internals-glossary/$nuxt) helper and emit a global event 
166 | ```js
167 | this.$nuxt.$emit('update-locomotive')
168 | ``` 
169 | and listen it in the `mounted` hook in [`/LocomotiveScroll/component/index.vue`](https://github.com/DidoMarchet/starter-kit-nuxt-locomotive-scroll/blob/main/LocomotiveScroll/component/index.vue) component:
170 | 
171 | ``` js
172 | mounted () {
173 |   this.$nuxt.$on('update-locomotive', () => {
174 |     this?.locomotive?.update() // ?. is the Optional Chaining operator (https://www.joshwcomeau.com/operator-lookup?match=optional-chaining)
175 |   })
176 | }
177 | ```
178 | 
179 | :pill: Alternatively, you may use this (smart) solution https://github.com/locomotivemtl/locomotive-scroll/issues/408 provided by [MikeHantha](https://github.com/MikeHantha) 
180 | 
181 | # Examples
182 | ### Basic Scroll
183 | [https://starter-kit-nuxt-locomotive-scroll.netlify.app/](https://starter-kit-nuxt-locomotive-scroll.netlify.app/)
184 | ### Horizontal Scroll
185 | [https://starter-kit-nuxt-locomotive-scroll.netlify.app/horizontal-scroll/](https://starter-kit-nuxt-locomotive-scroll.netlify.app/horizontal-scroll/)
186 | ### Gsap Scroll Trigger
187 | [https://starter-kit-nuxt-locomotive-scroll.netlify.app/scroll-trigger/](https://starter-kit-nuxt-locomotive-scroll.netlify.app/scroll-trigger/)
188 | 
189 | ### Image Loads
190 | [https://starter-kit-nuxt-locomotive-scroll.netlify.app/image-loads/](https://starter-kit-nuxt-locomotive-scroll.netlify.app/image-loads/)
191 | 
192 | ### On Call Function
193 | [https://starter-kit-nuxt-locomotive-scroll.netlify.app/on-call/](https://starter-kit-nuxt-locomotive-scroll.netlify.app/on-call/)
194 | 
195 | # Thanks
196 | If you find this repo useful and you saved time, well... let's take a coffee together!
197 | 
198 | :coffee: [https://www.buymeacoffee.com/davide_marchet](https://www.buymeacoffee.com/davide_marchet)
199 | 


--------------------------------------------------------------------------------
/app.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html {{ HTML_ATTRS }}>
3 |   <head {{ HEAD_ATTRS }}>
4 |     {{ HEAD }}
5 |   </head>
6 |   <body {{ BODY_ATTRS }}>
7 |     {{ APP }}
8 |   </body>
9 | </html>


--------------------------------------------------------------------------------
/assets/README.md:
--------------------------------------------------------------------------------
1 | # ASSETS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
8 | 


--------------------------------------------------------------------------------
/components/README.md:
--------------------------------------------------------------------------------
1 | # COMPONENTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | The components directory contains your Vue.js Components.
6 | 
7 | _Nuxt.js doesn't supercharge these components._
8 | 


--------------------------------------------------------------------------------
/configuration/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DidoMarchet/starter-kit-nuxt-locomotive-scroll/5b9c4228c491234c9a836b3b10b943fe81238f1b/configuration/.DS_Store


--------------------------------------------------------------------------------
/configuration/alias.js:
--------------------------------------------------------------------------------
1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-alias
2 | export default {
3 |   alias: {},
4 | }
5 | 


--------------------------------------------------------------------------------
/configuration/apollo/config.js:
--------------------------------------------------------------------------------
1 | export default (context) => {
2 |   return {}
3 | }
4 | 


--------------------------------------------------------------------------------
/configuration/apollo/index.js:
--------------------------------------------------------------------------------
1 | // https://github.com/nuxt-community/apollo-module
2 | export default {
3 |   apollo: {
4 |     clientConfigs: {
5 |       default: '~/configuration/apollo/config.js',
6 |     },
7 |   },
8 | }
9 | 


--------------------------------------------------------------------------------
/configuration/axios.js:
--------------------------------------------------------------------------------
1 | // https://axios.nuxtjs.org/options/
2 | export default {
3 |   axios: {},
4 | }
5 | 


--------------------------------------------------------------------------------
/configuration/build.js:
--------------------------------------------------------------------------------
1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build
2 | export default {
3 |   build: {
4 |     transpile: ['gsap'],
5 |     extend(config, ctx) {},
6 |   },
7 | }
8 | 


--------------------------------------------------------------------------------
/configuration/buildDir.js:
--------------------------------------------------------------------------------
1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-builddir
2 | export default {
3 |   // buildDir: 'nuxt-dist'
4 | }
5 | 


--------------------------------------------------------------------------------
/configuration/buildModules.js:
--------------------------------------------------------------------------------
 1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-modules#buildmodules
 2 | export default {
 3 |   buildModules: [
 4 |     // https://go.nuxtjs.dev/eslint
 5 |     '@nuxtjs/eslint-module',
 6 |     // https://go.nuxtjs.dev/stylelint
 7 |     '@nuxtjs/stylelint-module',
 8 |     '@nuxtjs/dotenv',
 9 |     '@nuxt/image',
10 |   ],
11 | }
12 | 


--------------------------------------------------------------------------------
/configuration/cli.js:
--------------------------------------------------------------------------------
1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-cli
2 | export default {
3 |   cli: {
4 |     // badgeMessages: ['Hello World!']
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/configuration/components.js:
--------------------------------------------------------------------------------
1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-components
2 | export default {
3 |   components: true,
4 | }
5 | 


--------------------------------------------------------------------------------
/configuration/css.js:
--------------------------------------------------------------------------------
1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-css
2 | export default {
3 |   css: [],
4 |   // css: ['~/assets/css/main.css', '~/assets/css/animations.scss']
5 | }
6 | 


--------------------------------------------------------------------------------
/configuration/dev.js:
--------------------------------------------------------------------------------
1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-dev
2 | export default {
3 |   dev: process.env.NODE_ENV !== 'production',
4 | }
5 | 


--------------------------------------------------------------------------------
/configuration/dir.js:
--------------------------------------------------------------------------------
1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-dir
2 | export default {
3 |   dir: {
4 |     // pages: 'views' // Nuxt will look for the views/ instead of the pages/ folder
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/configuration/env.js:
--------------------------------------------------------------------------------
1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-env
2 | export default {
3 |   env: {
4 |     // baseURL: process.env.BASE_URL
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/configuration/extendPlugins.js:
--------------------------------------------------------------------------------
 1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-extend-plugins
 2 | export default {
 3 |   /* extendPlugins(plugins) {
 4 |     const pluginIndex = plugins.findIndex(
 5 |       ({ src }) => src === '~/plugins/shouldBeFirst.js'
 6 |     )
 7 |     const shouldBeFirstPlugin = plugins[pluginIndex]
 8 | 
 9 |     plugins.splice(pluginIndex, 1)
10 |     plugins.unshift(shouldBeFirstPlugin)
11 | 
12 |     return plugins
13 |   } */
14 | }
15 | 


--------------------------------------------------------------------------------
/configuration/generate.js:
--------------------------------------------------------------------------------
 1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-generate
 2 | export default {
 3 |   generate: {
 4 |     fallback: true,
 5 |     routes: () => {
 6 |       return []
 7 |     },
 8 |   },
 9 | }
10 | 


--------------------------------------------------------------------------------
/configuration/globalName.js:
--------------------------------------------------------------------------------
1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-global-name
2 | export default {
3 |   // globalName: 'myCustomName'
4 | }
5 | 


--------------------------------------------------------------------------------
/configuration/google-tag-manager.js:
--------------------------------------------------------------------------------
1 | // https://github.com/nuxt-community/gtm-module
2 | export default {
3 |   gtm: {
4 |     id: process.env.GOOGLE_TAG_MANAGER_ID,
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/configuration/head/fonts.js:
--------------------------------------------------------------------------------
 1 | export default [
 2 |   {
 3 |     rel: 'preconnect',
 4 |     href: 'https://fonts.gstatic.com',
 5 |     crossorigin: 'anonymous',
 6 |   },
 7 |   {
 8 |     rel: 'preload',
 9 |     as: 'font',
10 |     href: 'https://fonts.googleapis.com/css2?family=Barlow&display=swap',
11 |     crossorigin: 'anonymous',
12 |   },
13 |   // { rel: 'preload', as="font", href="/assets/my-local-font", type="font/woff2", crossorigin="anonymous" }
14 | ]
15 | 


--------------------------------------------------------------------------------
/configuration/head/index.js:
--------------------------------------------------------------------------------
 1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-head
 2 | import fonts from './fonts.js'
 3 | 
 4 | export default {
 5 |   head: {
 6 |     htmlAttrs: {},
 7 |     meta: [
 8 |       { name: 'charset', content: 'utf-8' },
 9 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
10 |     ],
11 |     link: [
12 |       ...fonts,
13 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
14 |     ],
15 |     script: [],
16 |   },
17 | }
18 | 


--------------------------------------------------------------------------------
/configuration/hooks.js:
--------------------------------------------------------------------------------
1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-hooks
2 | export default {
3 |   hooks: {
4 |     /* build: {
5 |       done(builder) {}
6 |     } */
7 |   },
8 | }
9 | 


--------------------------------------------------------------------------------
/configuration/i18n.js:
--------------------------------------------------------------------------------
1 | // https://i18n.nuxtjs.org/
2 | export default {
3 |   i18n: {},
4 | }
5 | 


--------------------------------------------------------------------------------
/configuration/image.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   image: {
 3 |     screens: {
 4 |       sm: 320,
 5 |       md: 750,
 6 |       lg: 1000,
 7 |       xl: 1920,
 8 |     },
 9 |   },
10 | }
11 | 


--------------------------------------------------------------------------------
/configuration/loading.js:
--------------------------------------------------------------------------------
1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-loading
2 | export default {
3 |   loading: {
4 |     // color: '#fff'
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/configuration/loadingIndicator.js:
--------------------------------------------------------------------------------
1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-loading-indicator
2 | export default {
3 |   loadingIndicator: {
4 |     /* name: 'circle',
5 |     color: '#3B8070',
6 |     background: 'white' */
7 |   },
8 | }
9 | 


--------------------------------------------------------------------------------
/configuration/modules.js:
--------------------------------------------------------------------------------
 1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-modules
 2 | export default {
 3 |   modules: [
 4 |     '@nuxtjs/style-resources',
 5 |     // https://go.nuxtjs.dev/axios
 6 |     '@nuxtjs/axios',
 7 |     '@nuxtjs/apollo',
 8 |     '@nuxtjs/sitemap',
 9 |     '@nuxtjs/gtm',
10 |     '@nuxtjs/i18n',
11 |     // https://go.nuxtjs.dev/pwa
12 |     '@nuxtjs/pwa',
13 |   ],
14 | }
15 | 


--------------------------------------------------------------------------------
/configuration/modulesDir.js:
--------------------------------------------------------------------------------
1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-modulesdir
2 | export default {
3 |   // modulesDir: ['../../node_modules']
4 | }
5 | 


--------------------------------------------------------------------------------
/configuration/pageTransition.js:
--------------------------------------------------------------------------------
1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-transition
2 | export default {
3 |   // pageTransition: 'page'
4 | }
5 | 


--------------------------------------------------------------------------------
/configuration/plugins.js:
--------------------------------------------------------------------------------
 1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-plugins
 2 | export default {
 3 |   plugins: [
 4 |     { src: '~/plugins/both.js' },
 5 |     { src: '~/plugins/client.js', mode: 'client' },
 6 |     { src: '~/plugins/server.js', mode: 'server' },
 7 |   ],
 8 |   // plugins: ['~/plugins/url-helpers.js']
 9 | }
10 | 


--------------------------------------------------------------------------------
/configuration/pwa.js:
--------------------------------------------------------------------------------
1 | // https://pwa.nuxtjs.org/
2 | export default {
3 |   pwa: {
4 |     /* manifest: {
5 |       lang: 'en',
6 |     }, */
7 |   },
8 | }
9 | 


--------------------------------------------------------------------------------
/configuration/render.js:
--------------------------------------------------------------------------------
 1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-render
 2 | export default {
 3 |   render: {
 4 |     /* bundleRenderer: {
 5 |       directives: {
 6 |         custom1(el, dir) {
 7 |           // something ...
 8 |         }
 9 |       }
10 |     } */
11 |   },
12 | }
13 | 


--------------------------------------------------------------------------------
/configuration/rootDir.js:
--------------------------------------------------------------------------------
1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-rootdir
2 | export default {
3 |   // rootDir: process.cwd()
4 | }
5 | 


--------------------------------------------------------------------------------
/configuration/router.js:
--------------------------------------------------------------------------------
1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-router
2 | export default {
3 |   router: {
4 |     middleware: [],
5 |     // trailingSlash: true,
6 |   },
7 | }
8 | 


--------------------------------------------------------------------------------
/configuration/runtimeConfig.js:
--------------------------------------------------------------------------------
1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-runtime-config
2 | export default {
3 |   publicRuntimeConfig: {},
4 |   privateRuntimeConfig: {},
5 | }
6 | 


--------------------------------------------------------------------------------
/configuration/server.js:
--------------------------------------------------------------------------------
1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-server
2 | export default {
3 |   server: {
4 |     host: '0.0.0.0',
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/configuration/sitemap.js:
--------------------------------------------------------------------------------
 1 | // https://sitemap.nuxtjs.org/
 2 | export default {
 3 |   sitemap: {
 4 |     hostname: process.env.NUXT_ENV_BASE_URL,
 5 |     gzip: true,
 6 |     routes: () => {
 7 |       return []
 8 |     },
 9 |   },
10 | }
11 | 


--------------------------------------------------------------------------------
/configuration/srcDir.js:
--------------------------------------------------------------------------------
1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-srcdir
2 | export default {
3 |   // srcDir: 'client/'
4 | }
5 | 


--------------------------------------------------------------------------------
/configuration/ssr.js:
--------------------------------------------------------------------------------
1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-ssr
2 | export default {
3 |   ssr: true,
4 | }
5 | 


--------------------------------------------------------------------------------
/configuration/styleResources.js:
--------------------------------------------------------------------------------
1 | // https://github.com/nuxt-community/style-resources-module
2 | export default {
3 |   styleResources: {
4 |     scss: [],
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/configuration/target.js:
--------------------------------------------------------------------------------
1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-target
2 | export default {
3 |   target: 'static',
4 | }
5 | 


--------------------------------------------------------------------------------
/configuration/telemetry.js:
--------------------------------------------------------------------------------
1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-telemetry
2 | export default {
3 |   // telemetry: false
4 | }
5 | 


--------------------------------------------------------------------------------
/configuration/vueConfig.js:
--------------------------------------------------------------------------------
 1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-vue-config
 2 | export default {
 3 |   vue: {
 4 |     /* config: {
 5 |       productionTip: true,
 6 |       devtools: false
 7 |     } */
 8 |   },
 9 | }
10 | 


--------------------------------------------------------------------------------
/configuration/watch.js:
--------------------------------------------------------------------------------
1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-watch
2 | export default {
3 |   // watch: ['~/custom/*.js']
4 | }
5 | 


--------------------------------------------------------------------------------
/configuration/watchers.js:
--------------------------------------------------------------------------------
 1 | // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-watchers
 2 | export default {
 3 |   watchers: {
 4 |     /* webpack: {
 5 |       aggregateTimeout: 300,
 6 |       poll: 1000
 7 |     } */
 8 |   },
 9 | }
10 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   moduleNameMapper: {
 3 |     '^@/(.*)$': '<rootDir>/$1',
 4 |     '^~/(.*)$': '<rootDir>/$1',
 5 |     '^vue$': 'vue/dist/vue.common.js',
 6 |   },
 7 |   moduleFileExtensions: ['js', 'vue', 'json'],
 8 |   transform: {
 9 |     '^.+\\.js$': 'babel-jest',
10 |     '.*\\.(vue)$': 'vue-jest',
11 |   },
12 |   collectCoverage: true,
13 |   collectCoverageFrom: [
14 |     '<rootDir>/components/**/*.vue',
15 |     '<rootDir>/pages/**/*.vue',
16 |   ],
17 | }
18 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "paths": {
 5 |       "~/*": ["./*"],
 6 |       "@/*": ["./*"],
 7 |       "~~/*": ["./*"],
 8 |       "@@/*": ["./*"]
 9 |     }
10 |   },
11 |   "exclude": ["node_modules", ".nuxt", "dist"]
12 | }
13 | 


--------------------------------------------------------------------------------
/layouts/README.md:
--------------------------------------------------------------------------------
1 | # LAYOUTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your Application Layouts.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
8 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <main>
 3 |     <nuxt />
 4 |   </main>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'Default',
10 | }
11 | </script>
12 | 


--------------------------------------------------------------------------------
/layouts/error.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1 v-if="error.statusCode === 404">Page not found</h1>
 4 |     <h1 v-else>An error occurred</h1>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   layout: 'Error',
11 |   props: {
12 |     error: {
13 |       type: Object,
14 |       required: true,
15 |     },
16 |   },
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/middleware/README.md:
--------------------------------------------------------------------------------
1 | # MIDDLEWARE
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your application middleware.
6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
7 | 
8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
9 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [[redirects]]
2 |   from = "/*"
3 |   to = "/index.html"
4 |   status = 200


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | import alias from './configuration/alias.js'
 2 | import apollo from './configuration/apollo/'
 3 | import axios from './configuration/axios.js'
 4 | import build from './configuration/build.js'
 5 | import buildModules from './configuration/buildModules.js'
 6 | import buildDir from './configuration/buildDir.js'
 7 | import cli from './configuration/cli.js'
 8 | import components from './configuration/components.js'
 9 | import css from './configuration/css.js'
10 | import dev from './configuration/dev.js'
11 | import dir from './configuration/dir.js'
12 | import extendPlugins from './configuration/extendPlugins.js'
13 | import env from './configuration/env.js'
14 | import generate from './configuration/generate.js'
15 | import globalName from './configuration/globalName.js'
16 | import gtm from './configuration/google-tag-manager.js'
17 | import hooks from './configuration/hooks.js'
18 | import head from './configuration/head/'
19 | import i18n from './configuration/i18n.js'
20 | import image from './configuration/image.js'
21 | import loading from './configuration/loading.js'
22 | import loadingIndicator from './configuration/loadingIndicator.js'
23 | import modules from './configuration/modules.js'
24 | import modulesDir from './configuration/modulesDir.js'
25 | import pageTransition from './configuration/pageTransition.js'
26 | import plugins from './configuration/plugins.js'
27 | import pwa from './configuration/pwa.js'
28 | import render from './configuration/render.js'
29 | import rootDir from './configuration/rootDir.js'
30 | import router from './configuration/router.js'
31 | import runtimeConfig from './configuration/runtimeConfig.js'
32 | import server from './configuration/server.js'
33 | import sitemap from './configuration/sitemap.js'
34 | import srcDir from './configuration/srcDir.js'
35 | import ssr from './configuration/ssr.js'
36 | import styleResources from './configuration/styleResources.js'
37 | import target from './configuration/target.js'
38 | import telemetry from './configuration/telemetry.js'
39 | import vueConfig from './configuration/vueConfig.js'
40 | import watch from './configuration/watch.js'
41 | import watchers from './configuration/watchers.js'
42 | require('dotenv').config()
43 | 
44 | export default {
45 |   ...alias,
46 |   ...apollo,
47 |   ...axios,
48 |   ...build,
49 |   ...buildModules,
50 |   ...buildDir,
51 |   ...cli,
52 |   ...components,
53 |   ...css,
54 |   ...dev,
55 |   ...dir,
56 |   ...extendPlugins,
57 |   ...env,
58 |   ...generate,
59 |   ...globalName,
60 |   ...gtm,
61 |   ...head,
62 |   ...hooks,
63 |   ...i18n,
64 |   ...image,
65 |   ...loading,
66 |   ...loadingIndicator,
67 |   ...modules,
68 |   ...modulesDir,
69 |   ...pageTransition,
70 |   ...plugins,
71 |   ...pwa,
72 |   ...render,
73 |   ...rootDir,
74 |   ...router,
75 |   ...runtimeConfig,
76 |   ...server,
77 |   ...sitemap,
78 |   ...srcDir,
79 |   ...ssr,
80 |   ...styleResources,
81 |   ...target,
82 |   ...telemetry,
83 |   ...vueConfig,
84 |   ...watch,
85 |   ...watchers,
86 | }
87 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "app",
 3 |   "version": "1.0.0",
 4 |   "description": "Nuxt app starter kit",
 5 |   "private": true,
 6 |   "author": "Davide Marchet",
 7 |   "license": "MIT",
 8 |   "scripts": {
 9 |     "dev": "nuxt",
10 |     "build": "nuxt build",
11 |     "start": "nuxt start",
12 |     "generate": "nuxt generate",
13 |     "lint:js": "eslint --fix --ext \".js,.vue\" --ignore-path .gitignore .",
14 |     "lint:style": "stylelint --fix \"**/*.{vue,scss,css}\" --ignore-path .gitignore",
15 |     "lint": "npm run lint:js && npm run lint:style",
16 |     "test": "jest"
17 |   },
18 |   "dependencies": {
19 |     "locomotive-scroll": "^4.1.2",
20 |     "@nuxtjs/apollo": "^4.0.1-rc.5",
21 |     "@nuxtjs/axios": "^5.13.6",
22 |     "@nuxtjs/gtm": "^2.4.0",
23 |     "@nuxtjs/i18n": "^7.2.0",
24 |     "@nuxtjs/sitemap": "^2.4.0",
25 |     "cookie-universal-nuxt": "^2.2.2",
26 |     "core-js": "^3.26.0",
27 |     "cors": "^2.8.5",
28 |     "cross-env": "^7.0.3",
29 |     "express": "^4.17.2",
30 |     "gsap": "^3.9.1",
31 |     "modern-css-reset": "^1.4.0",
32 |     "nuxt": "^2.15.8",
33 |     "qs": "^6.10.2",
34 |     "scss-react": "^1.0.2",
35 |     "scss-slamp": "^1.3.3"
36 |   },
37 |   "devDependencies": {
38 |     "@babel/eslint-parser": "^7.16.5",
39 |     "@nuxt/image": "^0.7.1",
40 |     "@nuxtjs/dotenv": "^1.4.1",
41 |     "@nuxtjs/eslint-config": "^8.0.0",
42 |     "@nuxtjs/eslint-module": "^3.0.2",
43 |     "@nuxtjs/pwa": "^3.3.5",
44 |     "@nuxtjs/style-resources": "^1.2.0",
45 |     "@nuxtjs/stylelint-module": "^4.1.0",
46 |     "@vue/test-utils": "^1.3.3",
47 |     "babel-jest": "^27.4.5",
48 |     "eslint": "^8.27.0",
49 |     "eslint-config-prettier": "^8.3.0",
50 |     "eslint-plugin-nuxt": "^3.1.0",
51 |     "eslint-plugin-prettier": "^4.0.0",
52 |     "jest": "^27.4.5",
53 |     "node-sass": "^7.0.1",
54 |     "nodemon": "^2.0.15",
55 |     "prettier": "^2.5.1",
56 |     "sass": "^1.56.1",
57 |     "sass-loader": "^10.1.1",
58 |     "stylelint": "^13.13.1",
59 |     "stylelint-config-prettier": "^8.0.2",
60 |     "stylelint-config-standard": "^22.0.0",
61 |     "stylelint-scss": "^3.19.0",
62 |     "vue-jest": "^3.0.7"
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/pages/README.md:
--------------------------------------------------------------------------------
1 | # PAGES
2 | 
3 | This directory contains your Application Views and Routes.
4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application.
5 | 
6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).
7 | 


--------------------------------------------------------------------------------
/pages/demo.scss:
--------------------------------------------------------------------------------
  1 | *{
  2 |   box-sizing: border-box;
  3 | }
  4 | 
  5 | body {
  6 |   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
  7 |   background-color: #9B9B9B;
  8 |   margin: 0;
  9 |   font-family: 'Barlow', sans-serif;
 10 |   font-weight: 400;
 11 | }
 12 | 
 13 | h1, h2{
 14 |   font-weight: 400;
 15 | }
 16 | 
 17 | .example.horizontal{
 18 |   width: 500vw;
 19 |   height: 100vh;
 20 |   overflow: hidden;
 21 |   display: flex;
 22 | }
 23 | 
 24 | header{
 25 |   padding: 12.5vw 6.25vw;
 26 |   h1{
 27 |     font-size: 11vw;
 28 |     line-height: 1;
 29 |     margin: 0;
 30 |     color: #000;
 31 |   }
 32 | }
 33 | 
 34 | footer{
 35 |   padding: 12.5vw 6.25vw;
 36 |   a{
 37 |     font-size: 5vw;
 38 |     color: #000;
 39 |   }
 40 | }
 41 | 
 42 | .example-content{
 43 |   display: flex;
 44 |   flex-wrap: wrap;
 45 |   align-items: center;
 46 |   justify-content: space-around;
 47 |   width: 100%;
 48 |   height: 100%;
 49 | }
 50 | 
 51 | .example-big-square{
 52 |   width: 50vw;
 53 |   padding-top: 50vw;
 54 |   background-color: #000;
 55 | }
 56 | 
 57 | .example-small-square{
 58 |   width: 25vw;
 59 |   padding-top: 25vw;
 60 |   background-color: #000;
 61 | }
 62 | 
 63 | 
 64 | .example-big-image{
 65 |   img{
 66 |     width: 100%;
 67 |     width: 50vw;
 68 |     height: auto;
 69 |     display: block;
 70 |   }
 71 | }
 72 | 
 73 | .example.horizontal header{
 74 |   width: 100vw;
 75 |   height: 100vh;
 76 |   display: flex;
 77 |   align-items: center;
 78 |   padding: 0 12.5vw ;
 79 | }
 80 | 
 81 | .example.horizontal footer{
 82 |   width: 100vw;
 83 |   height: 100vh;
 84 |   display: flex;
 85 |   align-items: center;
 86 |   padding: 0 12.5vw ;
 87 | }
 88 | 
 89 | .example.horizontal .example-section{
 90 |   width: 100vw;
 91 | }
 92 | 
 93 | .example.vertical .example-section, .example.vertical footer {
 94 |   padding-top: 50vw;
 95 | }
 96 | 
 97 | .example-fade-text{
 98 |   padding: 12.5vw 6.25vw;
 99 |   h2{
100 |     font-size: 5vw;
101 |   }
102 | }


--------------------------------------------------------------------------------
/pages/horizontal-scroll.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <LocomotiveScroll
 3 |     ref="scroller"
 4 |     :getted-options="{
 5 |       smooth: true,
 6 |       direction: 'horizontal',
 7 |       smartphone: {
 8 |         smooth: true,
 9 |         direction: 'horizontal',
10 |       },
11 |       tablet: {
12 |         smooth: true,
13 |         direction: 'horizontal',
14 |       },
15 |     }"
16 |   >
17 |     <div class="example horizontal">
18 |       <header data-scroll-section>
19 |         <h1>
20 |           Horizontal<br />
21 |           Scroll
22 |         </h1>
23 |       </header>
24 |       <div class="example-section" data-scroll-section>
25 |         <div class="example-content">
26 |           <div
27 |             class="example-big-square"
28 |             data-scroll
29 |             data-scroll-speed="-0.5"
30 |           />
31 |           <div class="example-small-square" data-scroll data-scroll-speed="2" />
32 |         </div>
33 |       </div>
34 |       <div class="example-section" data-scroll-section>
35 |         <div class="example-content">
36 |           <div
37 |             class="example-big-square"
38 |             data-scroll
39 |             data-scroll-speed="-0.5"
40 |           />
41 |           <div class="example-small-square" data-scroll data-scroll-speed="2" />
42 |         </div>
43 |       </div>
44 |       <div class="example-section" data-scroll-section>
45 |         <div class="example-content">
46 |           <div
47 |             class="example-big-square"
48 |             data-scroll
49 |             data-scroll-speed="-0.5"
50 |           />
51 |           <div class="example-small-square" data-scroll data-scroll-speed="2" />
52 |         </div>
53 |       </div>
54 |       <footer data-scroll-section>
55 |         <nuxt-link to="/scroll-trigger/"> Go to Gsap Scroll Trigger </nuxt-link>
56 |       </footer>
57 |     </div>
58 |   </LocomotiveScroll>
59 | </template>
60 | 
61 | <script>
62 | export default {
63 |   mounted() {},
64 | }
65 | </script>
66 | 
67 | <style lang="scss">
68 | @import './demo.scss';
69 | </style>
70 | 


--------------------------------------------------------------------------------
/pages/image-loads.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <LocomotiveScroll
 3 |     ref="scroller"
 4 |     :getted-options="{
 5 |       smooth: true,
 6 |       direction: 'vertical',
 7 |       smartphone: {
 8 |         smooth: true,
 9 |         direction: 'vertical',
10 |       },
11 |       tablet: {
12 |         smooth: true,
13 |         direction: 'vertical',
14 |       },
15 |     }"
16 |   >
17 |     <div class="example vertical">
18 |       <header data-scroll-section>
19 |         <h1>
20 |           Image<br />
21 |           Loads
22 |         </h1>
23 |         <p>(Images are loaded after 2.5s and the scroll refreshed)</p>
24 |       </header>
25 |       <div class="example-section" data-scroll-section>
26 |         <div class="example-content">
27 |           <div class="example-big-image" data-scroll data-scroll-speed="-0.5">
28 |             <img
29 |               data-src="https://via.placeholder.com/1000x1000"
30 |               alt="No width hegiht image"
31 |             />
32 |           </div>
33 |           <div
34 |             class="example-small-square"
35 |             data-scroll
36 |             data-scroll-speed="2.5"
37 |           />
38 |         </div>
39 |       </div>
40 |       <div class="example-section" data-scroll-section>
41 |         <div class="example-content">
42 |           <div
43 |             class="example-small-square"
44 |             data-scroll
45 |             data-scroll-speed="2.5"
46 |           />
47 |           <div class="example-big-image" data-scroll data-scroll-speed="-0.5">
48 |             <img
49 |               data-src="https://via.placeholder.com/1000x1000"
50 |               alt="No width hegiht image"
51 |             />
52 |           </div>
53 |         </div>
54 |       </div>
55 |       <div class="example-section" data-scroll-section>
56 |         <div class="example-content">
57 |           <div class="example-big-image" data-scroll data-scroll-speed="-0.5">
58 |             <img
59 |               data-src="https://via.placeholder.com/1000x1000"
60 |               alt="No width hegiht image"
61 |             />
62 |           </div>
63 |           <div
64 |             class="example-small-square"
65 |             data-scroll
66 |             data-scroll-speed="2.5"
67 |           />
68 |         </div>
69 |       </div>
70 |       <footer data-scroll-section>
71 |         <nuxt-link to="/on-call/"> Go to On Call Function </nuxt-link>
72 |       </footer>
73 |     </div>
74 |   </LocomotiveScroll>
75 | </template>
76 | 
77 | <script>
78 | export default {
79 |   mounted() {
80 |     const images = document.querySelectorAll('img')
81 |     setTimeout(() => {
82 |       images.forEach((image) => {
83 |         image.onload = () => {
84 |           this.$nuxt.$emit('update-locomotive')
85 |         }
86 |         image.src = image.dataset.src
87 |       })
88 |     }, 2500)
89 |   },
90 | }
91 | </script>
92 | 
93 | <style lang="scss">
94 | @import './demo.scss';
95 | </style>
96 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <LocomotiveScroll
 3 |     ref="scroller"
 4 |     :getted-options="{
 5 |       smooth: true,
 6 |       direction: 'vertical',
 7 |       smartphone: {
 8 |         smooth: true,
 9 |         direction: 'vertical',
10 |       },
11 |       tablet: {
12 |         smooth: true,
13 |         direction: 'vertical',
14 |       },
15 |     }"
16 |   >
17 |     <div class="example vertical">
18 |       <header data-scroll-section>
19 |         <h1>
20 |           Vertical<br />
21 |           Scroll
22 |         </h1>
23 |       </header>
24 |       <div class="example-section" data-scroll-section>
25 |         <div class="example-content">
26 |           <div
27 |             class="example-big-square"
28 |             data-scroll
29 |             data-scroll-speed="-0.5"
30 |           />
31 |           <div
32 |             class="example-small-square"
33 |             data-scroll
34 |             data-scroll-speed="2.5"
35 |           />
36 |         </div>
37 |       </div>
38 |       <div class="example-section" data-scroll-section>
39 |         <div class="example-content">
40 |           <div
41 |             class="example-small-square"
42 |             data-scroll
43 |             data-scroll-speed="2.5"
44 |           />
45 |           <div
46 |             class="example-big-square"
47 |             data-scroll
48 |             data-scroll-speed="-0.5"
49 |           />
50 |         </div>
51 |       </div>
52 |       <div class="example-section" data-scroll-section>
53 |         <div class="example-content">
54 |           <div
55 |             class="example-big-square"
56 |             data-scroll
57 |             data-scroll-speed="-0.5"
58 |           />
59 |           <div
60 |             class="example-small-square"
61 |             data-scroll
62 |             data-scroll-speed="2.5"
63 |           />
64 |         </div>
65 |       </div>
66 |       <footer data-scroll-section>
67 |         <nuxt-link to="/horizontal-scroll/">
68 |           Go to Horizontal Scroll
69 |         </nuxt-link>
70 |       </footer>
71 |     </div>
72 |   </LocomotiveScroll>
73 | </template>
74 | 
75 | <script>
76 | export default {}
77 | </script>
78 | 
79 | <style lang="scss">
80 | @import './demo.scss';
81 | </style>
82 | 


--------------------------------------------------------------------------------
/pages/on-call.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <LocomotiveScroll
  3 |     ref="scroller"
  4 |     :getted-options="{
  5 |       smooth: true,
  6 |       direction: 'vertical',
  7 |       smartphone: {
  8 |         smooth: true,
  9 |         direction: 'vertical',
 10 |       },
 11 |       tablet: {
 12 |         smooth: true,
 13 |         direction: 'vertical',
 14 |       },
 15 |     }"
 16 |   >
 17 |     <div class="example vertical">
 18 |       <header data-scroll-section>
 19 |         <h1>
 20 |           on Call<br />
 21 |           Function
 22 |         </h1>
 23 |       </header>
 24 |       <div class="example-section" data-scroll-section>
 25 |         <div class="example-content">
 26 |           <div
 27 |             class="example-big-square"
 28 |             data-scroll
 29 |             data-scroll-speed="-0.5"
 30 |           />
 31 |           <div
 32 |             class="example-small-square"
 33 |             data-scroll
 34 |             data-scroll-speed="2.5"
 35 |           />
 36 |         </div>
 37 |       </div>
 38 |       <div class="example-section" data-scroll-section>
 39 |         <div class="example-content">
 40 |           <div
 41 |             class="example-small-square"
 42 |             data-scroll
 43 |             data-scroll-speed="2.5"
 44 |           />
 45 |           <div
 46 |             class="example-big-square"
 47 |             data-scroll
 48 |             data-scroll-speed="-0.5"
 49 |           />
 50 |         </div>
 51 |       </div>
 52 |       <!-- Block with function -->
 53 |       <div class="example-section" data-scroll-section>
 54 |         <div class="example-fade-text" data-scroll data-scroll-call="fadeText">
 55 |           <h2>When I'm triggered... I disappear</h2>
 56 |         </div>
 57 |       </div>
 58 |       <!-- ./Block with function -->
 59 |       <div class="example-section" data-scroll-section>
 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.5"
 70 |           />
 71 |         </div>
 72 |       </div>
 73 |       <footer data-scroll-section>
 74 |         <nuxt-link to="/"> Go to Vertical Scroll </nuxt-link>
 75 |       </footer>
 76 |     </div>
 77 |   </LocomotiveScroll>
 78 | </template>
 79 | 
 80 | <script>
 81 | import gsap from 'gsap'
 82 | 
 83 | export default {
 84 |   mounted() {
 85 |     const locomotive = this.$refs.scroller.locomotive
 86 |     locomotive.on('call', (value, way, obj) => {
 87 |       switch (value) {
 88 |         case 'fadeText': {
 89 |           const child = obj.el.firstChild
 90 |           gsap.to(child, {
 91 |             duration: 2,
 92 |             ease: 'expo.out',
 93 |             opacity: 0.25,
 94 |           })
 95 |           break
 96 |         }
 97 |         default:
 98 |           break
 99 |       }
100 |     })
101 |   },
102 | }
103 | </script>
104 | 
105 | <style lang="scss">
106 | @import './demo.scss';
107 | </style>
108 | 


--------------------------------------------------------------------------------
/pages/scroll-trigger.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <LocomotiveScroll
  3 |     ref="scroller"
  4 |     :getted-options="{
  5 |       direction: 'vertical',
  6 |       smartphone: {
  7 |         direction: 'vertical',
  8 |       },
  9 |       tablet: {
 10 |         direction: 'vertical',
 11 |       },
 12 |     }"
 13 |     @init="locomotive = $refs.scroller.locomotive"
 14 |   >
 15 |     <div class="example vertical">
 16 |       <header data-scroll-section>
 17 |         <h1>Gsap Scroll Trigger</h1>
 18 |       </header>
 19 |       <div class="example-section" data-scroll-section>
 20 |         <div class="example-content">
 21 |           <div class="example-big-square" />
 22 |           <div class="example-small-square" data-scroll-trigger />
 23 |         </div>
 24 |       </div>
 25 |       <div class="example-section" data-scroll-section>
 26 |         <div class="example-content">
 27 |           <div class="example-small-square" data-scroll-trigger />
 28 |           <div class="example-big-square" />
 29 |         </div>
 30 |       </div>
 31 |       <div class="example-section" data-scroll-section>
 32 |         <div class="example-content">
 33 |           <div class="example-big-square" />
 34 |           <div class="example-small-square" data-scroll-trigger />
 35 |         </div>
 36 |       </div>
 37 |       <footer data-scroll-section>
 38 |         <nuxt-link to="/image-loads/"> Go to Image Loads </nuxt-link>
 39 |       </footer>
 40 |     </div>
 41 |   </LocomotiveScroll>
 42 | </template>
 43 | 
 44 | <script>
 45 | import gsap from 'gsap'
 46 | import { ScrollTrigger } from 'gsap/ScrollTrigger'
 47 | gsap.registerPlugin(ScrollTrigger)
 48 | 
 49 | export default {
 50 |   data: () => ({
 51 |     locomotive: undefined,
 52 |   }),
 53 |   watch: {
 54 |     locomotive: {
 55 |       handler() {
 56 |         this.locomotive.on('scroll', ScrollTrigger.update)
 57 |         const locomotive = this.locomotive
 58 |         ScrollTrigger.scrollerProxy(locomotive.el, {
 59 |           scrollTop(value) {
 60 |             return arguments.length
 61 |               ? locomotive.scrollTo(value, 0, 0)
 62 |               : locomotive.scroll.instance.scroll.y
 63 |           },
 64 |           getBoundingClientRect() {
 65 |             return {
 66 |               top: 0,
 67 |               left: 0,
 68 |               width: window.innerWidth,
 69 |               height: window.innerHeight,
 70 |             }
 71 |           },
 72 |           pinType: document.querySelector('.js-locomotive').style.transform
 73 |             ? 'transform'
 74 |             : 'fixed',
 75 |         })
 76 | 
 77 |         const elements = document.querySelectorAll('[data-scroll-trigger]')
 78 |         elements.forEach((element) => this.elementAnimation(element))
 79 |       },
 80 |     },
 81 |   },
 82 |   methods: {
 83 |     elementAnimation(element) {
 84 |       gsap.from(element, {
 85 |         scrollTrigger: {
 86 |           trigger: element,
 87 |           scroller: this.$refs.scroller.locomotive.el,
 88 |           scrub: true,
 89 |           start: 'top bottom',
 90 |           end: 'bottom center',
 91 |         },
 92 |         scaleY: 0,
 93 |         ease: 'none',
 94 |       })
 95 |     },
 96 |   },
 97 | }
 98 | </script>
 99 | 
100 | <style lang="scss">
101 | @import './demo.scss';
102 | </style>
103 | 


--------------------------------------------------------------------------------
/plugins/README.md:
--------------------------------------------------------------------------------
1 | # PLUGINS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).
8 | 


--------------------------------------------------------------------------------
/plugins/both.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import LocomotiveScroll from '@/LocomotiveScroll/component/index.vue'
3 | 
4 | Vue.component('LocomotiveScroll', LocomotiveScroll)
5 | 


--------------------------------------------------------------------------------
/plugins/client.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import LocomotiveScroll from '@/LocomotiveScroll/plugin/index.js'
3 | 
4 | Vue.use(LocomotiveScroll)
5 | 


--------------------------------------------------------------------------------
/plugins/server.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DidoMarchet/starter-kit-nuxt-locomotive-scroll/5b9c4228c491234c9a836b3b10b943fe81238f1b/plugins/server.js


--------------------------------------------------------------------------------
/static/README.md:
--------------------------------------------------------------------------------
 1 | # STATIC
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your static files.
 6 | Each file inside this directory is mapped to `/`.
 7 | Thus you'd want to delete this README.md before deploying to production.
 8 | 
 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`.
10 | 
11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
12 | 


--------------------------------------------------------------------------------
/static/sw.js:
--------------------------------------------------------------------------------
 1 | // THIS FILE SHOULD NOT BE VERSION CONTROLLED
 2 | 
 3 | // https://github.com/NekR/self-destroying-sw
 4 | 
 5 | self.addEventListener('install', function (e) {
 6 |   self.skipWaiting()
 7 | })
 8 | 
 9 | self.addEventListener('activate', function (e) {
10 |   self.registration.unregister()
11 |     .then(function () {
12 |       return self.clients.matchAll()
13 |     })
14 |     .then(function (clients) {
15 |       clients.forEach(client => client.navigate(client.url))
16 |     })
17 | })
18 | 


--------------------------------------------------------------------------------
/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your Vuex Store files.
 6 | Vuex Store option is implemented in the Nuxt.js framework.
 7 | 
 8 | Creating a file in this directory automatically activates the option in the framework.
 9 | 
10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
11 | 


--------------------------------------------------------------------------------
/store/app.js:
--------------------------------------------------------------------------------
 1 | export const state = () => ({
 2 |   scroll: {
 3 |     isScrolling: false,
 4 |     limit: {
 5 |       x: 0,
 6 |       y: 0,
 7 |     },
 8 |     x: 0,
 9 |     y: 0,
10 |   },
11 | })
12 | 
13 | export const mutations = {
14 |   setScroll: (state, payload) => {
15 |     state.scroll = Object.assign({}, state.scroll, payload)
16 |   },
17 | }
18 | 


--------------------------------------------------------------------------------
/stylelint.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
 3 |   plugins: ['stylelint-scss'],
 4 |   // add your custom config here
 5 |   // https://stylelint.io/user-guide/configuration
 6 |   rules: {
 7 |     // recommended rules
 8 |     'at-rule-no-unknown': null,
 9 |     'scss/at-rule-no-unknown': true,
10 |   },
11 | }
12 | 


--------------------------------------------------------------------------------
/test/Logo.spec.js:
--------------------------------------------------------------------------------
 1 | import { mount } from '@vue/test-utils'
 2 | import Logo from '@/components/Logo.vue'
 3 | 
 4 | describe('Logo', () => {
 5 |   test('is a Vue instance', () => {
 6 |     const wrapper = mount(Logo)
 7 |     expect(wrapper.vm).toBeTruthy()
 8 |   })
 9 | })
10 | 


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