Manage the HTML <head> with Alpine JS 👷♀️
<script
defer
src="https://unpkg.com/alpinejs-head@latest/dist/head.min.js"
></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>npm i -D alpinejs-head
yarn add -D alpinejs-headimport Alpine from 'alpinejs'
import head from 'alpinejs-head'
Alpine.plugin(head)
Alpine.start()You can use x-head.json to set the initial dynamic values.
<script x-data x-head.json type="application/json">
{
"title": "Hello World 👋",
"meta": [
{
"name": "description",
"content": "How are you today?"
},
{
"name": "theme-color",
"content": "#000"
}
],
"links": [
{
"type": "rel",
"href": "popup.css"
}
],
"scripts": [
{
"src": "popup.js",
"async": true
}
]
}
</script>Only with x-head.json can you set <link> and <script> elements.
<div
x-data="{ title: 'Hello World 👋', description: 'How are you today?' }"
x-head.title="title"
x-head.meta.description="description"
>
<input type="text" x-model="title" />
<textarea x-model="description"></textarea>
</div>x-head will track track the data of title and description and update the
HTML <head> elements targeted through the modifiers.
Here's an example of you can set the theme-color:
<div x-data="{ theme: '#000' }" x-head.meta.theme-color="theme"> </div><button x-data @click="$head('title', 'Hello World 👋')"> Title </button>
<button x-data @click="$head('meta.description', 'How are you today?')">
Description
</button>
