This is a plugin that provides convenient features for using Handlebars with Vite.
By using this plugin, you can import Handlebars template files as modules in projects that use Vite.
For example, suppose you have the following Handlebars template file (templates/card.hbs
):
<div class="card">
<p>{{ message }}</p>
</div>
With this plugin, you can import and use card.hbs
as follows:
import template from 'templates/card.hbs';
const card = template({ message: 'Hello, world!' });
const elem = document.getElementById('target');
elem.innerHTML = card;
Also, suppose you have the following partial file (templates/partials/footer.hbs
):
<div class="footer">
<p>Powered by Vite and Handlebars.</p>
</div>
Then, include it in the card.hbs
file as follows:
<div class="card">
<p>{{ message }}</p>
{{> footer}}
</div>
This plugin automatically loads the footer.hbs
file and includes it in the card.hbs
file.
npm install @yoichiro/vite-plugin-handlebars --save-dev
To use this plugin in your Vite project, modify your vite.config.js
or vite.config.ts
file as follows:
// vite.config.js
import { defineConfig } from 'vite';
import handlebarsPlugin from '@yoichiro/vite-plugin-handlebars';
export default defineConfig({
plugins: [
handlebarsPlugin()
]
});
This plugin can be configured with the following options:
templateFileExtension
(string) - Specifies the extension of Handlebars template files. Defaults tohbs
if omitted.partialDirectoryPath
(string) - Specifies the path to the directory containing partial template files to be included in Handlebars template files. If omitted, partial template files are not registered.compileOptions
(object) - Specifies the options to be passed to the Handlebars compiler. If omitted, the default options are used.
These options can be specified as arguments to the handlebarsPlugin
function. Below is an example that specifies handlebars
as the template file extension and templates/partials
as the directory containing partial template files.
// vite.config.js
import { defineConfig } from 'vite';
import handlebarsPlugin from '@yoichiro/vite-plugin-handlebars';
import path from 'path';
export default defineConfig({
plugins: [
handlebarsPlugin({
templateFileExtension: 'handlebars',
partialDirectoryPath: path.resolve(__dirname, 'templates', 'partials')
})
]
});
The compileOptions
are the various options applied when compiling template files in Handlebars. For details on each option, please refer to the Handlebars documentation.
The integration
directory contains a sample Vite project using this plugin. You can start this sample project by following these steps:
$ git clone https://github.com/yoichiro/vite-plugin-handlebars.git
$ cd vite-plugin-handlebars
$ npm install
$ npm run integration-test
After the development server starts, please access http://localhost:5173
in your web browser.
If you would like to contribute to this plugin, please follow these steps:
- Register an issue and describe what you would like to contribute.
- When you want to contribute by sending code, fork this repository, create a new branch, make your code changes, and submit a pull request.
For the license of this plugin, please refer to the LICENSE file.