onefriendaday

const Fieldtype = {
  mixins: [window.Storyblok.plugin],
  template: `<div>
  <div v-if="modalIsOpen">Modal is open</div>
  <div v-if="!modalIsOpen">Modal is closed</div>
  <a @click="doOpen">Open modal</a>
  <a @click="doClose">Close modal</a>
  </div>`,
  data() {
    return {

onefriendaday

const Fieldtype = {
  mixins: [window.Storyblok.plugin],
  template: `<div>
  <div v-if="modalIsOpen">Modal is open</div>
  <div v-if="!modalIsOpen">Modal is closed</div>
  <a @click="doOpen">Open modal</a>
  <a @click="doClose">Close modal</a>
  <select v-model="options"><option value="1"></option></select>
  </div>`,
  data() {

onefriendaday

const Fieldtype = {
  mixins: [window.Storyblok.plugin],
  template: `
  <div>Google snippet preview:
    <div style="margin:5px 0 15px;padding:10px;color:#000;background:#fff">
      <div style="color:blue;text-decoration:underline">{{ model.title }}</div>
      <div style="color:green">yoursite.com/example</div>
      <div>{{ model.description }}</div>
    </div>
    <div class=uk-form-row>

onefriendaday

const Fieldtype = {
  mixins: [window.Storyblok.plugin],
  template: `<div><input class="uk-width-1-1" v-model="model.number" /></div>`,
  methods: {
    initWith() {
      return {
        plugin: 'number-plugin',
        number: '0'
      }
    },

onefriendaday

const StoryblokClient = require('storyblok-js-client')

// Insert your oauth token and folder id
const Storyblok = new StoryblokClient({
  oauthToken: 'YOUR_OAUTH_TOKEN'
})

// Insert your source space and folder id
const spaceId = 'YOUR_SPACE_ID'

onefriendaday

const Fieldtype = {
  mixins: [window.Storyblok.plugin],
  template: `<div>
  <div class="uk-form-label">Do you have a headset?</div>
  <label><input type="radio" v-model="model.has_headset" :value="true" /> Yes</label>
  <label><input type="radio" v-model="model.has_headset" :value="false" class="uk-margin-small-left" /> No</label>
  <div v-if="model.has_headset" class="uk-margin-small-top">
    <div class="uk-form-label">How many?</div>
    <input class="uk-width-1-1" v-model="model.number_of_headsets" type="number" />
  </div>

onefriendaday

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]"

onefriendaday

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

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

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