Directory structure for single file components

The CMS Questions
1

I’m following the instructions for single file components: Blocks | Kirby CMS

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:

/site/plugins/button/index.js

But parcel creates an index.js in that place.

My structure:

plugins/button:

  index.js (parcel generated file)
  index.php

  blueprints/button.yml
  snippets/button.php
  
  src:
    index.js
    components/Button.vue

plugins/button/src/index.js:

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

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

plugins/button/index.php:

<?php

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?
cheers

2

Your directory structure looks alright to me :thinking:

3

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

4

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

5

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

6

I’ve installed the pluginkit: https://github.com/getkirby/pluginkit/tree/4-panel

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?

7

I’ll try tonight.

8

thx

9

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.

10

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