Local development

If you want to create more complex plugins you have also the option to develop a plugin with a local dev environment using your favorite editor. This let’s you load other plugins and organize your code in multiple files.

There is also a great tutorial about plugin development on Markus Oberlehner’s blog: https://markus.oberlehner.net/blog/building-a-custom-storyblok-field-type-plugin-with-vue/

How to develop plugins locally

1. Start by cloning the field-type repository and run the dev server.

$ git clone https://github.com/storyblok/storyblok-fieldtype
$ cd storyblok-fieldtype
$ npm install
$ npm run dev

This will spin up a server on http://localhost:8080.

2. Next you need to change the url of the Storyblok app from https://app.storyblok.com to http://app.storyblok.com as your local environment runs on http.

3. Open the file Plugin.vue and change the plugin name in the initWith method to the one you created in Storyblok.

4. Now you can click the checkbox “Enable local dev mode” to load your local environment into the field-type preview and start developing your plugin.

Local development

5. When you finished developing your plugin you need to run npm run build and copy the content of the file dist/export.js into the editor text field of the Storyblok app and click the publish button.


If the name of the plugin you created in Storyblok doesn’t match the name in the initWith() method in the Plugin.vue file, you will get an import error. Also make sure that you’re using the correct version of @vue/cli-service, so it compiles correctly.