vuejs-boilerplate for Storyblok
A Storyblok boilerplate with vuejs to simply start your website with us.
Imagine you have a single page application and want some pages editable with a CMS. This is now possible with Storyblok.
What is a storyblok boilerplate
If you want to use your server or have already an existing project in which you want to integrate Storyblok you can use one of our boilerplates.
How can I start with a boilerplate
The most efficient way to start a storyblok project as a developer would be our Command Line Interface.
npm i storyblok -g
storyblokand choose your boilerplate. You can of course simply download or clone this repository as well.
git clone https://github.com/storyblok/vuejs-boilerplateConfiguration
In the src/components/Index.vue you can add your token which can be found in your space information. What is a Space?:
window.storyblok.init({
accessToken: 'Iw3XKcJb6MwkdZEwoQ9BCQtt'
})Start your local environment
Make sure npm is installed:
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --reportFolder structure
/src/The place where you should put all your components, styles, assets and of course your source code. For static images there is thestaticfolder in the root./src/components/All your layouts and components at one space - if you add a new or change an existing Vue component (.vue) the webpack build will trigger an instant reload for you in the browser - each component is a representation of a storyblok component. If you create a Teaser component in storyblok - make sure to create aTeaser.vueas well and register it in themain.js- so the setup knows about the component./static/The place to put your static files.
You want to know more about storyblok?
