kirbyup

https://kirbyup.getkirby.com
Admin
kirbyup is a zero-config Vite-based bundler for Kirby Panel plugins that provides fast production...
Tokens:12,132
Snippets:153
Trust Score:10
Update:3 days ago
Show doc for...
Tokens:
Raw
### Start the development server

Source: https://kirbyup.getkirby.com/guide/getting-started.html

Run the development server with hot module replacement.

```bash
npm run dev
```

```text
 kirbyup  v4.0.0-alpha.8  starting the development server

  ➜  Server:   http://localhost:5177
  ➜  Plugin:   index.dev.js
  ➜  Watching: ./**/*.php

  ready in 23 ms – open the Panel and your changes appear as you save
  stop with Ctrl-C
```

--------------------------------

### kirbyup.config.js example

Source: https://kirbyup.getkirby.com/api/config.html

Example configuration file using defineConfig from 'kirbyup/config'. The file can be .ts, .mjs, or .js and is loaded with c12. Neither .kirbyuprc nor a package.json key is read.

```javascript
// kirbyup.config.js
import { defineConfig } from 'kirbyup/config'

export default defineConfig({
  alias: {},
  vite: {},
})
```

--------------------------------

### Start the development server

Source: https://kirbyup.getkirby.com/api

Starts a Vite dev server and generates an index.dev.js file for hot module replacement.

```bash
kirbyup dev src/index.js
```

```text
 kirbyup  v4.0.0-alpha.8  starting the development server

  ➜  Server:   http://localhost:5177
  ➜  Plugin:   index.dev.js
  ➜  Watching: ./**/*.php

  ready in 23 ms – open the Panel and your changes appear as you save
  stop with Ctrl-C
```

--------------------------------

### Install kirbyuse with pnpm

Source: https://kirbyup.getkirby.com/guide/kirbyuse

Install the package as a development dependency using pnpm.

```bash
pnpm add -D kirbyuse
```

--------------------------------

### Install kirbyuse with npm

Source: https://kirbyup.getkirby.com/guide/kirbyuse

Install the package as a development dependency using npm.

```bash
npm install -D kirbyuse
```

--------------------------------

### Start the development server on a custom port

Source: https://kirbyup.getkirby.com/api

Uses the --port option to specify the dev server port.

```bash
kirbyup dev src/index.js --port 3000
```

--------------------------------

### Install kirbyup with npm

Source: https://kirbyup.getkirby.com/guide/getting-started.html

Add kirbyup as a development dependency using npm.

```bash
npm install -D kirbyup
```

--------------------------------

### Install kirbyup with pnpm

Source: https://kirbyup.getkirby.com/guide/getting-started.html

Add kirbyup as a development dependency using pnpm.

```bash
pnpm add -D kirbyup
```

--------------------------------

### Start the development server with custom watch paths

Source: https://kirbyup.getkirby.com/api

Configures specific paths to trigger page reloads when changed.

```bash
kirbyup dev src/index.js --watch-path "snippets/*.php,templates/*.php"
```

--------------------------------

### Clone Kirby into the plugin folder

Source: https://kirbyup.getkirby.com/cookbook/import-from-panel.html

Initial setup step to clone the Kirby repository into your plugin directory.

```bash
git clone git@github.com:getkirby/kirby.git
```

--------------------------------

### Project structure example

Source: https://kirbyup.getkirby.com/guide/path-aliases

A representation of the project directory structure showing the src folder containing components and utils.

```text
.
├─ src
│  ├─ components
│  │  └─ fields
│  │     └─ MyField.vue
│  └─ utils
│     └─ index.js
```

--------------------------------

### Install kirbyuse with yarn

Source: https://kirbyup.getkirby.com/guide/kirbyuse

Install the package as a development dependency using yarn.

```bash
yarn add -D kirbyuse
```

--------------------------------

### Install kirbyup with yarn

Source: https://kirbyup.getkirby.com/guide/getting-started.html

Add kirbyup as a development dependency using yarn.

```bash
yarn add -D kirbyup
```

--------------------------------

### Install UnoCSS via pnpm

Source: https://kirbyup.getkirby.com/guide/unocss.html

Install the UnoCSS package as a development dependency using pnpm.

```bash
pnpm add -D unocss
```

--------------------------------

### Use prefixed utility classes

Source: https://kirbyup.getkirby.com/guide/unocss.html

Example of applying prefixed utility classes to an HTML element.

```html
<div class="demo-p-2 demo-lg:p-4">
```

--------------------------------

### Install UnoCSS via npm

Source: https://kirbyup.getkirby.com/guide/unocss.html

Install the UnoCSS package as a development dependency using npm.

```bash
npm install -D unocss
```

--------------------------------

### Run kirbyup without installation

Source: https://kirbyup.getkirby.com/guide/getting-started.html

Use npx to run kirbyup without adding it as a project dependency.

```bash
npx -y kirbyup src/index.js
```

--------------------------------

### Add a Vite Plugin

Source: https://kirbyup.getkirby.com/guide/config-file

Example of appending a plugin to the Vite configuration, specifically using node-polyfills.

```javascript
// kirbyup.config.js
import { defineConfig } from 'kirbyup/config'
import { nodePolyfills } from 'vite-plugin-node-polyfills'

export default defineConfig({
  vite: {
    plugins: [nodePolyfills()],
  },
})
```

--------------------------------

### Start the development server without page reloads

Source: https://kirbyup.getkirby.com/api

Disables automatic page reloads while keeping hot module replacement active.

```bash
kirbyup dev src/index.js --no-watch
```

--------------------------------

### Reuse Panel field props in a custom field

Source: https://kirbyup.getkirby.com/cookbook/import-from-panel.html

Example of importing base field props and mixins from the Panel source into a custom field component.

```javascript
import { props as FieldProps } from '@/components/Forms/Field.vue'
import { options } from '@/mixins/props.js'

export default {
  mixins: [FieldProps, options],
}
```

--------------------------------

### Build a plugin with kirbyup

Source: https://kirbyup.getkirby.com/api

Bundles the entry file and its imports into minified index.js and index.css files.

```bash
kirbyup src/index.js
```

```text
 kirbyup  v4.0.0-alpha.8  building src/index.js

  ➜  ./index.js   0.05 kB · gzip 0.07 kB
  ➜  ./index.css  0.02 kB · gzip 0.04 kB
  built in 22 ms
```

--------------------------------

### Build a plugin with custom watch paths

Source: https://kirbyup.getkirby.com/api

Watches specific files and folders instead of the default entry file's folder.

```bash
kirbyup src/index.js --watch-path src,assets
```

--------------------------------

### useApp

Source: https://kirbyup.getkirby.com/guide/kirbyuse

Returns panel.app, the Vue application instance.

```APIDOC
## useApp

### Description
Returns `panel.app`, the Vue application instance.

### Returns
- **app** (object) - The Vue application instance.

### Example
```js
import { useApp } from 'kirbyuse'

const app = useApp()
```
```

--------------------------------

### Build for production

Source: https://kirbyup.getkirby.com/guide/getting-started.html

Generate minified production files for the plugin.

```bash
npm run build
```

```text
 kirbyup  v4.0.0-alpha.8  building src/index.js

  ➜  ./index.js   0.05 kB · gzip 0.07 kB
  ➜  ./index.css  0.02 kB · gzip 0.04 kB
  built in 22 ms
```

--------------------------------

### Accessing Panel services with usePanel

Source: https://kirbyup.getkirby.com/guide/kirbyuse

Demonstrates using usePanel to access the global window.panel object and its services.

```js
import { usePanel } from 'kirbyuse'

const panel = usePanel()

panel.notification.success('Saved')
panel.dialog.open({ /* ... */ })
panel.view.reload()
```

--------------------------------

### Configure package.json scripts

Source: https://kirbyup.getkirby.com/guide/getting-started.html

Add the dev and build scripts to your package.json file.

```json
{
  "scripts": {
    "dev": "kirbyup dev src/index.js",
    "build": "kirbyup src/index.js"
  },
  "devDependencies": {
    "kirbyup": "^4.0.0"
  }
}
```

--------------------------------

### Typing the global panel object

Source: https://kirbyup.getkirby.com/guide/kirbyuse

Importing the package in the entry file to enable type hints for window.panel in JavaScript.

```js
// src/index.js
import 'kirbyuse'

window.panel.notification.success('Types work')
//           ^? (property) notification: PanelNotification
```

--------------------------------

### useLibrary

Source: https://kirbyup.getkirby.com/guide/kirbyuse

Returns Kirby's $library bundle, such as dayjs.

```APIDOC
## useLibrary

### Description
Returns Kirby's `$library` bundle, such as dayjs.

### Returns
- **library** (object) - Kirby's library bundle.

### Example
```js
import { useLibrary } from 'kirbyuse'

const library = useLibrary()
```
```

--------------------------------

### useHelpers

Source: https://kirbyup.getkirby.com/guide/kirbyuse

Returns Kirby's $helper utilities.

```APIDOC
## useHelpers

### Description
Returns Kirby's `$helper` utilities.

### Returns
- **helpers** (object) - Kirby's helper utilities.

### Example
```js
import { useHelpers } from 'kirbyuse'

const helpers = useHelpers()
```
```

--------------------------------

### Build a plugin to a specific directory

Source: https://kirbyup.getkirby.com/api

Uses the --out-dir option to specify the destination directory for the output files.

```bash
kirbyup src/index.js --out-dir ../site/plugins/my-plugin
```

--------------------------------

### Configuring IDE support with jsconfig.json

Source: https://kirbyup.getkirby.com/guide/path-aliases

Configuration to enable jump-to-definition and autocompletion for path aliases in the editor.

```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"],
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*"]
}
```

--------------------------------

### PostCSS configuration file

Source: https://kirbyup.getkirby.com/guide/postcss.html

Create a postcss.config.js file in the project root to define PostCSS plugins.

```javascript
// postcss.config.js
export default {
  plugins: [],
}
```

--------------------------------

### Register components with kirbyup.import

Source: https://kirbyup.getkirby.com/guide/glob-imports

Registers all components matching the glob pattern in the plugin definition. The component names are derived from the file names in lowercase.

```javascript
// src/index.js
import Bar from './components/blocks/Bar.vue'
import Foo from './components/blocks/Foo.vue'
import Maps from './components/blocks/Maps.vue'
import { kirbyup } from 'kirbyup/plugin'

window.panel.plugin('my/plugin', {
  blocks: { 
    bar: Bar, 
    foo: Foo, 
    maps: Maps, 
  }, 
  blocks: kirbyup.import('./components/blocks/*.vue'), 
})
```

--------------------------------

### Basic kirbyup.config.js structure

Source: https://kirbyup.getkirby.com/guide/config-file

The base configuration file structure for adding import aliases or custom Vite options.

```javascript
// kirbyup.config.js
import { defineConfig } from 'kirbyup/config'

export default defineConfig({
  alias: {
    // Extra import aliases
  },
  vite: {
    // Vite options, merged into kirbyup's defaults
  },
})
```

--------------------------------

### Build a plugin in watch mode

Source: https://kirbyup.getkirby.com/api

Rebuilds the plugin automatically when files in the entry file's folder change.

```bash
kirbyup src/index.js --watch
```

```text
 kirbyup  v4.0.0-alpha.8  building src/index.js

  built in 20 ms
  ➜  Watching: src
  ➜  src/index.js change
```

--------------------------------

### Configure uno.config.js

Source: https://kirbyup.getkirby.com/guide/unocss.html

Configure UnoCSS with a prefix to avoid collisions and disable preflight to prevent interference with Kirby's UI.

```javascript
// uno.config.js
import { defineConfig, presetWind3 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3({
      prefix: 'demo-',
      preflight: false,
    }),
  ],
  content: {
    filesystem: ['src/**/*.vue'],
  },
})
```

--------------------------------

### Importing kirbyuse and Vue

Source: https://kirbyup.getkirby.com/guide/kirbyuse

Shows how to import Kirby-specific utilities from kirbyuse and standard Vue functions.

```js
import { computed, ref, usePanel } from 'kirbyuse'
import { usePanel } from 'kirbyuse'
import { computed, ref } from 'vue'
```

--------------------------------

### useApi

Source: https://kirbyup.getkirby.com/guide/kirbyuse

Returns panel.api for requests to the backend.

```APIDOC
## useApi

### Description
Returns `panel.api` for making requests to the backend.

### Returns
- **api** (object) - The Kirby API instance.

### Example
```js
import { useApi } from 'kirbyuse'

const api = useApi()
```
```

--------------------------------

### useBlock

Source: https://kirbyup.getkirby.com/guide/kirbyuse

Provides helpers for custom block components.

```APIDOC
## useBlock

### Description
Provides helpers for custom block components.

### Returns
- **field** (object) - The field object.
- **open** (function) - Opens the block editor.
- **update** (function) - Updates the block content.

### Example
```js
import { useBlock } from 'kirbyuse'

const { field, open, update } = useBlock()
```
```

--------------------------------

### Register components with kirbyup.import

Source: https://kirbyup.getkirby.com/api/plugin

Registers files matching the provided glob pattern as plugin blocks, keyed by their filename. The glob must be a string literal relative to the calling file.

```javascript
// src/index.js
import { kirbyup } from 'kirbyup/plugin'

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

--------------------------------

### kirbyup.import(glob)

Source: https://kirbyup.getkirby.com/api/plugin

Registers every file that matches the given glob pattern, keyed by the lowercased file name without extension. The glob must be a string literal relative to the file that calls it.

```APIDOC
## kirbyup.import(glob)

### Description
Registers every file that matches the given glob pattern, keyed by the lowercased file name without extension. For example, Foo.vue becomes foo, MyBlock.vue becomes myblock.

### Parameters
- **glob** (string) - Required - A string literal, relative to the file that calls it. At build time the call is rewritten to import.meta.glob(glob, { eager: true }). A dynamic string is not expanded and the runtime throws.

### Usage Example
```js
// src/index.js
import { kirbyup } from 'kirbyup/plugin'

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

### Notes
- The glob must be a string literal; dynamic strings are not supported and will cause a runtime error.
- See Auto-Imports for when explicit imports are the better choice.
```

--------------------------------

### Migrate kirbyup.config.js configuration

Source: https://kirbyup.getkirby.com/guide/migration

Replace the deprecated extendViteConfig key with the vite key in your configuration file.

```js
// kirbyup.config.js
import { defineConfig } from 'kirbyup/config'

export default defineConfig({
  extendViteConfig: { 
  vite: { 
    plugins: [],
  },
})
```

--------------------------------

### Defining environment variables in .env

Source: https://kirbyup.getkirby.com/guide/environment-variables

Variables prefixed with KIRBYUP_ or VITE_ are exposed to the bundle, while others remain server-side.

```ini
# .env
DB_PASSWORD=secret
KIRBYUP_API_BASE=https://example.test/api
```

--------------------------------

### Re-export components from an index file

Source: https://kirbyup.getkirby.com/guide/glob-imports

A middle-ground approach that keeps the entry file short by re-exporting components from a dedicated index file.

```javascript
// 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'
```

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

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

--------------------------------

### Importing with path aliases in Vue

Source: https://kirbyup.getkirby.com/guide/path-aliases

Comparison between relative path imports and using the ~/ alias in a Vue component.

```javascript
import { myFunction } from '../../utils'
import { myFunction } from '~/utils'
```

--------------------------------

### Register the plugin in src/index.js

Source: https://kirbyup.getkirby.com/guide/getting-started.html

The entry file registers the plugin using the window.panel.plugin method.

```js
// src/index.js
import DemoField from './components/DemoField.vue'

window.panel.plugin('my/plugin', {
  fields: {
    demo: DemoField,
  },
})
```

--------------------------------

### Configure kirbyup.config.js

Source: https://kirbyup.getkirby.com/guide/unocss.html

Register the UnoCSS Vite plugin in your kirbyup configuration.

```javascript
// kirbyup.config.js
import { defineConfig } from 'kirbyup/config'
import UnoCSS from 'unocss/vite'

export default defineConfig({
  vite: {
    plugins: [UnoCSS()],
  },
})
```

--------------------------------

### Import virtual:uno.css

Source: https://kirbyup.getkirby.com/guide/unocss.html

Import the virtual UnoCSS stylesheet in your plugin entry file.

```javascript
// src/index.js
import 'virtual:uno.css'
```

--------------------------------

### Change Dev Server Settings

Source: https://kirbyup.getkirby.com/guide/config-file

Configuring the Vite dev server origin, useful when running the Panel behind a proxy or on a different host.

```javascript
// kirbyup.config.js
import { defineConfig } from 'kirbyup/config'

export default defineConfig({
  vite: {
    server: {
      origin: 'https://plugin.example.test',
    },
  },
})
```

--------------------------------

### useDialog

Source: https://kirbyup.getkirby.com/guide/kirbyuse

Opens Kirby's dialogs and resolves with the result.

```APIDOC
## useDialog

### Description
Opens Kirby's dialogs and resolves with the result.

### Returns
- **openTextDialog** (function) - Opens a text dialog and resolves with a boolean confirmation.
- **openFieldsDialog** (function) - Opens a fields dialog and resolves with the submitted data or undefined when cancelled.

### Example
```js
import { useDialog } from 'kirbyuse'

const { openTextDialog, openFieldsDialog } = useDialog()

const confirmed = await openTextDialog('Delete this entry?')

const result = await openFieldsDialog({
  fields: {
    email: { type: 'email', label: 'Email' },
  },
})
// result: { email: '...' } or undefined when cancelled
```
```

--------------------------------

### usePanel

Source: https://kirbyup.getkirby.com/guide/kirbyuse

Returns the typed window.panel object with access to all Kirby Panel services.

```APIDOC
## usePanel

### Description
Returns the typed `window.panel` object, providing access to all Kirby Panel services such as notifications, dialogs, and view reloads.

### Returns
- **panel** (object) - The typed `window.panel` instance.

### Example
```js
import { usePanel } from 'kirbyuse'

const panel = usePanel()

panel.notification.success('Saved')
panel.dialog.open({ /* ... */ })
panel.view.reload()
```
```

--------------------------------

### Plugin Assets

Source: https://kirbyup.getkirby.com/guide/kirbyuse

Helpers for registering and resolving plugin assets that load on demand.

```APIDOC
## Plugin Assets

### Description
Helpers for registering and resolving plugin assets that load on demand.

### Functions
- **registerPluginAssets(assets)** - Registers `{ filename, url }` pairs, usually from a PHP-side asset list.
- **resolvePluginAsset(filename)** - Returns the registered asset.
- **loadPluginModule(filename)** - Imports a registered JavaScript module, cached.

### Example
```js
import { registerPluginAssets, resolvePluginAsset, loadPluginModule } from 'kirbyuse'

registerPluginAssets([{ filename: 'example.js', url: '/path/to/example.js' }])
const asset = resolvePluginAsset('example.js')
const module = await loadPluginModule('example.js')
```
```

--------------------------------

### Add Path Aliases

Source: https://kirbyup.getkirby.com/guide/config-file

Configuring custom path aliases in kirbyup.config.js and their usage in source files.

```javascript
// kirbyup.config.js
import { resolve } from 'node:path'
import { fileURLToPath } from 'node:url'
import { defineConfig } from 'kirbyup/config'

const currentDir = fileURLToPath(new URL('.', import.meta.url))

export default defineConfig({
  alias: {
    '@components/': `${resolve(currentDir, 'src/components')}/`,
    '@utils/': `${resolve(currentDir, 'src/utils')}/`,
  },
})
```

```javascript
import MyField from '@components/fields/MyField.vue'
import { formatDate } from '@utils/helpers'
```

--------------------------------

### Define Global Constants

Source: https://kirbyup.getkirby.com/guide/config-file

Configuring Vite's define option to replace identifiers at build time.

```javascript
// kirbyup.config.js
import { defineConfig } from 'kirbyup/config'

export default defineConfig({
  vite: {
    define: {
      __APP_VERSION__: JSON.stringify('1.0.0'),
    },
  },
})
```

```javascript
console.log(`Plugin version: ${__APP_VERSION__}`)
```

--------------------------------

### Using useContent for reactive view state

Source: https://kirbyup.getkirby.com/guide/kirbyuse

Accesses current view content, tracks changes, and updates content reactively.

```js
import { useContent } from 'kirbyuse'
import { watch } from 'vue'

const { currentContent, contentChanges, hasChanges, update } = useContent()

watch(hasChanges, (changed) => {
  if (changed)
    console.log('Unsaved changes')
})

update({ title: 'New title' })
```

--------------------------------

### Opening dialogs with useDialog

Source: https://kirbyup.getkirby.com/guide/kirbyuse

Opens text or field-based dialogs and handles the result asynchronously.

```js
import { useDialog } from 'kirbyuse'

const { openTextDialog, openFieldsDialog } = useDialog()

const confirmed = await openTextDialog('Delete this entry?')

const result = await openFieldsDialog({
  fields: {
    email: { type: 'email', label: 'Email' },
  },
})
// result: { email: '...' } or undefined when cancelled
```

--------------------------------

### Update .gitignore for index.dev.js

Source: https://kirbyup.getkirby.com/guide/migration

Replace the reference to index.dev.mjs with index.dev.js in your .gitignore file.

```ini
# .gitignore
index.dev.js
```

--------------------------------

### Update package.json scripts

Source: https://kirbyup.getkirby.com/guide/migration

Rename the serve script to dev to align with kirbyup 4 CLI changes.

```json
{
  "scripts": {
    "dev": "kirbyup dev src/index.js",
    "build": "kirbyup src/index.js"
  }
}
```

--------------------------------

### useContent

Source: https://kirbyup.getkirby.com/guide/kirbyuse

Provides reactive access to the content of the current view, including unsaved changes and update functionality.

```APIDOC
## useContent

### Description
Provides reactive access to the content of the current view, including unsaved changes and update functionality.

### Returns
- **currentContent** (object) - Reflects the editor state including unsaved changes.
- **contentChanges** (object) - Holds only the diff of changes.
- **hasChanges** (ref) - Reactive boolean indicating if there are unsaved changes.
- **update** (function) - Writes changes into the content.

### Example
```js
import { useContent } from 'kirbyuse'
import { watch } from 'vue'

const { currentContent, contentChanges, hasChanges, update } = useContent()

watch(hasChanges, (changed) => {
  if (changed)
    console.log('Unsaved changes')
})

update({ title: 'New title' })
```
```

--------------------------------

### Update Vue imports

Source: https://kirbyup.getkirby.com/guide/migration

Switch imports from kirbyuse to the standard vue package.

```js
import { computed, ref, watch } from 'kirbyuse'
import { computed, ref, watch } from 'vue'
```

--------------------------------

### Configure @/ alias in kirbyup.config.js

Source: https://kirbyup.getkirby.com/cookbook/import-from-panel.html

Point the @/ alias to the Panel source directory within your kirbyup.config.js file.

```javascript
// kirbyup.config.js
import { resolve } from 'node:path'
import { fileURLToPath } from 'node:url'
import { defineConfig } from 'kirbyup/config'

const currentDir = fileURLToPath(new URL('.', import.meta.url))

export default defineConfig({
  alias: {
    '@/': `${resolve(currentDir, 'kirby/panel/src')}/`,
  },
})
```

--------------------------------

### Accessing environment variables in code

Source: https://kirbyup.getkirby.com/guide/environment-variables

Prefixed variables are accessible via import.meta.env, while non-prefixed variables return undefined.

```javascript
console.log(import.meta.env.KIRBYUP_API_BASE) // 'https://example.test/api'
console.log(import.meta.env.DB_PASSWORD) // undefined
```

--------------------------------

### Loading shared Sass files

Source: https://kirbyup.getkirby.com/guide/postcss.html

Use the @use directive to import shared variables or mixins into component styles.

```vue
<style lang="scss">
@use './variables' as *;
@use './mixins' as *;

.my-component {
  @include card-shadow;
  color: $text-color;
}
</style>
```

--------------------------------

### useI18n

Source: https://kirbyup.getkirby.com/guide/kirbyuse

Translates the objects Kirby uses for labels.

```APIDOC
## useI18n

### Description
Translates the objects Kirby uses for labels, following the Panel language.

### Returns
- **t** (function) - Translates a label object based on the current Panel language.

### Example
```js
import { useI18n } from 'kirbyuse'

const { t } = useI18n()

t({ en: 'Hello', de: 'Hallo' }) // Follows the Panel language
```
```

--------------------------------

### Translating labels with useI18n

Source: https://kirbyup.getkirby.com/guide/kirbyuse

Uses the useI18n composable to translate objects based on the current Panel language.

```js
import { useI18n } from 'kirbyuse'

const { t } = useI18n()

t({ en: 'Hello', de: 'Hallo' }) // Follows the Panel language
```

--------------------------------

### Mirror Aliases in jsconfig.json

Source: https://kirbyup.getkirby.com/guide/config-file

Updating jsconfig.json to ensure the editor resolves the custom path aliases.

```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"],
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"], 
      "@utils/*": ["src/utils/*"] 
    }
  },
  "include": ["src/**/*"]
}
```

--------------------------------

### Prop Sets

Source: https://kirbyup.getkirby.com/guide/kirbyuse

Exports the props Kirby passes to a component, so you can spread them instead of copying them.

```APIDOC
## Prop Sets

### Description
Exports the props Kirby passes to a component, so you can spread them instead of copying them.

### Exports
- **field** (object) - The field props object.
- Individual field props such as `label`, `disabled`, and `required` are also available.

### Example
```js
import { field } from 'kirbyuse/props'

defineProps({ ...field })
```
```

--------------------------------

### Sass usage in components

Source: https://kirbyup.getkirby.com/guide/postcss.html

Use lang="scss" or lang="sass" in a component style block to enable Sass processing without additional configuration.

```vue
<style lang="scss">
$primary: #5d5dff;

.my-section {
  padding: 1rem;

  &__title {
    color: $primary;
    font-weight: bold;
  }
}
</style>
```

--------------------------------

### Conditional code removal in production

Source: https://kirbyup.getkirby.com/guide/environment-variables

Code blocks wrapped in import.meta.env.DEV checks are removed from the production bundle.

```javascript
// Removed from the production bundle
if (import.meta.env.DEV) {
  console.log(this.$panel.view.title)
}
```

--------------------------------

### Spreading field props

Source: https://kirbyup.getkirby.com/guide/kirbyuse

Uses kirbyuse/props to spread standard Kirby field props into a component.

```js
import { field } from 'kirbyuse/props'

defineProps({ ...field })
```
Tokens:
Raw