Almost EVERYONE who tried headless systems said they saw benefits. Download the state of CMS now!

Storyblok now on AWS Marketplace: Read more

O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content

How can I open my custom field type in full screen?

  • FAQ
  • How can I open my custom field type in full screen?

Each custom field type is sandboxed in an iframe. To still allow you to open overlays or similar full screen behaviors you can use the following setup, which will open your custom field type in an overlay prepared by us.

<template>
  <div>
    <div v-show="!modalIsOpen">
      Custom field is in sidebar / not in modal
      <button @click=openModal>Open</button>
    </div>
    <div v-if="modalIsOpen">
      Custom field is in not in sidebar but in a modal
      <button @click=closeModal>Close</button>
    </div>
  </div>
</template>

<script>
export default {
  mixins: [window.Storyblok.plugin],
  data() {
    return {
      modalIsOpen: false
    }
  },
  methods: {
    initWith() {
      return {
        // needs to be equal to your storyblok plugin name
        plugin: 'my-plugin-name'
      }
    },
    pluginCreated() {
      // eslint-disable-next-line
      console.log('plugin:created')
    },
    openModal(){
      this.$emit('toggle-modal', true)
      this.modalIsOpen = true
    },
    closeModal(){
      this.$emit('toggle-modal', false)
      this.modalIsOpen = false
    }
  },
  watch: {
    'model': {
      handler: function (value) {
        this.$emit('changed-model', value);
      },
      deep: true
    }
  }
}
</script>