Reusable HTML components powered by Alpine JS reactivity 🛸
npm install alpinejs-componentReusable HTML components powered by Alpine JS reactivity 🛸
``html
src="https://unpkg.com/alpinejs-component@latest/dist/component.min.js"
>
`
`shell
npm install -D alpinejs-component
yarn add -D alpinejs-component
`
`js
import Alpine from 'alpinejs'
import component from 'alpinejs-component'
Alpine.plugin(component)
Alpine.start()
`
You can render on page components by using a with an id thattemplate
matches the attribute on the component.
Here we are rendering the component HTML found in
element.
`html
people: [
{ name: 'John', age: '25', skills: ['JavaScript', 'CSS'] },
{ name: 'Jane', age: '30', skills: ['Laravel', 'MySQL', 'jQuery'] }
]
}"
>
$3
If you don't want on page components you can use the
attribute which
accepts a path to the HTML component.Here we are telling Alpine JS to fetch the HTML from
/public/person.html
within the codebase.html
people: [
{ name: 'John', age: '25', skills: ['JavaScript', 'CSS'] },
{ name: 'Jane', age: '30', skills: ['Laravel', 'MySQL', 'jQuery'] }
]
}"
>
x-data="{ item: person }"
>
Then we'd have a file
which could look like this.`html
`Dynamic Templates
You can pass
or url as a dynamic value, here's an example.`html
components: [
{
template: '/public/person.html',
data: { name: 'John', age: '25', skills: ['JavaScript', 'CSS'] }
},
{
template: '/public/person.html',
data: { name: 'Jane', age: '30', skills: ['Laravel', 'MySQL', 'jQuery'] }
},
]
}"
>
x-data="{ item: component.data }"
> // Or
x-data="{ item: component.data }"
>
Styling Components
$3
You can use
attribute to specify which stylesheets to include.`html
styles="person"
x-data="{ item: person }"
>
`You can also include multiple stylesheets by separating them with a comma.
html
styles="person,general"
x-data="{ item: person }"
>
`Or, if you want to include all stylesheets you can use
$3
You can add a
Renaming Component
If you need to change the name
, you can do so by setting the
global xComponent object. This is necessary because blade components start
with x-, which can cause conflicts.`js
window.xComponent = {
name: 'a-component',
}
`You will then call components like this:
html
people: [
{ name: 'John', age: '25', skills: ['JavaScript', 'CSS'] },
{ name: 'Jane', age: '30', skills: ['Laravel', 'MySQL', 'jQuery'] }
]
}"
>
x-data="{ item: person }"
>
