Skip to content

Commit 7cf7afd

Browse files
author
edep
committed
Merge branch 'develop'
2 parents 942283c + 5dc8ee2 commit 7cf7afd

29 files changed

+10484
-10732
lines changed

README.md

Lines changed: 108 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,185 +1,196 @@
1-
# 🔗 lomkit-rest-client
1+
# 🔗 lomkit-rest-api-nuxt-sdk
22

33
> A Nuxt 3 SDK to easily interact with [lomkit/laravel-rest-api](https://github.com/lomkit/laravel-rest-api) endpoints — powered by TypeScript, designed for Nuxt ⚡️
44
5+
# 🔗 lomkit-rest-api-nuxt-sdk
6+
7+
[![npm version](https://img.shields.io/npm/v/lomkit-rest-api-nuxt-sdk)](https://www.npmjs.com/package/lomkit-rest-api-nuxt-sdk)
8+
[![npm downloads](https://img.shields.io/npm/dm/lomkit-rest-api-nuxt-sdk)](https://www.npmjs.com/package/lomkit-rest-api-nuxt-sdk)
9+
[![types](https://img.shields.io/badge/types-TypeScript-blue)](https://www.typescriptlang.org/)
10+
[![license](https://img.shields.io/github/license/edepauw/lomkit-rest-api-nuxt-sdk)](./LICENSE)
11+
512
**Note:** This package is community-built and not officially affiliated with Lomkit. It’s fully open-source and contributions are welcome!
613

714
---
815

916
## ✨ Features
1017

1118
- 📦 Resource-based client
12-
- 🔐 Built-in token handling via cookies
13-
- ⚙️ Configurable base API URL and token cookie name
19+
- 🔍 Search, details, mutate, actions, and delete Methods
20+
- 🛠️ Auto-imported resources in Nuxt 3
21+
- 🧩 TypeScript support for better developer experience
22+
- 🔄 Hooks for request and response handling
1423
- 🌍 Works seamlessly with Nuxt 3 and TypeScript
1524

1625
---
1726

1827
## 📦 Installation
1928

2029
```bash
21-
npm install lomkit-rest-client
30+
npm install lomkit-rest-api-nuxt-sdk
31+
```
32+
33+
and then add it to your Nuxt 3 project by adding it to your `nuxt.config.ts`:
34+
35+
```typescript
36+
// nuxt.config.ts
37+
export default defineNuxtConfig({
38+
modules: ["lomkit-rest-api-nuxt-sdk"],
39+
// other configurations...
40+
});
2241
```
2342

2443
## ⚙️ Configuration
2544

26-
to use the Lomkit REST client, you need to configure it in your Nuxt 3 application. You can do this by creating a plugin file in your `plugins` directory.
45+
to use the Lomkit REST API SDK, you need to configure it in your Nuxt 3 application. You can do this by creating a plugin file in your `plugins` directory.
2746

2847
```typescript
2948
// plugins/restClient.ts
3049
export default defineNuxtPlugin(() => {
3150
const lomkitRestClient = useNuxtApp().$lomkitRestClient;
32-
lomkitRestClient.addApiClient({
33-
slug: "default",
34-
url: "https://localhost",
35-
requestInit: () => {
51+
lomkitRestClient.setApiFetchOptions({
52+
baseURL: "https://localhost",
53+
onRequest: ({ options }) => {
3654
const access_token = useCookie("cookie");
37-
return {
38-
headers: {
39-
Authorization: `Bearer ${access_token.value}`,
40-
},
41-
credentials: "include",
42-
};
55+
options.headers.set(
56+
"Authorization",
57+
`Bearer ${access_token.value}`
58+
);
4359
},
4460
});
4561
});
4662
```
4763

4864
explanation:
4965

50-
- `slug`: A unique identifier for the API client.
51-
- `url`: The base URL of your Lomkit REST API.
52-
- `requestInit`: A function that returns an object containing the request headers and credentials. In this case, it retrieves the access token from a cookie named `cookie` and includes it in the `Authorization` header.
53-
- `credentials`: Set to `include` to include cookies in cross-origin requests.
66+
- `baseURL`: The base URL of your Lomkit REST API.
67+
- `onRequest`: Lets you modify request options before sending, e.g., adding an `Authorization` header from a cookie.
68+
69+
> **Tip:** The SDK uses `ofetch` from Nuxt under the hood, so you can configure many options in the `setApiFetchOptions` method. For more details, refer to the [ofetch documentation](https://github.com/unjs/ofetch).
5470
55-
you can add multiple API clients with different configurations by calling `addApiClient` multiple times with different `slug` values.
71+
# 📚 defineResource
5672

57-
# 📚 useResource
73+
The `defineResource` is the main entry point for interacting with the Lomkit REST API. It allows you to create a resource SDK that can perform various operations on a specific resource.
5874

59-
The `useResource` composable is the main entry point for interacting with the Lomkit REST API. It allows you to create a resource client that can perform various operations on a specific resource.
75+
The `defineResource<T>(resourceName, resourcePreset?)` composable returns an object with methods to interact with a specific resource via the Lomkit REST API. See the [methods](#methods) section for more details.
6076

61-
The `useResource<T>(resourceName, resourceConfig?)` composable returns an object with methods to interact with a specific resource via the Lomkit REST API. See the [methods](#methods) section for more details.
77+
> **Tip:** All resources in the `resources` folder are auto-imported by Nuxt, so you can use them directly in your components without manual imports.
6278
6379
```ts
64-
const preset = {
80+
// resources/products.ts
81+
82+
export const useProducts = defineResource<IProducts>("products", {
83+
onRequest: ({ options }) => {
84+
const access_token = useCookie("cookie");
85+
options.headers.set("Authorization", `Bearer ${access_token.value}`);
86+
},
87+
onResponse: ({ response }) => {
88+
toast.success("Request successful!");
89+
},
90+
//...
91+
});
92+
93+
//you can also define presets for the search method, like relations, filters, etc.
94+
export const useProducts = defineResource<IProducts>("products", {
6595
search: {
6696
includes: [
6797
{
6898
relation: "category",
6999
},
70100
{
71-
relation: "stars",
101+
relation: "star",
72102
},
73103
],
74-
limit: 12,
75104
},
76-
};
77-
78-
const productsResource = useResource<IProducts>("products", preset);
79-
80-
//you can also destructure the result to get the methods directly
81-
const { mutate, findOne, search } = useResource<IProducts>("products", preset);
82-
```
83-
84-
## <a id="methods"></a> 🧩 Methods
85-
86-
### 🔎 `search(request?)`
87-
88-
Search for resources based on the request parameters. (See [Search](https://laravel-rest-api.lomkit.com/endpoints/search) for more details.)
89-
search also add to the response methods for pagination, `nextPage()`, `previousPage()`, `goToPage()`
90-
91-
```TypeScript
92-
const res = await productsResource.search({
93-
filters: [{
94-
field: "name",
95-
name: "Product Name",
96-
}],
97-
includes: [
98-
{
99-
relation: "category",
100-
}
101-
]
102-
}).catch((err) => console.error("Error during search: " ,err));
103-
104-
//pagination methods
105-
const products = ref(res);
106-
const handleNextPage = () => {
107-
products.value = await products.nextPage();
108-
};
109-
110-
```
111-
112-
### 🔎 `findOne(request?)`
113-
114-
Returns the first matching resource. (See [Search](https://laravel-rest-api.lomkit.com/endpoints/search) for more details.)
115-
116-
```TypeScript
117-
const product = await productsResource.findOne({
118-
filters: [{
119-
field: "name",
120-
name: "Product Name",
121-
}],
105+
//...
122106
});
123107
```
124108

125-
### 🔎 `findOneById(id)`
109+
> ⚠️ **Note:** The `baseURL` specified here will not override the global configuration. Hooks such as `onRequest` and `onResponse` will be merged with the global settings, not replace them.
126110
127-
Returns a resource by its ID.
111+
## <a id="methods"></a> 🧩 Methods
128112

129-
```TypeScript
130-
const product = await productsResource.findOneById(1);
131-
```
113+
your resource SDK will have the following methods available:
132114

133115
### 🧾 `details()`
134116

135117
Returns the details of a resource. (See [Details](https://laravel-rest-api.lomkit.com/endpoints/details) for more details.)
136118

137-
```TypeScript
119+
```ts
120+
const productsResource = useProducts();
138121
const details = await productsResource.details();
139122
```
140123

124+
### 🔎 `search(request?)`
125+
126+
Search for resources based on the request parameters. (See [Search](https://laravel-rest-api.lomkit.com/endpoints/search) for more details.)
127+
128+
```ts
129+
const productsResource = useProducts();
130+
const res = await productsResource
131+
.search({
132+
filters: [
133+
{
134+
field: "name",
135+
name: "Product Name",
136+
},
137+
],
138+
includes: [
139+
{
140+
relation: "category",
141+
},
142+
],
143+
})
144+
.catch((err) => console.error("Error during search: ", err));
145+
```
146+
141147
### ✏️ `mutate(mutations)`
142148

143149
Mutate a resource with the provided mutations. (See [Mutate](https://laravel-rest-api.lomkit.com/endpoints/mutate) for more details.)
144150

145-
```TypeScript
146-
const response = await productsResource.mutate([
147-
{
148-
operation: "update",
149-
key: 2,
150-
relations: {
151-
star: {
152-
operation: "attach",
153-
key: 1
154-
}
155-
}
156-
},
157-
]).catch((err) => console.error("Error during mutation: " ,err));
151+
```ts
152+
const productsResource = useProducts();
153+
const response = await productsResource
154+
.mutate([
155+
{
156+
operation: "update",
157+
key: 2,
158+
relations: {
159+
star: {
160+
operation: "attach",
161+
key: 1,
162+
},
163+
},
164+
},
165+
])
166+
.catch((err) => console.error("Error during mutation: ", err));
158167
```
159168

160169
### ⚙️ `actions(actionName, params?)`
161170

162171
Execute a specific action on a resource. (See [Actions](https://laravel-rest-api.lomkit.com/endpoints/actions) for more details.)
163172

164-
```TypeScript
173+
```ts
174+
const productsResource = useProducts();
165175
const response = await productsResource.actions("publish", {
166-
search: {
167-
filters: [{ field: 'id', value: 1 }]
168-
}
176+
search: {
177+
filters: [{ field: "id", value: 1 }],
178+
},
169179
});
170180
```
171181

172182
### 🗑️ `remove(ids)`
173183

174184
Delete resources by their IDs. (See [Delete](https://laravel-rest-api.lomkit.com/endpoints/delete) for more details.)
175185

176-
```TypeScript
186+
```ts
187+
const productsResource = useProducts();
177188
const response = await productsResource.remove([1, 2]);
178189
```
179190

180191
## Contributions
181192

182-
Contributions are welcome! If you have any suggestions, bug reports, or feature requests, please open an issue or submit a pull request on the [GitHub repository](https://github.com/edepauw/lomkit-rest-client).
193+
Contributions are welcome! If you have any suggestions, bug reports, or feature requests, please open an issue or submit a pull request on the [GitHub repository](https://github.com/edepauw/lomkit-rest-api-nuxt-sdk).
183194

184195
## License
185196

_tests/actions.nuxt.test.ts

Lines changed: 0 additions & 86 deletions
This file was deleted.

0 commit comments

Comments
 (0)