kirby-vite

KO | EN

gitlite — search

#javascript #react #llm #go #machine-learning #linux #macos #windows #kubernetes #awesome-list #vue #mcp #openai #open-source

(★ 13)

Kirby plugin that handles development and production mode of https://vitejs.dev.

kirby-vite Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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

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

### Installation

#### Composer

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

```
composer require oblik/kirby-vite
```

#### Download

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

#### Git Submodule

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

### 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`:

```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

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

```php
<?= vite()->js('src/index.js') ?>
```

### Output CSS

You have to do the same as for JavaScript, but use the `css()` method:

```php
<?= vite()->css('src/index.js') ?>
```

**Note:** When using Vite, CSS files aare imported in the main JavaScript file. In order to find the CSS from the generated manifest, the plugin needs the file that _imports_ your CSS, not the CSS file itself.

**Note 2:** In development mode, the `css()` method does nothing because Vite automatically loads your CSS when your JavaScript loads, as well as the required `@vite/client` script. In other words, `vite()->js()` loads everything.

### Remove Generated Assets

As explained in [the How It Works section](#how-it-works), to ensure proper function, you should remove the build folder every time you start your development server. This can easily be done with `rm -rf` in your npm dev script:

```json
{
	"scripts": {
		"dev": "rm -rf dist && vite"
	}
}
```

## Options

In your `config.php`, make sure you configure the plugin to match your `vite.config.js`:

```php
return [
	'oblik.vite' => [
		'server' => [
			'port' => 5173,
			'https' => false,
		],
		'build' => [
			'outDir' => 'dist'
		]
	]
];
```

**Note:** The values above are the default ones, so if they match your setup, you don't need to configure anything. 🤙

## License

kirby-vite

kirby-vite Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

kirby-vite

kirby-vite Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README