{"_id":"@dhoniaridho/vue-ohttp","name":"@dhoniaridho/vue-ohttp","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.2":{"name":"@dhoniaridho/vue-ohttp","version":"0.0.2","description":"Simple vue http client wrapper for axios and @tanstack/vue-query","repository":{"type":"git","url":"git+https://github.com/dhoniaridho/ohttp.git"},"main":"dist/index.es.js","types":"dist/types/index.d.ts","scripts":{"build":"vite build"},"keywords":["vue","axios","vue-query"],"author":{"name":"dhoniaridho"},"license":"ISC","devDependencies":{"@vitejs/plugin-vue":"^5.2.1","vite":"^6.0.11","vite-plugin-dts":"^4.5.0"},"dependencies":{"@tanstack/vue-query":"^5.65.0","axios":"^1.7.9","vue":"^3.5.13"},"_id":"@dhoniaridho/vue-ohttp@0.0.2","gitHead":"13a03a2f41d0a397d679f652d42969202a71e684","bugs":{"url":"https://github.com/dhoniaridho/ohttp/issues"},"homepage":"https://github.com/dhoniaridho/ohttp#readme","_nodeVersion":"22.11.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-LtYg/LSzb2i4s/fP2fkevrNRUOagaGz5XvCC2m8ipkt9ws7458CbvL17qotNvYAFQBFx5mj9jSZ9SaBBBeuyIA==","shasum":"293cde3de82594eeda330b0bf3b4e2d914f26843","tarball":"https://registry.npmjs.org/@dhoniaridho/vue-ohttp/-/vue-ohttp-0.0.2.tgz","fileCount":12,"unpackedSize":332136,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIF8R2DswLosTnLPDHnJ/eMlg7mstcsPioHb+7aZD2liuAiEAyeAll0xRM+RmFNq2XpAuBEO3PAertUzh8mJrDiERt9s="}]},"_npmUser":{"name":"dhoniaridho","email":"dhoniaridho@gmail.com","actor":{"name":"dhoniaridho","email":"dhoniaridho@gmail.com","type":"user"}},"directories":{},"maintainers":[{"name":"dhoniaridho","email":"dhoniaridho@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-ohttp_0.0.2_1751727795562_0.6039974732790878"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-05T15:03:15.452Z","0.0.2":"2025-07-05T15:03:15.770Z","modified":"2025-07-05T15:03:16.084Z"},"maintainers":[{"name":"dhoniaridho","email":"dhoniaridho@gmail.com"}],"description":"Simple vue http client wrapper for axios and @tanstack/vue-query","homepage":"https://github.com/dhoniaridho/ohttp#readme","keywords":["vue","axios","vue-query"],"repository":{"type":"git","url":"git+https://github.com/dhoniaridho/ohttp.git"},"author":{"name":"dhoniaridho"},"bugs":{"url":"https://github.com/dhoniaridho/ohttp/issues"},"license":"ISC","readme":"# Vue HTTP\n\nThis package provides a set of Vue hooks for making HTTP requests.\n\n## Installation\n\nYou can install the package using npm or yarn:\n\n```bash\nnpm install vue-ohttp\n```\n\nor\n\n```bash\npnpm add vue-ohttp\n```\n\n## Usage\n\n### useHttp\n\nThe `useHttp` hook is used to make HTTP requests with various methods.\n\n```jsx\nimport Vue from \"vue\";\nimport { useHttp } from \"vue-http\";\n\nconst ExampleComponent = () => {\n  const { data, error, isLoading } = useHttp(\n    \"https://api.example.com/data/{id}\",\n    {\n      method: \"GET\",\n      searchParam: { key: \"value\" },\n      vars: {\n        id: \"1\",\n      },\n    }\n  );\n\n  if (isLoading) return <p>Loading...</p>;\n  if (error) return <p>Error: {error.message}</p>;\n\n  return (\n    <div>\n      <h1>Data</h1>\n      <pre>{JSON.stringify(data, null, 2)}</pre>\n    </div>\n  );\n};\n\nexport default ExampleComponent;\n```\n\n### useHttpMutation\n\nThe `useHttpMutation` hook is used to make HTTP requests with mutation methods like POST, PUT, DELETE, etc.\n\n```jsx\nimport Vue from \"vue\";\nimport { useHttpMutation } from \"vue-http\";\n\nconst ExampleComponent = () => {\n  const { mutate, isLoading, isError, error } = useHttpMutation(\n    \"https://api.example.com/data/{id}\",\n    {\n      method: \"POST\",\n      httpOptions: { timeout: 30000 },\n      queryOptions: {\n        onSuccess: (data) => console.log(data),\n        onError: (error) => console.log(error),\n      },\n    }\n  );\n\n  const handleSubmit = (data) => {\n    mutate({\n      body: data,\n      searchParams: {},\n      vars: { id: \"10\" },\n    });\n  };\n\n  if (isLoading) return <p>Loading...</p>;\n  if (isError) return <p>Error: {error.message}</p>;\n\n  return (\n    <div>\n      <button onClick={() => handleSubmit({ key: \"value\" })}>Submit</button>\n    </div>\n  );\n};\n\nexport default ExampleComponent;\n```\n\n### API\n\n#### useHttp\n\n- `url` (string): The URL to make the HTTP request to.\n- `options` (object): Configuration options for the request.\n  - `method` (string): The HTTP method to use (default is 'GET').\n  - `params` (object): Query parameters to include in the request.\n  - `httpOptions` (object): Additional Axios request configuration options.\n  - `queryOptions` (object): Vue Query options.\n- Returns an object with the following properties:\n  - `data`: The response data.\n  - `error`: Any error that occurred.\n  - `isLoading`: Whether the request is in progress.\n\n#### useHttpMutation\n\n- `url` (string): The URL to make the HTTP request to.\n- `options` (object): Configuration options for the request.\n  - `method` (string): The HTTP method to use.\n  - `httpOptions` (object): Additional Axios request configuration options.\n  - `queryOptions` (object): Vue Query options.\n- Returns an object with the following properties:\n  - `mutate`: A function to trigger the mutation.\n  - `isLoading`: Whether the request is in progress.\n  - `isError`: Whether an error occurred.\n  - `error`: The error that occurred.\n","readmeFilename":"README.md","_rev":"1-3cb5b5c4376bbf6b657da95023c58930"}