kirbyup

library3.4.1jsnpmunverified

kirbyup is a zero-configuration bundler specifically designed for Kirby Panel plugins. It streamlines the development and build process by leveraging Vite internally, providing fast Hot Module Replacement (HMR) during development and optimized production builds. The current stable version is 3.4.1, with active development progressing towards v4.0.0, which introduces significant breaking changes related to Vue 3 migration. Its primary differentiator is its tailored approach for the Kirby CMS ecosystem, abstracting away complex bundler configurations for panel developers and allowing them to focus on plugin logic rather than build tooling. The project exhibits a steady release cadence, marked by regular updates and ongoing alpha releases for its next major version. It supports Node.js environments version 18 and above and ships with TypeScript types, facilitating modern JavaScript and TypeScript development workflows for Kirby plugins.

web-framework

npm install kirbyup

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · KIRBYUP

kirbyup

web-frameworkjavascriptv3.4.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

defineConfig

✓ import { defineConfig } from 'kirbyup/config'

✗ import { defineConfig } from 'kirbyup'

Used in `kirbyup.config.ts` or `kirbyup.config.js` for custom configuration. Ensure to import from `kirbyup/config` specifically, not the root package.

CLI Execution (npm script)

✓ "dev": "kirbyup serve src/index.js"

✗ node_modules/.bin/kirbyup serve src/index.js

While directly calling the binary works, it's best practice to define `kirbyup` commands in `package.json` scripts. Ensure your entry point is correct.

CLI Execution (npx)

✓ npx kirbyup serve src/index.js

✗ npx kirbyup serve src/index.js

When using `npx`, it's recommended to add `-y` for non-interactive execution and `@latest` (e.g., `npx -y kirbyup@latest`) if you suspect caching issues, as `npx` may cache older versions.

Demonstrates `kirbyup` setup with a `package.json`, a `kirbyup.config.ts` for custom Vite configuration and path aliases, and a basic plugin entry point in `src/index.js` for a Kirby Panel section.

{ "name": "my-kirby-plugin", "version": "1.0.0", "type": "module", "scripts": { "dev": "kirbyup serve src/index.js", "build": "kirbyup src/index.js" }, "devDependencies": { "kirbyup": "^3.4.1" } } // kirbyup.config.ts import { defineConfig } from 'kirbyup/config' import { resolve } from 'node:path' import { fileURLToPath } from 'node:url' const currentDir = fileURLToPath(new URL('.', import.meta.url)) export default defineConfig({ alias: { // Example: Alias for Panel core components if you clone Kirby repo '@/': `${resolve(currentDir, 'kirby/panel/src')}/` }, vite: { // Custom Vite options (e.g., add plugins) css: { preprocessorOptions: { scss: { /* ... */ } } } } }) // src/index.js (your plugin entry point) // Example: A simple Vue component for your Kirby Panel plugin import { createApp } from 'vue' import MyPanelComponent from './components/MyPanelComponent.vue' panel.plugin('your/plugin', { sections: { 'my-custom-section': { component: MyPanelComponent, props: ['headline'] } } })

kirbyup --version

Debug

Known issues

breakingkirbyup v4.0.0-alpha introduces a breaking change by migrating to Vue 3. This means any existing Kirby Panel plugins built with Vue 2 will require updates to be compatible, including changes to Vuex usage, global APIs, template directives, and removed instance properties like `$children` and `$listeners`.

fix

Review the official Vue 3 Migration Guide and update your plugin's Vue components, store logic (if using Vuex), and API interactions. Be aware of removed options and restructured global APIs.

affects: >=4.0.0-alpha

gotchaWhen invoking `kirbyup` via `npx`, particularly with older Node.js versions or specific configurations, users might encounter `ReferenceError: window is not defined`. This was addressed in v3.4.1 by pinning the `c12` dependency.

fix

Ensure `kirbyup` is updated to at least v3.4.1. If still using `npx`, consider installing `kirbyup` as a development dependency (`npm install -D kirbyup`) or explicitly calling `npx -y kirbyup@latest` to ensure the latest version is used and to bypass potential `npx` caching issues.

affects: <3.4.1

gotcha`kirbyup` requires Node.js version 18 or higher. Using older Node.js versions will result in installation failures or runtime errors due to incompatible JavaScript features or dependencies.

fix

Upgrade your Node.js environment to version 18 or newer. Use a Node Version Manager (like `nvm`) for easy switching and management of Node.js versions.

affects: <3.0.0

gotchaUsing `npx` to run `kirbyup` can sometimes lead to cached outdated versions, even if a newer version is available. This might prevent you from accessing the latest features or bug fixes.

fix

To ensure the latest version, install `kirbyup` as a dev dependency (`npm install -D kirbyup`) and use npm scripts (e.g., `npm run dev`), or explicitly specify `@latest` when using `npx` (e.g., `npx -y kirbyup@latest serve src/index.js`). You might also need to clear the `~/.npm/_npx` cache.

affects: all

Errors

Common errors & fixes

ReferenceError: window is not defined

This error typically occurs in Node.js environments when browser-specific APIs (like `window`) are accessed, often due to a dependency issue, particularly with `c12` prior to v3.4.1.

fix

Update `kirbyup` to v3.4.1 or higher. If using `npx`, ensure you specify `@latest` (`npx -y kirbyup@latest`) or install `kirbyup` as a local dev dependency and use `npm run` scripts.

Vue 2 options (e.g., `data` as an object, `$children`, `$listeners`) are not working as expected in my Kirby Panel plugin.

You are likely using a `kirbyup` v4.0.0-alpha release, which has migrated to Vue 3. Vue 3 has numerous breaking changes from Vue 2, causing incompatibility with older plugin code.

fix

Migrate your Kirby Panel plugin's Vue components and related logic from Vue 2 to Vue 3 syntax and APIs. Consult the official Vue 3 Migration Guide for a comprehensive list of changes, including updates to global APIs, template directives, and instance properties.

Upgrade

Version history

3.4.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/johannschopplich/kirbyup ↗

packagehttps://www.npmjs.com/package/kirbyup ↗

homepagehttps://kirbyup.getkirby.com ↗