{"id":13515053,"url":"https://github.com/markmead/alpinejs-component","last_synced_at":"2025-04-07T18:13:27.908Z","repository":{"id":45218029,"uuid":"442428623","full_name":"markmead/alpinejs-component","owner":"markmead","description":"Reusable HTML components powered by Alpine JS reactivity 🛸","archived":false,"fork":false,"pushed_at":"2024-04-28T14:00:25.000Z","size":44,"stargazers_count":253,"open_issues_count":1,"forks_count":8,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-10-14T08:24:38.206Z","etag":null,"topics":["alpinejs","alpinejs-data","alpinejs-plugin","hacktoberfest","javascript-components"],"latest_commit_sha":null,"homepage":"https://js.hyperui.dev/examples/utility-components","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/markmead.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-28T10:30:13.000Z","updated_at":"2024-10-10T06:40:07.000Z","dependencies_parsed_at":"2022-07-16T15:00:58.720Z","dependency_job_id":"aad6f99a-508a-4c54-add9-6652228c67c7","html_url":"https://github.com/markmead/alpinejs-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markmead","download_url":"https://codeload.github.com/markmead/alpinejs-component/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247704571,"owners_count":20982298,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alpinejs","alpinejs-data","alpinejs-plugin","hacktoberfest","javascript-components"],"created_at":"2024-08-01T05:01:05.744Z","updated_at":"2025-04-07T18:13:27.884Z","avatar_url":"https://github.com/markmead.png","language":"JavaScript","readme":"# Alpine JS Component\n\nReusable HTML components powered by Alpine JS reactivity 🛸\n\n## Install\n\n### With a CDN\n\n```html\n\u003cscript\n  defer\n  src=\"https://unpkg.com/alpinejs-component@latest/dist/component.min.js\"\n\u003e\u003c/script\u003e\n\n\u003cscript defer src=\"https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js\"\u003e\u003c/script\u003e\n```\n\n### With a Package Manager\n\n```shell\nnpm install -D alpinejs-component\n\nyarn add -D alpinejs-component\n```\n\n```js\nimport Alpine from 'alpinejs'\nimport component from 'alpinejs-component'\n\nAlpine.plugin(component)\n\nAlpine.start()\n```\n\n## Example\n\n### On Page Components\n\nYou can render on page components by using a `\u003ctemplate\u003e` with an `id` that\nmatches the `template` attribute on the component.\n\nHere we are rendering the component HTML found in `\u003ctemplate id=\"person\"\u003e`\nelement.\n\n```html\n\u003cdiv\n  x-data=\"{\n    people: [\n      { name: 'John', age: '25', skills: ['JavaScript', 'CSS'] },\n      { name: 'Jane', age: '30', skills: ['Laravel', 'MySQL', 'jQuery'] }\n    ]\n  }\"\n\u003e\n  \u003cul\u003e\n    \u003ctemplate x-for=\"person in people\"\u003e\n      \u003cx-component template=\"person\" x-data=\"{ item: person }\"\u003e\u003c/x-component\u003e\n    \u003c/template\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n\n\u003ctemplate id=\"person\"\u003e\n  \u003cli\u003e\n    \u003ch2 x-text=\"item.name\"\u003e\u003c/h2\u003e\n\n    \u003cp x-text=\"item.age\"\u003e\u003c/p\u003e\n\n    \u003cul\u003e\n      \u003ctemplate x-for=\"skill in item.skills\"\u003e\n        \u003cli x-text=\"skill\"\u003e\u003c/li\u003e\n      \u003c/template\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n\u003c/template\u003e\n```\n\n### Global Components\n\nIf you don't want on page components you can use the `url` attribute which\naccepts a path to the HTML component.\n\nHere we are telling Alpine JS to fetch the HTML from `/public/person.html`\nwithin the codebase.\n\n```html\n\u003cdiv\n  x-data=\"{\n    people: [\n      { name: 'John', age: '25', skills: ['JavaScript', 'CSS'] },\n      { name: 'Jane', age: '30', skills: ['Laravel', 'MySQL', 'jQuery'] }\n    ]\n  }\"\n\u003e\n  \u003cul\u003e\n    \u003ctemplate x-for=\"person in people\"\u003e\n      \u003cx-component\n        url=\"/public/person.html\"\n        x-data=\"{ item: person }\"\n      \u003e\u003c/x-component\u003e\n    \u003c/template\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\nThen we'd have a file `/public/person.html` which could look like this.\n\n```html\n\u003cli\u003e\n  \u003ch2 x-text=\"item.name\"\u003e\u003c/h2\u003e\n\n  \u003cp x-text=\"item.age\"\u003e\u003c/p\u003e\n\n  \u003cul\u003e\n    \u003ctemplate x-for=\"skill in item.skills\"\u003e\n      \u003cli x-text=\"skill\"\u003e\u003c/li\u003e\n    \u003c/template\u003e\n  \u003c/ul\u003e\n\u003c/li\u003e\n```\n\n## Dynamic Templates\n\nYou can pass `template` or `url` as a dynamic value, here's an example.\n\n```html\n\u003cdiv\n  x-data=\"{\n    components: [\n      {\n        template: '/public/person.html',\n        data: { name: 'John', age: '25', skills: ['JavaScript', 'CSS'] }\n      },\n      {\n        template: '/public/person.html',\n        data: { name: 'Jane', age: '30', skills: ['Laravel', 'MySQL', 'jQuery'] }\n      },\n    ]\n  }\"\n\u003e\n  \u003cul\u003e\n    \u003ctemplate x-for=\"component in components\"\u003e\n      \u003cx-component\n        :template=\"component.template\"\n        x-data=\"{ item: component.data }\"\n      \u003e\u003c/x-component\u003e\n\n      // Or\n\n      \u003cx-component\n        :url=\"component.template\"\n        x-data=\"{ item: component.data }\"\n      \u003e\u003c/x-component\u003e\n    \u003c/template\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n## Styling Components\n\n### Including Stylesheets\n\nYou can use `styles` attribute to specify which stylesheets to include.\n\n```html\n\u003cstyle title=\"person\"\u003e\n  /* ... */\n\u003c/style\u003e\n\n\u003cx-component\n  template=\"person\"\n  styles=\"person\"\n  x-data=\"{ item: person }\"\n\u003e\u003c/x-component\u003e\n```\n\nYou can also include multiple stylesheets by separating them with a comma.\n\n```html\n\u003cstyle title=\"person\"\u003e\n  /* ... */\n\u003c/style\u003e\n\n\u003cstyle title=\"general\"\u003e\n  /* ... */\n\u003c/style\u003e\n\n\u003cx-component\n  template=\"person\"\n  styles=\"person,general\"\n  x-data=\"{ item: person }\"\n\u003e\u003c/x-component\u003e\n```\n\nOr, if you want to include all stylesheets you can use `styles=\"global\"`\n\n### Inline Stylesheet\n\nYou can add a `\u003cstyle\u003e` element with the components CSS to the component itself.\n\n```html\n\u003cdiv\u003e\n  \u003cstyle\u003e\n    .example {\n      background: #00f;\n    }\n  \u003c/style\u003e\n\n  \u003cp class=\"example\" x-text=\"message\"\u003e \u003c/p\u003e\n\u003c/div\u003e\n```\n\n## Renaming Component\n\nIf you need to change the name `x-component`, you can do so by setting the\nglobal `xComponent` object. This is necessary because blade components start\nwith `x-`, which can cause conflicts.\n\n```js\nwindow.xComponent = {\n  name: 'a-component',\n}\n```\n\nYou will then call components like this:\n\n```html\n\u003cdiv\n  x-data=\"{\n    people: [\n      { name: 'John', age: '25', skills: ['JavaScript', 'CSS'] },\n      { name: 'Jane', age: '30', skills: ['Laravel', 'MySQL', 'jQuery'] }\n    ]\n  }\"\n\u003e\n  \u003cul\u003e\n    \u003ctemplate x-for=\"person in people\"\u003e\n      \u003ca-component\n        url=\"/public/person.html\"\n        x-data=\"{ item: person }\"\n      \u003e\u003c/a-component\u003e\n    \u003c/template\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n### Stats\n\n![](https://img.shields.io/bundlephobia/min/alpinejs-component)\n![](https://img.shields.io/npm/v/alpinejs-component)\n![](https://img.shields.io/npm/dt/alpinejs-component)\n![](https://img.shields.io/github/license/markmead/alpinejs-component)\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkmead%2Falpinejs-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkmead%2Falpinejs-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkmead%2Falpinejs-component/lists"}