PHPackages                             oblik/kirby-vite - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. oblik/kirby-vite

ActiveKirby-plugin

oblik/kirby-vite
================

Kirby plugin that handles development and production mode of Vite.

1.1.0(3y ago)13631MITPHP

Since Dec 11Pushed 2y ago3 watchersCompare

[ Source](https://github.com/OblikStudio/kirby-vite)[ Packagist](https://packagist.org/packages/oblik/kirby-vite)[ Docs](https://github.com/OblikStudio/kirby-vite#readme)[ RSS](/packages/oblik-kirby-vite/feed)WikiDiscussions main Synced 6d ago

READMEChangelog (3)Dependencies (2)Versions (4)Used By (0)

Kirby Vite Plugin
=================

[](#kirby-vite-plugin)

Plugin for Kirby that allows you to load assets generated by [Vite](https://vitejs.dev).

- In development mode, assets are loaded by Vite's development server, allowing you to benefit from all of its features, such as HMR.
- In production mode, URLs to the built assets are provided and served by PHP.

Another similar plugin is [arnoson/kirby-vite](https://github.com/arnoson/kirby-vite), but it's more complicated and relies on the manual generation of a `.lock` file (omittable by relying on the manifest's presence solely). Thus, it inspired the creation of this plugin.

**Note:** Developed and tested with [Vite `3.1.2`](https://github.com/vitejs/vite/tree/v3.1.2).

How It Works
------------

[](#how-it-works)

The plugin depends on Vite's [manifest functionality](https://vitejs.dev/config/build-options.html#build-manifest), which generates a `manifest.json` file that contains a mapping of non-hashed asset filenames to their hashed versions, used by this plugin to render the correct asset links. If this file doesn't exist, it's assumed that Vite is running in development mode and the plugin attempts to request files from Vite's develpment server.

How to Use
----------

[](#how-to-use)

### Installation

[](#installation)

#### Composer

[](#composer)

You can find [`oblik/kirby-vite` on packagist](https://packagist.org/packages/oblik/kirby-vite):

```
composer require oblik/kirby-vite

```

#### Download

[](#download)

Download and copy this repository to `/site/plugins/vite`.

#### Git Submodule

[](#git-submodule)

```
git submodule add https://github.com/oblik/kirby-vite.git site/plugins/vite
```

### Enable Manifest

[](#enable-manifest)

Make sure you've enabled the [`build.manifest`](https://vitejs.dev/config/build-options.html#build-manifest) option in your `vite.config.js`:

```
// vite.config.js
export default defineConfig({
	build: {
		manifest: true,
	},
});
```

> ℹ️ You may want to take a deep dive into [Vite's backend integration guide](https://vitejs.dev/guide/backend-integration.html) to get an idea how Vite handles assets in traditional backends.

### Output JavaScript

[](#output-javascript)

You need to pass your entry script to the `js()` method:

```