Kirby Vite

Overview

If you're looking to streamline your Kirby frontend development workflow, bundling your assets with Vite might just be the solution you need. This combination offers a modern approach to managing your assets, allowing for both development and production modes that enhance speed and efficiency. Whether you're starting from scratch with the basic starter kit or incorporating it into an existing setup, the plugin provides versatile features that cater to various needs.

The integration makes asset management straightforward by allowing the use of helper functions within your template files. With a focus on ensuring smooth configurations and accessibility to your assets, this tool is particularly beneficial for developers working on multi-page setups or needing to support legacy browsers.

Features

• Development and Production Modes: Automatically switches between development and production environments using a simple .dev file for easy management.
• Dynamic Configuration: Seamless integration with Kirby's configuration system through vite.config.js, providing flexibility and efficiency.
• Asset File Path Management: Utilize vite()->file() to access and preload assets, ensuring faster load times and better performance.
• Conditional Loading with Try Flag: Easily load asset entries only if they exist, preventing unnecessary errors during development.
• Support for Legacy Browsers: Includes the @vitejs/plugin-legacy for better compatibility with older browsers.
• Panel Asset Bundling: Enables the bundling of panel CSS and JS assets alongside other resources from Vite, improving asset management.
• Active Community Contributions: Open for contributions, fostering a collaborative environment for enhancing the plugin's capabilities.
• Ease of Testing: Simple setup for manual testing with the included example directory, facilitating immediate feedback and improvement opportunities.