Directory structure for single file components

I’m following the instructions for single file components:

At the moment everything (blueprint, snippet) works except the preview, I’m getting the bolt icon and ‘Button’. I’m unsure about the directory structure according the reference index.js lives here:


But parcel creates an index.js in that place.

My structure:


  index.js (parcel generated file)



import Button from "./components/Button.vue";

panel.plugin("working-title/button-block", {
  blocks: Button



Kirby::plugin('working-title/button-block', [
  'blueprints' => [
    'blocks/button' => __DIR__ . '/blueprints/button.yml'
  'snippets' => [
    'blocks/button' => __DIR__ . '/snippets/button.php'

My first try at this, so not sure how to proceed, any ideas?

Your directory structure looks alright to me :thinking:

no console errors either …
Must be missing something, but what?

I can’t spot anything at first sight. Caching issue?

Nope, looked into that
Question: so the build/dev scripts doesn’t/shouldn’t generate a build version at another location?

btw, just tried the simple preview again:

Works as expected

I’ve installed the pluginkit:

Works fine.

There is a mistake in the folder structure above; ‘blocks’ directories are missing in blueprints and snippets. Corrected that but still no joy, would be nice if you could test the example in the reference?

I’ll try tonight.


Ok, I had a closer look and found that there is an error in the documentation.

Instead of

it must be

panel.plugin("texnixe/button-block", {
  blocks: {
    button: Button

I will fix the error now.

Edit: Done.

Ok, thanks for checking.
The single file component works now.