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


/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/storyblok/vue-nuxt-boilerplate/HEAD/static/favicon.ico


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


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


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


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


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


--------------------------------------------------------------------------------
/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/Feature.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     v-editable="blok"
 4 |     class="py-2">
 5 |     <h1 class="text-lg">{{ blok.name }}</h1>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   props: {
12 |     blok: {
13 |       type: Object,
14 |       required: true
15 |     }
16 |   }
17 | }
18 | </script>
19 | 


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


--------------------------------------------------------------------------------
/components/Teaser.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     v-editable="blok"
 4 |     class="py-8 mb-6 text-5xl font-bold text-center">
 5 |     {{ blok.headline }}
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   props: {
12 |     blok: {
13 |       type: Object,
14 |       required: true
15 |     }
16 |   }
17 | }
18 | </script>
19 | 


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


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


--------------------------------------------------------------------------------
/components/Page.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     v-editable="blok"
 4 |     class="px-6">
 5 |     <component
 6 |       v-for="blok in blok.body"
 7 |       :key="blok._uid"
 8 |       :blok="blok"
 9 |       :is="blok.component" />
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   props: {
16 |     blok: {
17 |       type: Object,
18 |       required: true
19 |     }
20 |   }
21 | }
22 | </script>
23 | 


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


--------------------------------------------------------------------------------
/components/Grid.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul
 3 |     v-editable="blok"
 4 |     class="flex py-8 mb-6">
 5 |     <li
 6 |       :key="blok._uid"
 7 |       v-for="blok in blok.columns"
 8 |       class="flex-auto px-6">
 9 |       <component :blok="blok" :is="blok.component" />
10 |     </li>
11 |   </ul>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   props: {
17 |     blok: {
18 |       type: Object,
19 |       required: true
20 |     }
21 |   }
22 | }
23 | </script>
24 | 


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


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-nuxt-storyblok-boilerplate",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "nuxt",
 7 |     "build": "nuxt build",
 8 |     "start": "nuxt start",
 9 |     "generate": "nuxt generate"
10 |   },
11 |   "dependencies": {
12 |     "@nuxtjs/axios": "^5.13.6",
13 |     "core-js": "^3.14.0",
14 |     "nuxt": "^2.15.6",
15 |     "storyblok-nuxt": "^2.0.1"
16 |   },
17 |   "devDependencies": {
18 |     "@nuxtjs/tailwindcss": "^4.1.3",
19 |     "postcss": "^8.3.0"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/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 |     <path
 4 |       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"
 5 |       fill="#00C58E"
 6 |     />
 7 |     <path
 8 |       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"
 9 |       fill="#108775"
10 |     />
11 |     <path
12 |       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"
13 |       fill="#2F495E"
14 |     />
15 |   </svg>
16 | </template>
17 | 
18 | <style>
19 | .NuxtLogo {
20 |   animation: 1s appear;
21 |   margin: auto;
22 | }
23 | 
24 | @keyframes appear {
25 |   0% {
26 |     opacity: 0;
27 |   }
28 | }
29 | </style>
30 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt Storyblok Boilerplate
 2 | 
 3 | > To get better understanding of this project and how it works, read our [Add a headless CMS to Nuxt in 5 minutes](https://www.storyblok.com/tp/headless-cms-nuxtjs) article.
 4 | 
 5 | ## Resources
 6 | 
 7 | Visit our technology [Nuxt Technology Hub](https://www.storyblok.com/tc/nuxtjs) for more tutorials and videos how to use Storyblok together with Vue.js and Nuxt.
 8 | 
 9 | ## Configuration Steps
10 | 
11 | 1. Create new Space in Storyblok
12 | 2. Obtain Preview Token from the Settings of the Space.
13 | 3. Replace the `accessToken` value in `nuxt.config.js` file with your Preview Token.
14 | 4. Your Nuxt.js project can be started and will consume data from your Storyblok Space.
15 | 
16 | > For more advanced article on how to build multilanguage website with Storyblok and Nuxt.js, check our [The Complete Guide to Build a Full Blown Multilanguage Website with Nuxt.js](https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial).
17 | 
18 | ## Build Setup
19 | 
20 | ```bash
21 | # install dependencies
22 | $ yarn install
23 | 
24 | # serve with hot reload at localhost:3000
25 | $ yarn dev
26 | 
27 | # build for production and launch server
28 | $ yarn build
29 | $ yarn start
30 | 
31 | # generate static project
32 | $ yarn generate
33 | ```
34 | 
35 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
36 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   // Target: https://go.nuxtjs.dev/config-target
 3 |   target: 'static',
 4 | 
 5 |   // Global page headers: https://go.nuxtjs.dev/config-head
 6 |   head: {
 7 |     title: 'nuxt-5min-storyblok',
 8 |     htmlAttrs: {
 9 |       lang: 'en'
10 |     },
11 |     meta: [
12 |       { charset: 'utf-8' },
13 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
14 |       { hid: 'description', name: 'description', content: '' }
15 |     ],
16 |     link: [
17 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
18 |     ]
19 |   },
20 | 
21 |   // Global CSS: https://go.nuxtjs.dev/config-css
22 |   css: [
23 |   ],
24 | 
25 |   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
26 |   plugins: [
27 |     '~/plugins/components'
28 |   ],
29 | 
30 |   // Auto import components: https://go.nuxtjs.dev/config-components
31 |   components: true,
32 | 
33 |   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
34 |   buildModules: [
35 |     // https://go.nuxtjs.dev/tailwindcss
36 |     '@nuxtjs/tailwindcss',
37 |   ],
38 | 
39 |   // Modules: https://go.nuxtjs.dev/config-modules
40 |   modules: [
41 |     // https://go.nuxtjs.dev/axios
42 |     '@nuxtjs/axios',
43 |     [
44 |       'storyblok-nuxt',
45 |       {
46 |         accessToken: '432cQ9VTZJMlxGzBORHWSwtt',
47 |         cacheProvider: 'memory'
48 |       }
49 |     ],
50 |   ],
51 | 
52 |   // Axios module configuration: https://go.nuxtjs.dev/config-axios
53 |   axios: {},
54 | 
55 |   // Build Configuration: https://go.nuxtjs.dev/config-build
56 |   build: {
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/.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/_.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <page
 3 |     v-if="story.content.component"
 4 |     :key="story.content._uid"
 5 |     :blok="story.content" />
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   data () {
11 |     return {
12 |       story: { content: {} }
13 |     }
14 |   },
15 |   mounted () {
16 |     this.$storybridge(() => {
17 |       const storyblokInstance = new StoryblokBridge()
18 | 
19 |       // Listen to Storyblok's Visual Editor event
20 |       storyblokInstance.on(['input', 'published', 'change'], (event) => {
21 |         if (event.action == 'input') {
22 |           if (event.story.id === this.story.id) {
23 |             this.story.content = event.story.content
24 |           }
25 |         } else {
26 |           this.$nuxt.$router.go({
27 |             path: this.$nuxt.$router.currentRoute,
28 |             force: true,
29 |           })
30 |         }
31 |       })
32 |     }, (error) => {
33 |       console.error(error)
34 |     })
35 |   },
36 |   asyncData (context) {
37 |     // We are getting only the draft version of the content in this example.
38 |     // In real world project you should ask for correct version of the content
39 |     // according to the environment you are deploying to.
40 |     // const version = context.query._storyblok || context.isDev ? 'draft' : 'published'
41 | 
42 |     const fullSlug = (context.route.path == '/' || context.route.path == '') ? 'home' : context.route.path
43 | 
44 |     // Load the JSON from the API - loadig the home content (index page)
45 |     return context.app.$storyapi.get(`cdn/stories/${fullSlug}`, {
46 |       version: 'draft'
47 |     }).then((res) => {
48 |       return res.data
49 |     }).catch((res) => {
50 |       if (!res.response) {
51 |         console.error(res)
52 |         context.error({ statusCode: 404, message: 'Failed to receive content form api' })
53 |       } else {
54 |         console.error(res.response.data)
55 |         context.error({ statusCode: res.response.status, message: res.response.data })
56 |       }
57 |     })
58 |   }
59 | }
60 | </script>
61 | 


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