Directory structure for single file components

Kirby 3 Solved ✅
,
1

I’m following the instructions for single file components: https://getkirby.com/docs/reference/plugins/extensions/blocks#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:

/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.