{"id":17024516,"url":"https://github.com/0wain/alpinejs-requests","last_synced_at":"2026-03-15T01:44:18.622Z","repository":{"id":208714250,"uuid":"721850187","full_name":"0wain/alpinejs-requests","owner":"0wain","description":"✉️ Inline HTTP requests made simple for Alpine.js 🌲","archived":false,"fork":false,"pushed_at":"2024-06-11T10:05:38.000Z","size":32,"stargazers_count":13,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-16T02:37:58.067Z","etag":null,"topics":["alpinejs","alpinejs-networking","alpinejs-plugin","alpinejs-requests","http"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/0wain.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-11-21T22:40:35.000Z","updated_at":"2024-10-10T01:32:34.000Z","dependencies_parsed_at":"2023-11-22T23:24:19.390Z","dependency_job_id":"0b434dde-1302-4fdc-961c-0e9a01b6f647","html_url":"https://github.com/0wain/alpinejs-requests","commit_stats":null,"previous_names":["owainjones74/alpinejs-requests"],"tags_count":3,"template":false,"template_full_name":"victoryoalli/alpinejs-plugin-blueprint","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0wain%2Falpinejs-requests","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0wain%2Falpinejs-requests/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0wain%2Falpinejs-requests/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0wain%2Falpinejs-requests/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0wain","download_url":"https://codeload.github.com/0wain/alpinejs-requests/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244994966,"owners_count":20544251,"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-networking","alpinejs-plugin","alpinejs-requests","http"],"created_at":"2024-10-14T07:25:53.548Z","updated_at":"2026-03-15T01:44:13.564Z","avatar_url":"https://github.com/0wain.png","language":"JavaScript","readme":"# 🌲✉️ Alpine.js Requests\n\n✉️ Inline HTTP requests made simple for Alpine.js 🌲\n\nhttps://www.npmjs.com/package/alpinejs-requests\n\n## What is Alpine.js Requests?\n\nAlpine.js Requests aims to make HTTP requests easy within Alpine, allowing you to send AJAX requests without thinking twice.\nThe main use case for this package is for simple requests actions that do not require advance responses.\nFor example, you could use this package to easily send a POST request when a user presses the like button.\n\n## Install\n\n### NPM\n\nInstall the package with the following command:\n\n```\nnpm i alpinejs-requests\n```\n\nImport and register the package:\n\n```\nimport Alpine from 'alpinejs'\nimport requests from 'alpinejs-requests'\n\nAlpine.plugin(requests)\n\nAlpine.start()\n```\n\n### Script Tag\n\n```\n\u003chtml\u003e\n    \u003cscript defer src=\"https://cdn.jsdelivr.net/npm/alpinejs-requests@1.x.x/dist/plugin.min.js\"\u003e\u003c/script\u003e\n    \u003cscript defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js\"\u003e\u003c/script\u003e\n\u003c/html\u003e\n```\n\n## Documentation\n\n### x-post\n\n`x-post` allows you to easily create a POST request on the click event of a DOM element.\n\nIn its simplest form, you can pass a string that will be used as the URL to send the POST request to.\n```\n\u003cbutton type=\"button\" x-post=\"/api/videos/4/like\"\u003eLike\u003c/button\u003e\n```\n\nIf required, additional data can be passed through the `x-post` directive.\n```\n\u003cbutton\n    type=\"button\"\n    x-post=\"{route: '/api/videos/4/like', body: {stars: 3}, headers: {}}\"\n\u003eLike\u003c/button\u003e\n```\n\nIf you want to use the response from the POST request, you can access this through the `@post` event.\nThis event is called once the request has resolved. You can access the response object with `$event.detail.response`.\nYou can also access a \"state\" variable with `$event.detail.state`. This will be true/false depending on the success of the request.\n```\n\u003cbutton\n    type=\"button\"\n    x-post=\"{route: '/api/videos/4/like', body: {stars: 3}}\"\n    @post=\"liked = true;\"\n    x-text=\"liked ? 'Liked' : 'Like'\"\n\u003e\u003c/button\u003e\n```\n\nA magic method of `$post` is also provided. This is useful for making quick requests inside other events.\n```\n\u003cdiv x-init=\"$post('/api/videos/4/view');\"\u003e\u003c/div\u003e\n\u003cbutton\n    type=\"button\"\n    @click=\"$post({route: '/api/videos/4/like', body: {stars: 3}})\"\n\u003eLike\u003c/button\u003e\n```\n\n### x-get\n\n`x-get` works essentially identically to `x-post`. Rather obviously, the only difference is that it makes a GET request instead of a POST request.\nThe functionality is identical in what can be passed to an `x-get`, and how the system resolves it. Something to note is that the event for a GET request\nlands in the @get event.\n```\n\u003cbutton\n    type=\"button\"\n    x-get=\"/api/videos/4/refresh\"\n    @get=\"views = $event.detail.response.body\"\n\u003e\n    \u003cspan x-text=\"views\"\u003e\u003c/span\u003e Views\n\u003c/button\u003e\n```\n\nThere is also a `$get` magic method.\n```\n\u003cdiv\n    x-init=\"$get('/api/videos/4/info');\"\n    @get=\"views = $event.detail.response.json().views\"\n\u003e\u003c/div\u003e\n\u003cp\u003e\n    \u003cspan x-text=\"views\"\u003e\u003c/span\u003e Views\n\u003c/p\u003e\n```\n\n### x-request\n\n`x-request` is the Alpine.js Request library in its freest form. It functions the same as `x-post` and `x-get`, but allows for the additional\ndefinition of a method. This means you can define which method to use, including things like DELETE, PATH ect.\n```\n\u003cbutton\n    type=\"button\"\n    x-request=\"{route: '/api/videos/4', method: 'DELETE'}\"\n\u003eDelete\u003c/button\u003e\n```\n\nYou can also use the magic method `$request`.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0wain%2Falpinejs-requests","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0wain%2Falpinejs-requests","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0wain%2Falpinejs-requests/lists"}