├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── README.md
├── assets
    └── README.md
├── components
    ├── Feature.vue
    ├── Grid.vue
    ├── Logo.vue
    ├── Page.vue
    ├── README.md
    └── Teaser.vue
├── layouts
    ├── README.md
    └── default.vue
├── middleware
    └── README.md
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
    ├── README.md
    ├── _slug.vue
    └── index.vue
├── plugins
    ├── README.md
    └── components.js
├── static
    ├── README.md
    └── favicon.ico
└── store
    └── README.md


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


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   parser: 'babel-eslint',
 4 |   env: {
 5 |     browser: true,
 6 |     node: true
 7 |   },
 8 |   extends: 'standard',
 9 |   // required to lint *.vue files
10 |   plugins: [
11 |     'html'
12 |   ],
13 |   // add your custom rules here
14 |   rules: {},
15 |   globals: {}
16 | }
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # dependencies
 2 | node_modules
 3 | 
 4 | # logs
 5 | npm-debug.log
 6 | 
 7 | # Nuxt build
 8 | .nuxt
 9 | 
10 | # Nuxt generate
11 | dist
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Project moved
2 | 
3 | This project is not maintained anymore. Please checkout the following repository instead: https://github.com/storyblok/vue-nuxt-boilerplate
4 | 


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


--------------------------------------------------------------------------------
/components/Feature.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-editable="blok" class="column feature">
 3 |     {{blok.name}}
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   props: ['blok']
10 | }
11 | </script>


--------------------------------------------------------------------------------
/components/Grid.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-editable="blok" class="grid">
 3 |     <component :key="blok._uid" v-for="blok in blok.columns" :blok="blok" :is="blok.component"></component>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   props: ['blok']
10 | }
11 | </script>


--------------------------------------------------------------------------------
/components/Logo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="VueToNuxtLogo">
 3 |     <div class="Triangle Triangle--two"></div>
 4 |     <div class="Triangle Triangle--one"></div>
 5 |     <div class="Triangle Triangle--three"></div>
 6 |     <div class="Triangle Triangle--four"></div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <style>
11 | .VueToNuxtLogo {
12 |   display: inline-block;
13 |   animation: turn 2s linear forwards 1s;
14 |   transform: rotateX(180deg);
15 |   position: relative;
16 |   overflow: hidden;
17 |   height: 180px;
18 |   width: 245px;
19 | }
20 | 
21 | .Triangle {
22 |   position: absolute;
23 |   top: 0;
24 |   left: 0;
25 |   width: 0;
26 |   height: 0;
27 | }
28 | 
29 | .Triangle--one {
30 |   border-left: 105px solid transparent;
31 |   border-right: 105px solid transparent;
32 |   border-bottom: 180px solid #41B883;
33 | }
34 | 
35 | .Triangle--two {
36 |   top: 30px;
37 |   left: 35px;
38 |   animation: goright 0.5s linear forwards 3.5s;
39 |   border-left: 87.5px solid transparent;
40 |   border-right: 87.5px solid transparent;
41 |   border-bottom: 150px solid #3B8070;
42 | }
43 | 
44 | .Triangle--three {
45 |   top: 60px;
46 |   left: 35px;
47 |   animation: goright 0.5s linear forwards 3.5s;
48 |   border-left: 70px solid transparent;
49 |   border-right: 70px solid transparent;
50 |   border-bottom: 120px solid #35495E;
51 | }
52 | 
53 | .Triangle--four {
54 |   top: 120px;
55 |   left: 70px;
56 |   animation: godown 0.5s linear forwards 3s;
57 |   border-left: 35px solid transparent;
58 |   border-right: 35px solid transparent;
59 |   border-bottom: 60px solid #fff;
60 | }
61 | 
62 | @keyframes turn {
63 |   100% {
64 |     transform: rotateX(0deg);
65 |   }
66 | }
67 | 
68 | @keyframes godown {
69 |   100% {
70 |     top: 180px;
71 |   }
72 | }
73 | 
74 | @keyframes goright {
75 |   100% {
76 |     left: 70px;
77 |   }
78 | }
79 | </style>
80 | 


--------------------------------------------------------------------------------
/components/Page.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-editable="blok" class="page">
 3 |     <component :key="blok._uid" v-for="blok in blok.body" :blok="blok" :is="blok.component"></component>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   props: ['blok']
10 | }
11 | </script>


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


--------------------------------------------------------------------------------
/components/Teaser.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-editable="blok" class="teaser">
 3 |     <h1>{{blok.headline}}</h1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   props: ['blok']
10 | }
11 | </script>


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


--------------------------------------------------------------------------------
/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", Roboto, "Helvetica Neue", Arial, sans-serif;
10 |   font-size: 16px;
11 |   word-spacing: 1px;
12 |   -ms-text-size-adjust: 100%;
13 |   -webkit-text-size-adjust: 100%;
14 |   -moz-osx-font-smoothing: grayscale;
15 |   -webkit-font-smoothing: antialiased;
16 |   box-sizing: border-box;
17 | }
18 | 
19 | *, *:before, *:after {
20 |   box-sizing: border-box;
21 |   margin: 0;
22 | }
23 | 
24 | .container {
25 |   text-align: center;
26 | }
27 | </style>
28 | 


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


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   /*
 3 |   ** Headers of the page
 4 |   */
 5 |   head: {
 6 |     title: 'mynuxt',
 7 |     meta: [
 8 |       { charset: 'utf-8' },
 9 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
10 |       { hid: 'description', name: 'description', content: 'Nuxt.js project' }
11 |     ],
12 |     link: [
13 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
14 |     ]
15 |   },
16 |   /*
17 |   ** Customize the progress bar color
18 |   */
19 |   loading: { color: '#3B8070' },
20 |   /*
21 |   ** Build configuration
22 |   */
23 |   build: {
24 |     /*
25 |     ** Run ESLint on save
26 |     */
27 |     extend (config, ctx) {
28 |       if (ctx.dev && ctx.isClient) {
29 |         config.module.rules.push({
30 |           enforce: 'pre',
31 |           test: /\.(js|vue)$/,
32 |           loader: 'eslint-loader',
33 |           exclude: /(node_modules)/
34 |         })
35 |       }
36 |     }
37 |   },
38 |   plugins: ['~/plugins/components.js'],
39 |   modules: [
40 |     ['storyblok-nuxt', { accessToken: 'YOUR_PREVIEW_TOKEN', cacheProvider: 'memory' }]
41 |   ]
42 | }
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mynuxt",
 3 |   "version": "1.0.0",
 4 |   "description": "Nuxt.js project",
 5 |   "author": "Dominik Angerer <dominikangerer1@gmail.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt",
 9 |     "build": "nuxt build",
10 |     "start": "nuxt start",
11 |     "generate": "nuxt generate",
12 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
13 |     "precommit": "npm run lint"
14 |   },
15 |   "dependencies": {
16 |     "nuxt": "^1.0.0-rc11",
17 |     "storyblok-js-client": "^1.0.4",
18 |     "storyblok-nuxt": "^0.0.3"
19 |   },
20 |   "devDependencies": {
21 |     "babel-eslint": "^7.2.3",
22 |     "eslint": "^4.3.0",
23 |     "eslint-config-standard": "^10.2.1",
24 |     "eslint-loader": "^1.9.0",
25 |     "eslint-plugin-html": "^3.1.1",
26 |     "eslint-plugin-import": "^2.7.0",
27 |     "eslint-plugin-node": "^5.1.1",
28 |     "eslint-plugin-promise": "^3.5.0",
29 |     "eslint-plugin-standard": "^3.0.1"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/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 create the router of your application.
5 | 
6 | More information about the usage of this directory in the documentation:
7 | https://nuxtjs.org/guide/routing
8 | 


--------------------------------------------------------------------------------
/pages/_slug.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section>
 3 |     <component v-if="story.content.component" :key="story.content._uid" :blok="story.content" :is="story.content.component"></component>
 4 |   </section>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   data () {
10 |     return { story: { content: {} } }
11 |   },
12 |   mounted () {
13 |     this.$storyblok.init()
14 |     this.$storyblok.on('change', () => {
15 |       location.reload(true)
16 |     })
17 |     this.$storyblok.on('published', () => {
18 |       location.reload(true)
19 |     })
20 |   },
21 |   asyncData (context) {
22 |     // Check if we are in the editor mode
23 |     let version = context.query._storyblok || context.isDev ? 'draft' : 'published'
24 | 
25 |     // Load the JSON from the API
26 |     return context.app.$storyapi.get(`cdn/stories/${context.params.slug}`, {
27 |       version: version
28 |     }).then((res) => {
29 |       return res.data
30 |     }).catch((res) => {
31 |       context.error({ statusCode: res.response.status, message: res.response.data })
32 |     })
33 |   }
34 | }
35 | </script>
36 | 
37 | <style>
38 | @import url('https://fonts.googleapis.com/css?family=Lato');
39 | 
40 | .page {
41 |   max-width: 960px;
42 |   margin: 0 auto;
43 |   font-family: 'Lato', sans-serif;
44 |   margin-top: 120px;
45 | }
46 | 
47 | .teaser {
48 |   text-align: center;
49 | }
50 | 
51 | .grid {
52 |   display: -webkit-box;
53 |   display: -webkit-flex;
54 |   display: -ms-flexbox;
55 |   display: flex;
56 |   -webkit-flex-wrap: wrap;
57 |   -ms-flex-wrap: wrap;
58 |   flex-wrap: wrap;
59 |   list-style: none;
60 |   padding: 0;
61 | 
62 |   max-width: 1200px;
63 |   margin: 0 auto;
64 | }
65 | 
66 | .column {
67 |   -webkit-box-flex: 1;
68 |   -webkit-flex: 1;
69 |   -ms-flex: 1;
70 |   flex: 1;
71 | 
72 |   width: 50%;
73 |   
74 |   box-shadow: 0px 1px 10px 0px #ccc;
75 |   border: 1px solid #ddd;
76 |   margin: 20px;
77 |   padding: 20px;
78 | }
79 | 
80 | body { 
81 |   font-family: 'Lato', sans-serif; 
82 | } 
83 | 
84 | .rebuilding { 
85 |   position: absolute;
86 |   top: 0px;
87 |   left: 0px;
88 |   width: 100%;
89 |   text-align: center;
90 |   background: green;
91 |   padding: 10px;
92 |   color: #fff;
93 | } 
94 | 
95 | footer { 
96 |   text-align: center; 
97 | }
98 | </style>
99 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="container">
 3 |     <h1 class="title">
 4 |       Pages
 5 |     </h1>
 6 |     <ul class="pages">
 7 |       <li v-for="(page, index) in pages" :key="index" class="page">
 8 |         <nuxt-link :to="page.slug">{{ page.name }}</nuxt-link>
 9 |       </li>
10 |     </ul>
11 |   </section>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   data () {
17 |     return {
18 |       pages: []
19 |     }
20 |   },
21 |   asyncData (context) {
22 |     // Check if we are in the editor mode
23 |     let version = context.query._storyblok || context.isDev ? 'draft' : 'published'
24 | 
25 |     // Load the JSON from the API
26 |     return context.app.$storyapi.get('cdn/links', {
27 |       version: version
28 |     }).then((result) => {
29 |       let pages = []
30 |       for (let id in result.data.links) {
31 |         if (result.data.links.hasOwnProperty(id)) {
32 |           let link = result.data.links[id]
33 |           pages.push({ slug: link.slug, name: link.name })
34 |         }
35 |       }
36 |       return { pages: pages }
37 |     }).catch((res) => {
38 |       context.error({ statusCode: res.response.status, message: res.response.data })
39 |     })
40 |   },
41 |   head () {
42 |     return {
43 |       title: 'Pages'
44 |     }
45 |   }
46 | }
47 | </script>
48 | 
49 | <style scoped>
50 | .title
51 | {
52 |   margin: 30px 0;
53 | }
54 | .pages
55 | {
56 |   list-style: none;
57 |   margin: 0;
58 |   padding: 0;
59 | }
60 | .page
61 | {
62 |   margin: 10px 0;
63 | }
64 | </style>
65 | 


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


--------------------------------------------------------------------------------
/plugins/components.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Page from '@/components/Page.vue'
 3 | import Teaser from '@/components/Teaser.vue'
 4 | import Grid from '@/components/Grid.vue'
 5 | import Feature from '@/components/Feature.vue'
 6 | 
 7 | Vue.component('page', Page)
 8 | Vue.component('teaser', Teaser)
 9 | Vue.component('grid', Grid)
10 | Vue.component('feature', Feature)
11 | 


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


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/storyblok/nuxtjs/acebd572b3c10b37f63db0f8588b689278d3927d/static/favicon.ico


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


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