The plugin editor
To allow quick prototyping of your idea without you downloading or installing anything on your machine we’ve introduced a plugin creation area where you can prototype your basic idea right in the browser. Once you’ve created your plugin you will be able to access the view below.
The Prototyping Area
On the left side of the view you can see a demo Fieldtype which is a basic Vue.js component.
Those options will be passed to the preview instance of your plugin. Option Keys entered here will also be added to every newly created plugin instance during schema/field defintion.
Space Id: Space that will be passed to your plugin as preview configuration
Options: Key value pairs of configuration options which will be passed to your preview
Field type preview
The plugin preview will render your custom Vue.js component in a sandbox environment either with no options and space configuration or with those configured in the plugin options. It will be refreshed every time you press save.
Find more information on “Enable local dev mode” in the next part of the docs.
The plugin output contains all field defined in the
initWith method and all your
model properties. Only properties added to the
model property will be stored and later be retrieved in the Storyblok Content delivery API. If you only need a local variable for helpers or similar you can use Vue data instead.
The settings area will allow you to submit your plugin to review and also assign it to specific spaces. This is important because by default only your account is able to use your plugin. Once you’ve assigned the plugin to one of the spaces you’re either owner, admin or collaborator the admin of that space will be able to use it in their components and content types.