https://github.com/yoichiro/vite-plugin-handlebars

This is a plugin that provides convenient features for using Handlebars with Vite.
https://github.com/yoichiro/vite-plugin-handlebars

Last synced: 10 days ago
JSON representation

This is a plugin that provides convenient features for using Handlebars with Vite.

• Host: GitHub
• URL: https://github.com/yoichiro/vite-plugin-handlebars
• Owner: yoichiro
• License: mit
• Created: 2024-06-28T02:30:27.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-07-01T02:21:10.000Z (3 months ago)
• Last Synced: 2024-08-08T17:16:17.664Z (about 1 month ago)
• Language: TypeScript
• Homepage:
• Size: 31.3 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vite - @yoichiro/vite-plugin-handlebars - Import of Handlebars templates `.hbs` as ES Modules. (Plugins / Framework-agnostic Plugins)
• trackawesomelist - @yoichiro/vite-plugin-handlebars (⭐1) - Import of Handlebars templates `.hbs` as ES Modules. (Recently Updated / [Sep 04, 2024](/content/2024/09/04/README.md))
• fucking-awesome-vite - @yoichiro/vite-plugin-handlebars - Import of Handlebars templates `.hbs` as ES Modules. (Plugins / Framework-agnostic Plugins)

README

        
# @yoichiro/vite-plugin-handlebars

This is a plugin that provides convenient features for using Handlebars with Vite.

## Features

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

```html



  
{{ message }}



```


With this plugin, you can import and use `card.hbs` as follows:

```javascript

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

```html



  
Powered by Vite and Handlebars.



```


Then, include it in the `card.hbs` file as follows:

```html



  
{{ message }}

  {{> footer}}



```


This plugin automatically loads the `footer.hbs` file and includes it in the `card.hbs` file.

# Installation

```shell

npm install @yoichiro/vite-plugin-handlebars --save-dev

```

# Usage

To use this plugin in your Vite project, modify your `vite.config.js` or `vite.config.ts` file as follows:

```javascript

// vite.config.js

import { defineConfig } from 'vite';

import handlebarsPlugin from '@yoichiro/vite-plugin-handlebars';

export default defineConfig({

  plugins: [

    handlebarsPlugin()

  ]

});

```

## Options

This plugin can be configured with the following options:

* `templateFileExtension` (string) - Specifies the extension of Handlebars template files. Defaults to `hbs` 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.

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.

```javascript

// 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')

    })

  ]

});

```

# Samples

The `integration` directory contains a sample Vite project using this plugin. You can start this sample project by following these steps:

```sh

$ 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.

# Contributing

If you would like to contribute to this plugin, please follow these steps:

1. Register an issue and describe what you would like to contribute.

2. When you want to contribute by sending code, fork this repository, create a new branch, make your code changes, and submit a pull request.

# License

For the license of this plugin, please refer to the [LICENSE](https://github.com/yoichiro/vite-plugin-handlebars-import/blob/main/LICENSE) file.