docs

docs/content/en/api/methods.md

@@ -0,0 +1,8 @@
+---
+title: Methods
+description: List of all methods of @eloqjs/collection.
+category: API
+position: 6
+---
+
+<alert type="warning">This documentation still in development. Not all methods are yet listed.</alert>

docs/content/en/api/options.md

@@ -0,0 +1,152 @@
+---
+title: Options
+description: List of all options of @eloqjs/collection.
+category: API
+position: 5
+---
+
+### `primaryKey`
+
+- Type: `() => string`
+- Arguments: `({ collection })`
+- Default: `id`
+
+The primary key of the items.
+
+<code-group>
+  <code-block label="JavaScript" active>
+
+  ```js
+  {
+    primaryKey: ({ collection }) => {
+      const item = collection.first()
+
+      if (item.type === 'article') {
+        return 'slug'
+      }
+
+      return 'id'
+    }
+  }
+  ```
+
+  </code-block>
+  <code-block label="TypeScript">
+
+  ```ts
+  import { Collection, ItemData } from '@eloqjs/collection'
+
+  {
+    primaryKey: <T extends ItemData>({
+      collection
+    }: {
+      collection: Collection<T>
+    }): string => {
+      const item = collection.first()
+
+      if (item.type === 'article') {
+        return 'slug'
+      }
+
+      return 'id'
+    }
+  }
+  ```
+
+  </code-block>
+</code-group>
+
+### `toQuery`
+
+- Type: `() => Class`
+- Arguments: `({ collection, item })`
+
+If our items are Model classes with Query Builder, we can configure this option to
+convert the collection into a Query Builder.
+
+> This example is from `vue-api-query` integration.
+
+<code-group>
+  <code-block label="JavaScript" active>
+
+  ```js
+  {
+    toQuery: ({ collection, item }) => {
+      return item.newModelQuery().whereIn(
+        collection.primaryKey(), collection.modelKeys()
+      )
+    }
+  }
+  ```
+
+  </code-block>
+  <code-block label="TypeScript">
+
+  ```ts
+  import { Collection, ItemData } from '@eloqjs/collection'
+
+  {
+    toQuery: <T extends ItemData>({
+      collection,
+      item
+    }: {
+      collection: Collection<T>
+      item: T
+    }): T => {
+      const model = item.newModelQuery().whereIn(
+        collection.primaryKey(), collection.modelKeys()
+      )
+
+      return (model as unknown) as T
+    }
+  }
+  ```
+
+
+  </code-block>
+</code-group>
+
+### `fresh`
+
+- Type: `() => Promise`
+- Arguments: `({ collection, include })`
+
+If our items are Model classes with Query Builder, we can configure this option to
+reload a fresh item instance from the database for all the items.
+
+> This example is from `vue-api-query` integration.
+
+<code-group>
+  <code-block label="JavaScript" active>
+
+  ```js
+  {
+    fresh: async ({ collection, include }) => {
+      return await collection.toQuery().include(...include).$get()
+    }
+  }
+  ```
+
+  </code-block>
+  <code-block label="TypeScript">
+
+  ```ts
+  import { Collection, ItemData } from '@eloqjs/collection'
+
+  {
+    fresh: async <T extends ItemData>({
+      collection,
+      include
+    }: {
+      collection: Collection<T>,
+      include: string[]
+    }): Promise<Collection<T>> => {
+      const _collection = await collection.toQuery()
+        .include(...include).$get()
+      return (_collection as unknown) as Promise<Collection<T>>
+    }
+  }
+  ```
+
+  </code-block>
+</code-group>

docs/content/en/configuration.md

@@ -9,6 +9,8 @@ position: 3
 
 <alert type="info">If you are using **Nuxt** or **Vue**, please follow their configuration steps instead of this one.</alert>
 
+See the [API reference](/api/options) for a list of available options.
+
 You can configure `@eloqjs/collection` with the `Collection.config` property in `src/main.js`.
 
 ```js{}[src/main.js]
@@ -25,6 +27,8 @@ Collection.config = {
 
 <alert type="warning">The nuxt module [@eloqjs/nuxt-collection](https://github.com/eloqjs/nuxt-collection) will be released soon.</alert>
 
+See the [API reference](/api/options) for a list of available options.
+
 You can configure `@eloqjs/nuxt-collection` with the `collection` property in your `nuxt.config.js`.
 
 ```js{}[nuxt.config.js]
@@ -37,6 +41,8 @@ export default {
 
 ### Vue
 
+See the [API reference](/api/options) for a list of available options.
+
 You can configure `@eloqjs/vue-collection` by passing the options to `Vue.use` in `src/main.js`.
 
 ```js{}[src/main.js]
@@ -47,152 +53,3 @@ Vue.use(Collection, {
   // My custom configuration
 })
 ```
-
-
-## Properties
-
-### `primaryKey`
-
-- Type: `() => string`
-- Arguments: `({ collection })` 
-- Default: `id`
-
-The primary key of the items.
-
-<code-group>
-  <code-block label="JavaScript" active>
-
-  ```js
-  {
-    primaryKey: ({ collection }) => {
-      const item = collection.first()
-
-      if (item.type === 'article') {
-        return 'slug'
-      }
-
-      return 'id'
-    }
-  }
-  ```
-
-  </code-block>
-  <code-block label="TypeScript">
-
-  ```ts
-  import { Collection, ItemData } from '@eloqjs/collection'
-
-  {
-    primaryKey: <T extends ItemData>({
-      collection
-    }: {
-      collection: Collection<T>
-    }): string => {
-      const item = collection.first()
-
-      if (item.type === 'article') {
-        return 'slug'
-      }
-
-      return 'id'
-    }
-  }
-  ```
-
-  </code-block>
-</code-group>
-
-### `toQuery`
-
-- Type: `() => Class`
-- Arguments: `({ collection, item })`
-
-If our items are Model classes with Query Builder, we can configure this option to
-convert the collection into a Query Builder.
-
-> This example is from `vue-api-query` integration.
-
-<code-group>
-  <code-block label="JavaScript" active>
-
-  ```js
-  {
-    toQuery: ({ collection, item }) => {
-      return item.newModelQuery().whereIn(
-        collection.primaryKey(), collection.modelKeys()
-      )
-    }
-  }
-  ```
-
-  </code-block>
-  <code-block label="TypeScript">
-
-  ```ts
-  import { Collection, ItemData } from '@eloqjs/collection'
-
-  {
-    toQuery: <T extends ItemData>({
-      collection,
-      item
-    }: {
-      collection: Collection<T>
-      item: T
-    }): T => {
-      const model = item.newModelQuery().whereIn(
-        collection.primaryKey(), collection.modelKeys()
-      )
-
-      return (model as unknown) as T
-    }
-  }
-  ```
-
-
-  </code-block>
-</code-group>
-
-### `fresh`
-
-- Type: `() => Promise`
-- Arguments: `({ collection, include })`
-
-If our items are Model classes with Query Builder, we can configure this option to
-reload a fresh item instance from the database for all the items.
-
-> This example is from `vue-api-query` integration.
-
-<code-group>
-  <code-block label="JavaScript" active>
-
-  ```js
-  {
-    fresh: async ({ collection, include }) => {
-      return await collection.toQuery().include(...include).$get()
-    }
-  }
-  ```
-
-  </code-block>
-  <code-block label="TypeScript">
-
-  ```ts
-  import { Collection, ItemData } from '@eloqjs/collection'
-
-  {
-    fresh: async <T extends ItemData>({
-      collection,
-      include
-    }: {
-      collection: Collection<T>,
-      include: string[]
-    }): Promise<Collection<T>> => {
-      const _collection = await collection.toQuery()
-        .include(...include).$get()
-      return (_collection as unknown) as Promise<Collection<T>>
-    }
-  }
-  ```
-
-  </code-block>
-</code-group>

docs/content/en/usage.md

@@ -7,6 +7,8 @@ position: 4
 
 <alert type="warning">This documentation still in development.</alert>
 
+See the [API reference](/api/methods) for a list of available methods.
+
 <code-group>
   <code-block label="collect()" active>
 
@@ -38,6 +40,8 @@ position: 4
 
 <alert type="warning">The nuxt module [@eloqjs/nuxt-collection](https://github.com/eloqjs/nuxt-collection) will be released soon.</alert>
 
+See the [API reference](/api/methods) for a list of available methods.
+
 The module globally injects `$collect` instance, meaning that you can access it anywhere
 using `this.$collect`. For plugins, asyncData, nuxtServerInit and Middleware, you can access it from `context.$collect`.
 
@@ -64,6 +68,8 @@ using `this.$collect`. For plugins, asyncData, nuxtServerInit and Middleware, yo
 
 ### Vue
 
+See the [API reference](/api/methods) for a list of available methods.
+
 The plugin globally injects `$collect` instance, meaning that you can access it anywhere
 using `this.$collect`. You can also access it from `Vue.collect`.
 
@@ -87,8 +93,3 @@ using `this.$collect`. You can also access it from `Vue.collect`.
 
   </code-block>
 </code-group>
-
-## Methods
-
-<alert type="warning">This documentation still in development. Not all methods are yet listed.</alert>
-