Little Help with the vue components

The CMS Questions
1

I am relatively new to vue. I have about 10 custom blocks in my index.js in my plugin-root. Now i decided to outsource them to own vue-components. But after compiling the build is successful but the components are not rendering correctly:

//...my-plugin/src/index.js
import Button from "./components/Button.vue";

panel.plugin("khepri-design/khepri-base", {
    fields: {
        button: Button
    }
});

//...my-plugin/src/components/Button.vue
import Button from "./components/Button.vue";

<template>
  {{ content.buttontext }}
</template>

<script>
  export default {}
</script>

I think i do not really understand what to do in the script-part. Can someone help?

Greetings

2

In this block type cookbook recipe we habe both: the block js in the index.js and the block as single file component: Creating a custom block type from scratch | Kirby CMS

Not that we import in index.js and export in the component (and not import itself inside the component, although there might be cases where you import other components in your components).

3

Hi, thank you very much for your reply.

I also followed the cookbook from here: Creating a custom block type from scratch | Kirby CMS

And my index.js and index.css in the plugin-root are also filled after compiling.
Like you mentioned i always export in the components and import in src/indexjs. This is the structure from my files:

behavior
behavior385×825 43.1 KB

Maybe i do have to do smth more in the script tag?:

<script>
export default {}
</script>
4

Don’t you get an error message when building? Because you don’t have a root element in your template (e.g. a button element in this case)

5

I simplified the code down for the post, my fault. This is the exact code, and i dont get a error while compiling:

<template>
  <div :class="'kd-button-preview kd-button-align-' + content.buttonalign" @dblclick="open">
    <input type="text" placeholder="Text eingeben..." class="wysiwyg-black kd-text-center"  :value="content.buttontext" @input="update({ buttontext: $event.target.value })"/>
  </div>
</template>

After compiling its correctly present in the index.js:

...("div",{class:"kd-button-preview kd-button-align-"+t.content.buttonalign,on:{dblclick:t.open}}...

PS: Leaving the rout-element out in the component, won’t result in an error while compiling, but i don’t know, if the data would be parsed correctly.

6

This here doesn’t make sense either, you want to create a block not a field?

Right, makes more sense to post the complete code, otherwise we get sidetracked.

7

Damn, i overlooked that! That was the mistake, thank you very much for pointing out!

8

Hm, I get an error when I do that:

[vite-plugin-vue2] Component template requires a root element, rather than just text.

9

grafik
grafik844×527 30.8 KB

Did it like that and i was able to build

10

seeems like the watcher fails with your error msg. But a simple build is successful. Either way it is wrong to have no root-element thats correct

11

Yes, I used the watcher. Makes more sense during development.