Skip to content

Instantly share code, notes, and snippets.

@onefriendaday
onefriendaday / cleanup-field-script.js
Created February 20, 2019 16:10
Storyblok Cleanup script for a specific field
const StoryblokClient = require('storyblok-js-client')
// Insert your oauth token and folder id
const Storyblok = new StoryblokClient({
oauthToken: 'YOUR_OAUTH_TOKEN'
})
const fieldToDelete = 'my_field'
const componentName = 'page'
const Fieldtype = {
mixins: [window.Storyblok.plugin],
template: `<div class="uk-flex">
<input class="uk-margin-right" v-model="model.color" type="color" />
<input class="uk-width-1-1" v-model="model.color" /></div>`,
methods: {
initWith() {
return {
plugin: 'ef-native-color-picker',
color: ''
const Fieldtype = {
mixins: [window.Storyblok.plugin],
template: `<div>
<select v-model="model.value">
<option :key="tag.name" :value="tag.name" v-for="tag in tags">{{tag.name}}</option>
</select>
</div>`,
data() {
return {
tags: []
@onefriendaday
onefriendaday / Fieldtype.js
Created February 8, 2019 14:09
Storyblok Advanced Image field type
const Fieldtype = {
mixins: [window.Storyblok.plugin],
template: `<div class="image__wrap">
<div class="uk-text-center uk-margin-small-bottom" v-if="validImage">
<img :src="model.image" class="image" />
</div>
<div class="uk-margin-small-bottom">
<sb-asset-selector :uid="uid" field="image">
</sb-asset-selector>
</div>
@onefriendaday
onefriendaday / Fieldtype.js
Last active February 1, 2019 19:37
Storyblok Fieldtype with tree selector
const Fieldtype = {
mixins: [window.Storyblok.plugin],
template: `<div>
<ul class="uk-list">
<li :key="item.id" v-for="item in tree">
<tree :category="item" :sub-categories="allCats" :categories.sync="model.categories"></tree>
</li>
</ul>
</div>`,
components: {
@onefriendaday
onefriendaday / Fieldtype.js
Created January 29, 2019 16:25
Storyblok Fieldtype with sb-asset-selector for Tinymce
const Fieldtype = {
mixins: [window.Storyblok.plugin],
template: `<div>
<sb-asset-selector :uid="uid" field="image">
</sb-asset-selector>
<textarea v-model="model.content" id="mytextarea">
</textarea>
</div>`,
methods: {
initWith() {
@onefriendaday
onefriendaday / Fieldtype.js
Created January 28, 2019 16:31
Storyblok fieldtype with field validation
const Fieldtype = {
mixins: [window.Storyblok.plugin],
template: `<div>
<input class="uk-width-1-1" @input="validate" v-model="proxyModel.example" />
<div v-if="!valid">Please fill out this field</div>
</div>`,
data() {
return {
proxyModel: {},
valid: false
@onefriendaday
onefriendaday / Fieldtype.js
Created January 26, 2019 12:07
Fieldtype example of 2 level cascanding select
const Fieldtype = {
mixins: [window.Storyblok.plugin],
template: `<div>
<div class="uk-form-row">
Category
<select v-model="model.category" class="uk-width-1-1">
<option></option>
<option :key="cat.item.id" :value="cat.item" v-for="cat in tree">{{ cat.item.name }}</option>
</select>
</div>
@onefriendaday
onefriendaday / Fieldtype.js
Created January 23, 2019 09:49
Fieldtype example for a cascading select
const Fieldtype = {
mixins: [window.Storyblok.plugin],
template: `<div>
<div class="uk-form-row">
Category
<select v-model="model.category" class="uk-width-1-1">
<option></option>
<option :key="item.id" :value="item.id" v-for="item in categories">{{ item.name }}</option>
</select>
</div>
@onefriendaday
onefriendaday / Plugin.js
Created January 7, 2019 11:53
Bullet point plugin
const Fieldtype = {
mixins: [window.Storyblok.plugin],
template: `<div class="List">
<ol class="uk-list uk-margin-bottom-remove">
<li
v-for="(item, index) in model.items"
:key="index"
class="uk-flex uk-flex-middle uk-margin-small-bottom">
<input
v-model="model.items[index]"