Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/markmead/alpinejs-component
Reusable HTML components powered by Alpine JS reactivity 🛸
https://github.com/markmead/alpinejs-component
alpinejs alpinejs-data alpinejs-plugin javascript-components
Last synced: about 2 months ago
JSON representation
Reusable HTML components powered by Alpine JS reactivity 🛸
- Host: GitHub
- URL: https://github.com/markmead/alpinejs-component
- Owner: markmead
- License: mit
- Created: 2021-12-28T10:30:13.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-28T14:00:25.000Z (5 months ago)
- Last Synced: 2024-07-04T06:55:49.019Z (2 months ago)
- Topics: alpinejs, alpinejs-data, alpinejs-plugin, javascript-components
- Language: JavaScript
- Homepage: https://js.hyperui.dev/examples/utility-components
- Size: 43 KB
- Stars: 230
- Watchers: 4
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Alpine JS Component
Reusable HTML components powered by Alpine JS reactivity 🛸
## Install
### With a CDN
```html
```
### With a Package Manager
```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()
```
## Example
### On Page Components
You can render on page components by using a `` with an `id` that
matches the `template` attribute on the component.
Here we are rendering the component HTML found in ``
element.
```html
```
### Global Components
If you don't want on page components you can use the `url` 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
```
Then we'd have a file `/public/person.html` which could look like this.
```html
```
## Dynamic Templates
You can pass `template` or `url` as a dynamic value, here's an example.
```html
// Or
```
## Styling Components
### Including Stylesheets
You can use `styles` attribute to specify which stylesheets to include.
```html
/* ... */
```
You can also include multiple stylesheets by separating them with a comma.
```html
/* ... */
/* ... */
```
Or, if you want to include all stylesheets you can use `styles="global"`
### Inline Stylesheet
You can add a `` element with the components CSS to the component itself.
```html
<div>
<style>
.example {
background: #00f;
}
```
## Renaming Component
If you need to change the name `x-component`, 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
```
### Stats
