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

Field-Type Plugin

NOTE:

The articles in this series describe the legacy field plugin API that is tightly coupled to Vue v2.5.2. To create field plugins with other frameworks, see the new field plugin SDK.

Field plugins allow you to define customized field types such as a color picker or a google maps location selector. It’s basically a Vue.js 2.5.2 component extended with a few helpers in the window.Storyblok.plugin variable.

Field-type Plugin

To create a new field-type go into the Partner Portal and click on Field-types {1}. If your organization already has field-types defined, it should be visible here. You can create a new field-type by clicking the New button {2}. Enter a unique name slug {3} and then you should be redirected to the Plugin Editor.

Plugin Image
1
2
3

You can also create personal field-types that are only visible to you under the https://app.storyblok.com/#!/me/plugins link. Go into your Account {1} and click on Plugins {2}. You can create a new field-type by clicking the New button {3}.

plugin in personal portal
1
2
3

Section titled The naming of Field-Type Plugins The naming of Field-Type Plugins

You will often find that a plugin name might already be taken. This happens because plugin names are globally unique across all accounts. This limitation is necessary in order to be able to push any plugin to the App Store without naming conflicts. If you want to duplicate a plugin field from tutorials, or from our examples you can use a prefix as we do in our examples ex-your_plugin_name to create it.