├── static
    └── favicon.ico
├── plugins
    └── vue-agile.js
├── .editorconfig
├── README.md
├── package.json
├── nuxt.config.js
├── components
    ├── Logo.vue
    └── Carousel.vue
├── layouts
    └── default.vue
├── .gitignore
└── pages
    └── index.vue


/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lukaszflorczak/nuxt-agile/HEAD/static/favicon.ico


--------------------------------------------------------------------------------
/plugins/vue-agile.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueAgile from 'vue-agile'
3 | 
4 | Vue.use(VueAgile)
5 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # nuxt-agile
 2 | 
 3 | > Demo of vue-agile carousel component with Nuxt.js and SSR
 4 | 
 5 | For detailed explanation on how component works and bug/feature/help request visit main [vue-agile repository](https://github.com/lukaszflorczak/vue-agile).
 6 | 
 7 | ![](https://muuteam.com/nuxt-agile.png)
 8 | 
 9 | ## Run demo
10 | 
11 | ```bash
12 | # install dependencies
13 | $ yarn install
14 | 
15 | # serve with hot reload at localhost:3000
16 | $ yarn dev
17 | ```
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-agile",
 3 |   "version": "1.0.0",
 4 |   "description": "Nuxt app with vue-agile SSR demo",
 5 |   "author": "Łukasz Florczak",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt",
 9 |     "build": "nuxt build",
10 |     "start": "nuxt start",
11 |     "generate": "nuxt generate"
12 |   },
13 |   "dependencies": {
14 |     "nuxt": "^2.0.0",
15 |     "vue-agile": "^1.1.0"
16 |   },
17 |   "devDependencies": {
18 |     "node-sass": "^4.13.1",
19 |     "sass-loader": "^8.0.2"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   mode: 'universal',
 3 |   /*
 4 |   ** Headers of the page
 5 |   */
 6 |   head: {
 7 |     title: process.env.npm_package_name || '',
 8 |     meta: [
 9 |       { charset: 'utf-8' },
10 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
11 |       { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
12 |     ],
13 |     link: [
14 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
15 |     ]
16 |   },
17 |   /*
18 |   ** Customize the progress-bar color
19 |   */
20 |   loading: { color: '#fff' },
21 |   /*
22 |   ** Global CSS
23 |   */
24 |   css: [],
25 |   /*
26 |   ** Plugins to load before mounting the App
27 |   */
28 |   plugins: ['~/plugins/vue-agile'],
29 |   /*
30 |   ** Nuxt.js dev-modules
31 |   */
32 |   buildModules: [],
33 |   /*
34 |   ** Nuxt.js modules
35 |   */
36 |   modules: [],
37 |   /*
38 |   ** Build configuration
39 |   */
40 |   build: {
41 |     transpile: ['vue-agile']
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/components/Logo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg class="NuxtLogo" width="245" height="180" viewBox="0 0 452 342" xmlns="http://www.w3.org/2000/svg">
 3 |     <g fill="none" fill-rule="evenodd">
 4 |       <path
 5 |         d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
 6 |         fill="#00C58E"
 7 |       />
 8 |       <path
 9 |         d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
10 |         fill="#108775"
11 |       />
12 |       <path
13 |         d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
14 |         fill="#2F495E"
15 |         fill-rule="nonzero"
16 |       />
17 |     </g>
18 |   </svg>
19 | </template>
20 | <style>
21 | .NuxtLogo {
22 |   animation: 1s appear;
23 |   margin: auto;
24 | }
25 | 
26 | @keyframes appear {
27 |   0% {
28 |     opacity: 0;
29 |   }
30 |   100% {
31 |     opacity: 1;
32 |   }
33 | }
34 | </style>
35 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <nuxt />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style>
 8 | html {
 9 |   font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
10 |     Roboto, 'Helvetica Neue', Arial, sans-serif;
11 |   font-size: 16px;
12 |   word-spacing: 1px;
13 |   -ms-text-size-adjust: 100%;
14 |   -webkit-text-size-adjust: 100%;
15 |   -moz-osx-font-smoothing: grayscale;
16 |   -webkit-font-smoothing: antialiased;
17 |   box-sizing: border-box;
18 | }
19 | 
20 | *,
21 | *:before,
22 | *:after {
23 |   box-sizing: border-box;
24 |   margin: 0;
25 | }
26 | 
27 | .button--green {
28 |   display: inline-block;
29 |   border-radius: 4px;
30 |   border: 1px solid #3b8070;
31 |   color: #3b8070;
32 |   text-decoration: none;
33 |   padding: 10px 30px;
34 | }
35 | 
36 | .button--green:hover {
37 |   color: #fff;
38 |   background-color: #3b8070;
39 | }
40 | 
41 | .button--grey {
42 |   display: inline-block;
43 |   border-radius: 4px;
44 |   border: 1px solid #35495e;
45 |   color: #35495e;
46 |   text-decoration: none;
47 |   padding: 10px 30px;
48 |   margin-left: 15px;
49 | }
50 | 
51 | .button--grey:hover {
52 |   color: #fff;
53 |   background-color: #35495e;
54 | }
55 | </style>
56 | 


--------------------------------------------------------------------------------
/components/Carousel.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <agile>
 3 |     <div v-for="n in 6" class="slide" :class="'slide--' + n">{{ n }}</div>
 4 |   </agile>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     name: 'Carousel'
10 |   }
11 | </script>
12 | 
13 | <style lang="sass">
14 |   // Basic VueAgile styles
15 |   .agile
16 |     margin-top: 20px
17 | 
18 |     &__actions
19 |       margin-top: 20px
20 | 
21 |     &__nav-button
22 |       background: transparent
23 |       border: none
24 |       color: #ccc
25 |       cursor: pointer
26 |       font-size: 24px
27 |       transition-duration: .3s
28 | 
29 |       &:hover
30 |         color: #888
31 | 
32 |     &__dot
33 |       margin: 0 10px
34 | 
35 |       button
36 |         background-color: #eee
37 |         border: none
38 |         border-radius: 50%
39 |         cursor: pointer
40 |         display: block
41 |         height: 10px
42 |         font-size: 0
43 |         line-height: 0
44 |         margin: 0
45 |         padding: 0
46 |         transition-duration: .3s
47 |         width: 10px
48 | 
49 |       &--current,
50 |       &:hover
51 |         button
52 |           background-color: #888
53 | 
54 |   // Slides styles
55 |   .slide
56 |     align-items: center
57 |     color: #fff
58 |     display: flex
59 |     font-size: 32px
60 |     font-weight: 300
61 |     height: 200px
62 |     justify-content: center
63 | 
64 |   // Slides backgrounds
65 |   $colors: #f1c40f #e67e22 #e74c3c #9b59b6 #3498db #2ecc71
66 | 
67 |   @for $i from 1 through length($colors)
68 |     $color: nth($colors, $i)
69 | 
70 |     .slide--#{$i}
71 |       background-color: $color
72 | 
73 | </style>
74 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | /logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE / Editor
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 
86 | # macOS
87 | .DS_Store
88 | 
89 | # Vim swap files
90 | *.swp
91 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <logo/>
 4 |     <h1 class="title">
 5 |       nuxt-agile
 6 |     </h1>
 7 |     <h2 class="subtitle">
 8 |       Demo of VueAgile carousel & Nuxt.js with SSR
 9 |     </h2>
10 | 
11 |     <div class="row">
12 |       <div class="demo demo--1">
13 |         <h3>SSR</h3>
14 |         <carousel/>
15 |       </div>
16 | 
17 |       <div class="demo demo--2">
18 |         <h3>Client only</h3>
19 |         <client-only placeholder="Carousel loading...">
20 |           <carousel/>
21 |         </client-only>
22 |       </div>
23 |     </div>
24 |   </div>
25 | </template>
26 | 
27 | <script>
28 |   import Logo from '~/components/Logo.vue'
29 |   import Carousel from '~/components/Carousel.vue'
30 | 
31 |   export default {
32 |     components: {
33 |       Logo,
34 |       Carousel
35 |     }
36 |   }
37 | </script>
38 | 
39 | <style>
40 |   .container {
41 |     margin: 0 auto;
42 |     max-width: 900px;
43 |     min-height: 100vh;
44 |     padding: 30px 0;
45 |     text-align: center;
46 |   }
47 | 
48 |   .title {
49 |     font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
50 |     display: block;
51 |     font-weight: 300;
52 |     font-size: 100px;
53 |     color: #35495e;
54 |     letter-spacing: 1px;
55 |   }
56 | 
57 |   .subtitle {
58 |     font-weight: 300;
59 |     font-size: 42px;
60 |     color: #526488;
61 |     word-spacing: 5px;
62 |     padding-bottom: 15px;
63 |   }
64 | 
65 |   .client-only-placeholder {
66 |     align-items: center;
67 |     background-color: #ddd;
68 |     display: flex;
69 |     justify-content: center;
70 |     margin-top: 20px;
71 |     min-height: 200px;
72 |   }
73 | 
74 |   .row {
75 |     display: flex;
76 |     justify-content: space-between;
77 |   }
78 | 
79 |   .demo {
80 |     margin-top: 30px;
81 |     width: calc(50% - 10px);
82 |   }
83 | 
84 |   .demo h3 {
85 |     font-weight: 300;
86 |     font-size: 24px;
87 |     color: #526488;
88 |     word-spacing: 5px;
89 |   }
90 | </style>
91 | 


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