Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xstevenyung/astro-htmx
Easily install HTMX into your Astro project
https://github.com/xstevenyung/astro-htmx
astro htmx
Last synced: about 1 month ago
JSON representation
Easily install HTMX into your Astro project
- Host: GitHub
- URL: https://github.com/xstevenyung/astro-htmx
- Owner: xstevenyung
- Created: 2023-10-16T16:29:30.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-27T11:07:49.000Z (8 months ago)
- Last Synced: 2024-12-13T01:42:40.974Z (about 2 months ago)
- Topics: astro, htmx
- Language: Astro
- Homepage:
- Size: 472 KB
- Stars: 70
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# astro-htmx
This **[Astro integration](https://astro.build/integrations/)** adds [HTMX.org](https://htmx.org) to your project so that you can use HTMX.org anywhere on your page.
- [Inst**al**lation](#installation)
- [Usage](#usage)
- [Configuration](#configuration)
- [Examples](#examples)
- [Troubleshooting](#troubleshooting)
- [Contributing](#contributing)
- [Changelog](#changelog)
## Installation
### Manual Install
First, install the `astro-htmx` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
```sh
npm install astro-htmx htmx.org
```
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
```diff lang="js" "htmx()"
// astro.config.mjs
import { defineConfig } from 'astro/config';
+ import htmx from 'astro-htmx';
export default defineConfig({
// ...
integrations: [htmx()],
// ^^^^^^^^
});
```
## Usage
Once the integration is installed, you can use [HTMX.org](https://htmx.org) directives and syntax inside any Astro component. The HTMX.org script is automatically added and enabled on every page of your website.
Check [Astro Integration Documentation](https://astro.build/integrations/) for more on integrations.
## Limitations
The HTMX.org integration does not give you control over how the script is loaded or initialized. If you require this control, consider [installing and using HTMX.org manually](https://htmx.org/docs/#installing). Astro supports all officially documented HTMX.org manual setup instructions, using `` tags inside of an Astro component.
```astro
---
// src/pages/index.astro
---
<!-- Example: Load HTMX on a single page. -->
<script>
import "htmx.org";
```
## Configuration
The HTMX.org integration does not support any custom configuration at this time.
## Examples
- The [Astro HTMX example](https://github.com/xstevenyung/astro-htmx/tree/main/example) shows how to use HTMX in an Astro project.
## Contributing
This package is maintained by [xstevenyung](https://github.com/xstevenyung). You're welcome to submit an issue or PR!
[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
[astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components
[htmx]: https://htmx.org/