TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published


This package helps you integrate interactive-blocks to your Vue2 project.


The starter guide is moved to the Example Code

🧩 Provide Data to <ib-block>

You must provide index and value props. If the block has no index, just pass zero. Both of them can be a getter function.

🧩 Bind your Array to <ib-slot>

You must choose one of these ways to pass the array:

  • Approach 1: <ib-slot v-model="item.children">

    This is preferred. When the array content is changed, a new array is created and submitted via change event.

  • Approach 2: <ib-slot :list="item.children">

    When the array content is changed, the array is directly updated.

💅 Styling

(for <ib-slot> and <ib-block>)

When blocks and slots get active and focused, they will get class="isActive" and / or class="hasFocus".

We don't provide default styles. Please implement your own styles.

  • To use other class names, set is-active-class="my-active-class" and has-focus-class="my-focus-class"

  • To use other tag name rather than "div", set tag-name="section"

✈️ Copy, Paste, Data Transform

When copy a block, we directly serialize value of <ib-block> to JSON, and write to clipboard.

When paste one or more blocks, the JSON objects will be directly pushed into the array that bound to <ib-slot>

If you want to transform the data, before pushing into the array, you can set transform-data="myTransformMethod" to <ib-slot>. For example:

myTransformMethod(rawObject) {
  return {
    id: uuid(),  // always make a new id when pasting




Package Sidebar


npm i @lyonbot/interactive-blocks-vue2

Weekly Downloads






Unpacked Size

24 kB

Total Files


Last publish


  • lyonbot