docs: cart examples

docs/content/2.features/1.useMedusaClient.md

@@ -51,3 +51,54 @@ You can now fetch the data about currently logged in user like following:
  const { customer } = await client.auth.getSession()
 </script>
 ```
+
+## Initializing a cart
+
+You must initialize a cart the first time a user visits your storefront. Once the cart is created in the Medusa backend, you can save the `cart_id` either on `localStorage` or in a `cookie`, so you can retrieve the cart's information by using the `cart_id`.
+
+To save the `cart_id` in `localStorage` you can use the following code:
+
+```vue
+<script lang="ts" setup>
+ const client = useMedusaClient();
+ 
+ const initCart = async () => {
+ const cartId = localStorage.getItem('cart_id') || null
+ 
+ if (!cartId) {
+ const { cart } = await client.carts.create();
+ localStorage.setItem('cart_id', cart.id)
+ 
+ // save the NEW cart to the store or the state
+ } else {
+ const { cart } = await client.carts.retrieve(cartId)
+ 
+ // save the EXISTING cart to the store or the state
+ }
+ }
+ 
+ initCart();
+</script>
+```
+
+To save the `cart_id` in a `cookie` you can leverage the `useCookie` composable that nuxt provides:
+
+```vue
+<script lang="ts" setup>
+ const client = useMedusaClient();
+ const cartId = useCookie('cart_id', { maxAge: 60 * 60 * 24 * 365 });
+ 
+ if (!cartId.value) {
+ const { cart } = await client.carts.create();
+ cartId.value = cart.id
+
+ // save the NEW cart to the store or the state
+ } else {
+ const { cart } = await client.carts.retrieve(cartId.value);
+
+ // save the EXISTING cart to the store or the state
+ }
+</script>
+```
+
+In both cases, first you check if the `cart_id` is already saved in the `localStorage` or `cookie`. If it is not, you create a new cart and save its `id` to the `localStorage` or `cookie`. If it is, you retrieve the cart from the Medusa backend and save it to the store or the state. 

docs/content/2.features/2.serverMedusaClient.md

@@ -60,3 +60,37 @@ export default eventHandler(async (event) => {
  return customer
 })
 ```
+
+## Initializing a cart on the server
+
+First, you need to enable the `server` option in the module configuration. Then, create a new api
+endpoint `server/api/cart.ts`:
+
+```ts
+import { serverMedusaClient } from '#medusa/server'
+
+export default eventHandler(async (event) => {
+ const client = serverMedusaClient(event)
+ const cartId = getCookie(event, 'cart_id') || null
+
+ if (!cartId) {
+ const { cart } = await client.carts.create();
+ setCookie(event, 'cart_id', cart.id)
+ return { cart }
+ } else {
+ const { cart } = await client.carts.retrieve(cartId);
+ return { cart }
+ }
+})
+```
+
+In here, we are registering a new `eventHandler` that will check if the `cart_id` cookie is set. If not, it will create a new cart on the Medusa platform and set the `cart_id` cookie. If the `cart_id` cookie is set, it will retrieve the cart information.
+
+Finally, let's fetch the cart data in our Vue components by using `$fetch` like following:
+
+```vue
+<script lang="ts" setup>
+ const { data } = await useFetch('/api/cart')
+ const cart = data.value.cart
+</script>
+```