https://github.com/markmead/alpinejs-head
Alpine JS Head is a simple plugin that lets you control your HTML `<head>` elements using Alpine JS 🦆
https://github.com/markmead/alpinejs-head
alpine alpinejs head helmet
Last synced: about 1 year ago
JSON representation
Alpine JS Head is a simple plugin that lets you control your HTML `<head>` elements using Alpine JS 🦆
- Host: GitHub
- URL: https://github.com/markmead/alpinejs-head
- Owner: markmead
- License: mit
- Created: 2021-12-24T15:02:05.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-03-07T10:58:01.000Z (over 1 year ago)
- Last Synced: 2025-03-24T20:12:27.862Z (about 1 year ago)
- Topics: alpine, alpinejs, head, helmet
- Language: JavaScript
- Homepage:
- Size: 27.3 KB
- Stars: 23
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Alpine JS Head
# Alpine JS Head
Alpine JS Head is a simple plugin that lets you control your HTML ``
elements using Alpine JS.
## What It Does
This plugin lets you dynamically update:
- 📄 Page title
- 📝 Meta descriptions
- 🔍 SEO elements
## Why Use It?
- **Simple**: Change head elements without writing complex JavaScript
- **Reactive**: Head elements update automatically when your data changes
- **Flexible**: Use JSON, directives, or methods - whatever fits your style
- **SEO-friendly**: Update meta tags on the fly for better search results
## Install
### CDN
```html
```
### Package
```shell
yarn add -D alpinejs-head
npm install -D alpinejs-head
```
```js
import Alpine from 'alpinejs'
import head from 'alpinejs-head'
Alpine.plugin(head)
Alpine.start()
```
## Examples
### JSON
You can use `x-head.json` to set the initial dynamic values and update them
later through Alpine JS data binding.
This approach is ideal when you need to manage multiple head elements at once or
when working with complex metadata structures.
```html
{
"title": "Alpine JS Head Demo",
"meta": [
{
"name": "description",
"content": "Dynamically control your page metadata with Alpine JS Head"
},
{
"name": "theme-color",
"content": "#00f"
}
]
}
```
### Directives
The directive approach offers a clean, declarative way to manage head elements
directly in your HTML structure. It's perfect for components that need to update
metadata based on their state.
```html
Blue
Red
Green
```
`x-head` will track the data of `title`, `description`, and `theme` and update
the HTML `` elements targeted through the modifiers.
You can bind multiple head elements to the same component, making it easy to
update related metadata together.
### Method
```html
Title
Description
```