Auto-Import Blocks and Fields

WARNING

This feature might be removed in future versions of kirbyup. Consider using manual imports instead (see Recommended Alternative below).

When you have multiple blocks or fields to import, use the kirbyup.import function to simplify the process.

Instead of manually importing each block or field, you can use the kirbyup.import function to import all files that match a glob pattern.

Given the following Panel plugin:

import Bar from './components/blocks/Bar.vue'
import Foo from './components/blocks/Foo.vue'
import Maps from './components/blocks/Maps.vue'

window.panel.plugin('kirbyup/example', {
  blocks: {
    foo: Foo,
    bar: Bar,
    maps: Maps
  }
})

You can use the kirbyup.import function to import all blocks at once:

import { kirbyup } from 'kirbyup/plugin'

window.panel.plugin('kirbyup/example', {
  blocks: kirbyup.import('./components/blocks/*.vue')
})

Recommended Alternative

For better tree-shaking, explicit dependencies that are easier to trace, and IDE support, use manual imports instead:

import Bar from './components/blocks/Bar.vue'
import Foo from './components/blocks/Foo.vue'
import Maps from './components/blocks/Maps.vue'

window.panel.plugin('my-plugin/blocks', {
  blocks: {
    foo: Foo,
    bar: Bar,
    maps: Maps
  }
})

TIP

For plugins with many components, you can organize imports in a separate file:

// src/components/blocks/index.js
export { default as Bar } from './Bar.vue'
export { default as Foo } from './Foo.vue'
export { default as Maps } from './Maps.vue'

// src/index.js
import * as blocks from './components/blocks'

window.panel.plugin('my-plugin/blocks', {
  blocks
})