Storyblok SEO Plugin

seo-plugin.js

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>
      <label>SEO Title</label>
      <input type=text v-model=model.title class=uk-width-1-1>
    </div>
    <div class=uk-form-row>
      <label>Meta description</label>
      <textarea rows=4 v-model=model.description class=uk-width-1-1></textarea>
      <div>{{ charCount }} of 156 chars used</div>
    </div>
  </div>
  `,
  methods: {
    initWith() {
      return {
        plugin: 'my-seo-plugin',
        title: '',
        description: ''
      }
    },
    pluginCreated() {
      console.log('plugin:created')
    }
  },
  computed: {
    charCount: function charCount() {
      return ((this.model || {}).description || '').length;
    }
  },
  watch: {
    'model': {
      handler: function (value) {
        this.$emit('changed-model', value);
      },
      deep: true
    }
  }
}