Fieldtype.js

const Fieldtype = {
  mixins: [window.Storyblok.plugin],
  data() {
    return {
      advancedOpen: false
    }
  },
  template: `<div>
  <div class="uk-margin-small-bottom">
    Google preview
    <div style="margin: 5px 0 15px; padding: 10px; color: #000; background: #fff; border: 1px solid #CCC;">
      <div style="color:blue;text-decoration:underline">{{ model.title || 'Write a title' }}</div>
      <div style="color:green">yoursite.com/example</div>
      <div>{{ model.description || 'Write a description' }}</div>
    </div>
  </div>
  <div class="uk-margin-small-bottom">
    <label class="uk-form-label">Title</label>
    <input v-model="model.title" class="uk-width-1-1" type="text" name="title">
    <span class="uk-text-muted form__hint"></span>
  </div>
  <div class="uk-margin-small-bottom">
    <label class="uk-form-label">Description</label>
    <textarea v-model="model.description" class="uk-width-1-1" type="text" name="description"></textarea>
    <span class="uk-text-muted form__hint">A one to two sentence description for this object.</span>
  </div>
  <a class="link" href="#" @click.prevent="advancedOpen = !advancedOpen">Show/Hide advanced</a>
  <div class="uk-margin-top" v-if="advancedOpen">
  <div>
  <a class="uk-float-right link" href=https://ogp.me/ target=_blank title="What is Open Graph?">What is Open Graph?</a>
  </div>
  <div class="uk-margin-small-bottom">
    <label class="uk-form-label">OG Title</label>
    <input v-model="model.og_title" class="uk-width-1-1" type="text" name="og_title">
    <span class="uk-text-muted form__hint">The title of your object.</span>
  </div>
  <div class="uk-margin-small-bottom">
    <label class="uk-form-label">OG Description</label>
    <textarea v-model="model.og_description" class="uk-width-1-1" type="text" name="og_description"></textarea>
    <span class="uk-text-muted form__hint">A one to two sentence description of your object.</span>
  </div>
  <div class="uk-margin-small-bottom">
    <label class="uk-form-label">OG Image</label>
    <div v-if="model.og_image" class="uk-flex uk-flex-middle uk-margin-bottom">
      <img :src="model.og_image" class="image" />
      <div class="util__break-all">
        <a data-uk-tooltip title="Remove" class="image__btn" v-if="model" v-on:click.prevent="model.og_image = ''"><i class="uk-icon-minus-circle"></i></a>
      </div>
    </div>
    <sb-asset-selector :uid="uid" field="og_image"></sb-asset-selector>
    <span class="uk-text-muted form__hint">An image URL which should represent your object.</span>
  </div>
  <hr>
  <div>
    <a class="uk-float-right link" href=https://dev.twitter.com/cards/getting-started target=_blank title="What is a Twitter Card?">
      What is a Twitter Card?
    </a>
  </div>
  <div class="uk-margin-small-bottom">
    <label class="uk-form-label">Twitter Title</label>
    <input v-model="model.twitter_title" class="uk-width-1-1" type="text" name="twitter_title">
    <span class="uk-text-muted form__hint">The title of your object.</span>
  </div>
  <div class="uk-margin-small-bottom">
    <label class="uk-form-label">Twitter Description</label>
    <textarea v-model="model.twitter_description" class="uk-width-1-1" type="text" name="twitter_description"></textarea>
    <span class="uk-text-muted form__hint">A one to two sentence description of your object.</span>
  </div>
  <div class="uk-margin-small-bottom">
    <label class="uk-form-label">Twitter Image</label>
    <div v-if="model.twitter_image" class="uk-flex uk-flex-middle uk-margin-bottom">
      <img :src="model.twitter_image" class="image" />
      <div class="util__break-all">
        <a data-uk-tooltip title="Remove" class="image__btn" v-if="model" v-on:click.prevent="model.twitter_image = ''"><i class="uk-icon-minus-circle"></i></a>
      </div>
    </div>
    <sb-asset-selector :uid="uid" field="twitter_image"></sb-asset-selector>
    <span class="uk-text-muted form__hint">An image URL which should represent your object.</span>
  </div>
  </div>
</div>`,
  methods: {
    initWith() {
      return {
        plugin: 'seo_metatags',
        title: '',
        description: '',
        og_title: '',
        og_description: '',
        og_image: '',
        twitter_title: '',
        twitter_description: '',
        twitter_image: ''
      }
    },
    pluginCreated() {
      console.log('plugin:created')
    }
  },
  watch: {
    'model': {
      handler: function (value) {
        this.$emit('changed-model', value);
      },
      deep: true
    }
  }
}