{"id":20469838,"url":"https://github.com/bancedev/alpine-pages","last_synced_at":"2026-02-24T11:31:23.944Z","repository":{"id":253100480,"uuid":"842460765","full_name":"BanceDev/alpine-pages","owner":"BanceDev","description":"Alpine.js plugin for cleanly making multiple client side pages with expanded reactivity.","archived":false,"fork":false,"pushed_at":"2024-08-24T14:24:53.000Z","size":47,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-30T14:14:54.160Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/alpinejs-pages","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/BanceDev.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,"zenodo":null}},"created_at":"2024-08-14T11:56:09.000Z","updated_at":"2024-08-24T14:24:56.000Z","dependencies_parsed_at":"2025-07-09T05:32:15.414Z","dependency_job_id":null,"html_url":"https://github.com/BanceDev/alpine-pages","commit_stats":null,"previous_names":["bancedev/alpine-pages"],"tags_count":0,"template":false,"template_full_name":"markmead/alpinejs-plugin-template","purl":"pkg:github/BanceDev/alpine-pages","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BanceDev%2Falpine-pages","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BanceDev%2Falpine-pages/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BanceDev%2Falpine-pages/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BanceDev%2Falpine-pages/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BanceDev","download_url":"https://codeload.github.com/BanceDev/alpine-pages/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BanceDev%2Falpine-pages/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29780604,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-24T10:45:18.109Z","status":"ssl_error","status_checked_at":"2026-02-24T10:45:09.911Z","response_time":75,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-11-15T14:10:33.966Z","updated_at":"2026-02-24T11:31:23.910Z","avatar_url":"https://github.com/BanceDev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Alpine Pages\n\n![](https://img.shields.io/bundlephobia/min/alpinejs-pages)\n![](https://img.shields.io/npm/v/alpinejs-pages)\n![](https://img.shields.io/npm/dt/alpinejs-pages)\n![](https://img.shields.io/github/license/BanceDev/alpine-pages)\n\nAlpine Pages is a plugin desinged to make it simpler to make multiple \"pages\" for your Alpine SPA. This is achieved by allowing you to make fully reactive html and css inside your Alpine.data, enabling you to use alpine in more freeform ways and preventing clutter in your html documents.\n\n## Install\n\n### With a CDN\n\n```html\n\u003cscript\n  defer\n  src=\"https://unpkg.com/alpinejs-pages@latest/dist/pages.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\nyarn add -D alpinejs-pages\n\nnpm install -D alpinejs-pages\n```\n\n```js\nimport Alpine from \"alpinejs\";\nimport pages from \"alpinejs-pages\";\n\nAlpine.plugin(pages);\n\nAlpine.start();\n```\n\n## Example\n\nTo create a page, just add a page function to an Alpine.data. This function needs to return a string of html that will make up your page. You may also make a styles function that will create scoped css for your page. The plugin automatically handles reactivity for embedding format strings. That way if any member of your data updates the page or styles will update with it.\n\n```js\ndocument.addEventListener(\"alpine:init\", () =\u003e {\n  Alpine.data(\"home\", () =\u003e ({\n    message: \"hello\",\n    color: \"red\",\n    styles() {\n      return `\n        h2 {\n          color: ${this.color};\n        }\n      `;\n    },\n    page() {\n      return `\u003ch2\u003e${this.message}\u003c/h2\u003e`;\n    },\n  }));\n});\n```\n\nIn the HTML you first need to add your data to the scope. Then to render the page just attach the x-page property to an html tag and it will fill in the inner html with your page. Since the page functions as a sort of template you can also make multiple instances of the page if you want by attaching the x-page attribute to multiple html tags within your data scope.\n\n```html\n\u003cdiv x-data=\"home\"\u003e\n  \u003cbutton @click=\"message = 'goodbye'\"\u003egoodbye\u003c/button\u003e\n  \u003cdiv x-page\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbancedev%2Falpine-pages","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbancedev%2Falpine-pages","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbancedev%2Falpine-pages/lists"}