Merge pull request #51 from Baroshem/chore/1.0.0-rc.1

Chore/1.0.0 rc.1

.stackblitz/app.vue

@@ -1,6 +1,14 @@
 <script lang="ts" setup>
 const client = useMedusaClient();
-const { products } = await client.products.list();
+
+// Client fetching
+const { regions } = await client.store.region.list()
+const { products } = await client.store.product.list({
+  region_id: regions[0].id,
+  fields: `*variants.calculated_price`
+});
+
+// Server Fetching
 const { data } = await useFetch('/api/products')
 </script>
 

.stackblitz/package.json

@@ -8,9 +8,9 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "nuxt": "3.3.1"
+    "nuxt": "latest"
   },
   "dependencies": {
-    "nuxt-medusa": "^0.5.0"
+    "nuxt-medusa": "latest"
   }
 }

.stackblitz/server/api/products.ts

@@ -2,7 +2,11 @@ import { serverMedusaClient } from '#medusa/server'
 
 export default eventHandler(async (event) => {
   const client = serverMedusaClient(event)
-  const { products } = await client.products.list()
+  const { regions } = await client.store.region.list()
+  const { products } = await client.store.product.list({
+    region_id: regions[0].id,
+    fields: `*variants.calculated_price`
+  })
 
   return { products }
 })

README.md

@@ -16,7 +16,7 @@
 ## Features
 
 - Nuxt 3 ready
-- Wrapper around `@medusajs/medusa-js`
+- Wrapper around `@medusajs/js-sdk`
 - Handy composables like `useMedusaClient`
 - Usage in API server routes with `serverMedusaClient`
 - TypeScript support
@@ -40,7 +40,7 @@ And that's it! You can now fetch data from Medusa in Nuxt ✨
 ```vue
 <script setup lang="ts">
   const client = useMedusaClient();
-  const { products } = await client.products.list();
+  const { products } = await client.store.product.list();
 </script>
 ```
 

docs/content/0.index.md

@@ -25,7 +25,7 @@ This module helps you connect to [Medusa](https://medusajs.com) Headless Commerc
 #extra
   ::list
     - Nuxt 3 ready
-    - Wrapper around `@medusajs/medusa-js`
+    - Wrapper around `@medusajs/js-sdk`
     - Handy composables like `useMedusaClient`
     - Usage in API server routes with `serverMedusaClient`
     - TypeScript support

docs/content/1.getting-started/1.setup.md

@@ -24,7 +24,7 @@ That's it! You can now fetch data from Medusa in your Nuxt app ✨
 ```vue
 <script setup lang="ts">
   const client = useMedusaClient();
-  const { products } = await client.products.list();
+  const { products } = await client.store.product.list();
 </script>
 ```
 

docs/content/1.getting-started/2.options.md

@@ -8,28 +8,28 @@ Configure Nuxt Medusa easily with the `medusa` property.
 export default {
   // Defaults options
   medusa: {
-    baseUrl: 'http://localhost:9000',
-    maxRetries: 3,
+    baseUrl: process.env.MEDUSA_URL || 'http://localhost:9000',
     global: true,
-    server: false
+    server: false,
+    debug: false,
+    publishableKey: "",
+    auth: {
+      type: "session",
+      jwtTokenStorageKey: "medusa_auth_token",
+      jwtTokenStorageMethod: "local"
+    },
   }
 }
 ```
 
-For full configuration of `@medusa/medusa-js` check out the documentation [here](https://docs.medusajs.com/js-client/overview#configuration).
+For full configuration of `@medusajs/js-sdk` check out the documentation [here](https://docs.medusajs.com/resources/js-sdk).
 
 ## `baseUrl`
 
 - Default: `http://localhost:9000`
 
 The url to which requests are made to.
 
-## `maxRetries`
-
-- Default: `3`
-
-The amount of times a request is retried.
-
 ## `global`
 
 - Default: `true`
@@ -48,8 +48,58 @@ When set to `true` it will add a server utility `serverMedusaClient` that allows
 
 Optional API key used for authenticating admin requests, can be done from server or `serverMedusaClient` only.
 
-## `publishableApiKey`
+## `publishableKey`
 
 - Optional: `''`
 
-Optional publishable API key used for storefront requests.
+Required publishable API key used for storefront requests, you can generate this API key following the instructions [here](https://docs.medusajs.com/resources/storefront-development/publishable-api-keys).
+
+## `auth.type`
+
+- Default: `'session'`
+
+A string that specifies the user authentication method to use.
+
+Possible types are:
+
+- `session`: The user is authenticated with a cookie session.
+- `jwt`: The user is authenticated with a JWT token that's passed in the Bearer authorization header.
+
+## `auth.jwtTokenStorageKey`
+
+- Default: `'medusa_auth_token'`
+
+A string that, when `auth.type` is `jwt`, specifies the key of the JWT token in the storage specified in the `auth.jwtTokenStorageMethod` configuration.
+
+## `auth.jwtTokenStorageMethod`
+
+- Default: `'local'`
+
+A string that, when `auth.type` is `jwt`, specifies where the JWT token is stored. Possible values are:
+
+- `local` for the Local Storage.
+- `session` for the Session Storage.
+- `memory` to store it within the SDK for the current application's runtime.
+
+## `globalHeaders`
+
+- Optional: `''`
+
+An object of key-value pairs indicating headers to pass in all requests, where the key indicates the name of the header field.
+
+## `debug`
+
+- Default: `false`
+
+A boolean indicating whether to show debug messages of requests sent in the console. This is useful during development.
+
+## `logger`
+
+- Default: JavaScript's console is used by default.
+
+Replace the logger used by the JS SDK to log messages. The logger must be a class or object having the following methods:
+
+- `error`: A function that accepts an error message to log.
+- `warn`: A function that accepts a warning message to log.
+- `info`: A function that accepts an info message to log.
+- `debug`: A function that accepts a debug message to log.

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

@@ -2,9 +2,9 @@
 
 ---
 
-This composable uses [@medusa/medusa-js](https://www.npmjs.com/package/@medusajs/medusa-js) under the hood and gives you access to the Medusa client.
+This composable uses [@medusajs/js-sdk](https://www.npmjs.com/package/@medusajs/js-sdk) under the hood and gives you access to the Medusa client.
 
-Check the official documentation of Medusa JS Client to learn more about all the available options [here](https://docs.medusajs.com/js-client/overview/)
+Check the official documentation of Medusa JS Client to learn more about all the available options [here](https://docs.medusajs.com/resources/js-sdk)
 
 ## Fetching Products
 
@@ -13,7 +13,7 @@ Here is an example of a fetch using the `list` method:
 ```vue
 <script lang="ts" setup>
   const client = useMedusaClient();
-  const { products } = await client.products.list();
+  const { products } = await client.store.product.list();
 </script>
 ```
 
@@ -24,31 +24,31 @@ Here is an example of a fetch using the `list` method:
 ```vue
 <script lang="ts" setup>
   const client = useMedusaClient();
-  const { collections } = await client.collections.list();
+  const { collections } = await client.store.collection.list();
 </script>
 ```
 
 ## Authenticating
 
-Authenticating users with `authenticate` method:
+Authenticating users with `login` method:
 
 ```vue
 <script lang="ts" setup>
   const client = useMedusaClient();
 
-  await client.auth.authenticate({ email: '[email protected]', password: 'test1234' });
+  await client.auth.login('customer', 'emailpass', { email: '[email protected]', password: 'test1234' });
 </script>
 ```
 
-This will create a new cookie called `connect.sid` that will have a `httpOnly` flag set to true (which means that it is not accessible from the frontend JS code).
+This will create a new cookie (if the authentication type is set to session) called `connect.sid` that will have a `httpOnly` flag set to true (which means that it is not accessible from the frontend JS code).
 
 You can now fetch data about the currently logged in user as shown below:
 
 ```vue
 <script lang="ts" setup>
   const client = useMedusaClient();
 
-  const { customer } = await client.auth.getSession()
+  const { customer } = await client.store.customer.retrieve()
 </script>
 ```
 
@@ -66,12 +66,12 @@ To save the `cart_id` in `localStorage` you can use the following code:
     const cartId = localStorage.getItem('cart_id') || null
     
     if (!cartId) {
-      const { cart } = await client.carts.create();
+      const { cart } = await client.store.cart.create({ region_id: 'reg_123' });
       localStorage.setItem('cart_id', cart.id)
       
       // save the NEW cart to the store or the state
     } else {
-      const { cart } = await client.carts.retrieve(cartId)
+      const { cart } = await client.store.cart.retrieve(cartId)
       
       // save the EXISTING cart to the store or the state
     }
@@ -89,12 +89,12 @@ To save the `cart_id` in a `cookie` you can leverage the `useCookie` composable
   const cartId = useCookie('cart_id', { maxAge: 60 * 60 * 24 * 365 });
   
   if (!cartId.value) {
-    const { cart } = await client.carts.create();
+    const { cart } = await client.store.cart.create({ region_id: 'reg_123' });
     cartId.value = cart.id
 
     // save the NEW cart to the store or the state
   } else {
-    const { cart } = await client.carts.retrieve(cartId.value);
+    const { cart } = await client.store.cart.retrieve(cartId.value);
 
     // save the EXISTING cart to the store or the state
   }

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

@@ -2,9 +2,9 @@
 
 ---
 
-This server utility is using [@medusa/medusa-js](https://www.npmjs.com/package/@medusajs/medusa-js) under the hood and gives you access to the Medusa client.
+This server utility is using [@medusajs/js-sdk](https://www.npmjs.com/package/@medusajs/js-sdk) under the hood and gives you access to the Medusa client.
 
-Check the official documentation of Medusa JS Client to learn more about all the available options [here](https://docs.medusajs.com/js-client/overview/)
+Check the official documentation of Medusa JS Client to learn more about all the available options [here](https://docs.medusajs.com/resources/js-sdk)
 
 ## Fetching data from Medusa on the Server
 
@@ -26,7 +26,7 @@ import { serverMedusaClient } from '#medusa/server'
 
 export default eventHandler(async (event) => {
   const client = serverMedusaClient(event)
-  const { products } = await client.products.list()
+  const { products } = await client.store.product.list()
 
   return { products }
 })
@@ -53,7 +53,7 @@ import { serverMedusaClient } from '#medusa/server'
 export default eventHandler(async (event) => {
   const client = serverMedusaClient(event)
 
-  const { customer } = await client.auth.getSession({
+  const { customer } = await client.store.customer.retrieve({}, {
     Cookie: event.node.req.headers.cookie,
   });
 
@@ -74,11 +74,11 @@ export default eventHandler(async (event) => {
   const cartId = getCookie(event, 'cart_id') || null
 
   if (!cartId) {
-    const { cart } = await client.carts.create();
+    const { cart } = await client.store.cart.create({ region_id: 'reg_123' });
     setCookie(event, 'cart_id', cart.id)
     return { cart }
   } else {
-    const { cart } = await client.carts.retrieve(cartId);
+    const { cart } = await client.store.cart.retrieve(cartId);
     return { cart }
   }
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-medusa",
-  "version": "0.5.0",
+  "version": "1.0.0-rc.1",
   "description": "Medusa module for Nuxt",
   "license": "MIT",
   "type": "module",
@@ -37,7 +37,8 @@
     "stackblitz": "cd .stackblitz && yarn && yarn dev"
   },
   "dependencies": {
-    "@medusajs/medusa-js": "^6.1.3",
+    "@medusajs/js-sdk": "^2.0.1",
+    "@medusajs/types": "^2.0.1",
     "@nuxt/kit": "^3.8.0",
     "defu": "^6.1.2"
   },

playground/app.vue

@@ -1,6 +1,14 @@
 <script lang="ts" setup>
 const client = useMedusaClient();
-const { products } = await client.products.list();
+
+// Client fetching
+const { regions } = await client.store.region.list()
+const { products } = await client.store.product.list({
+  region_id: regions[0].id,
+  fields: `*variants.calculated_price`
+});
+
+// Server Fetching
 const { data } = await useFetch('/api/products')
 </script>
 
@@ -25,7 +33,7 @@ const { data } = await useFetch('/api/products')
               {{ product.title }}
             </h5>
             <pre class="text-gray-500 mb-4">{{
-            product.variants[0].prices[0].amount
+              product.variants[0].calculated_price.calculated_amount
             }}</pre>
             <p>{{ product.description }}</p>
           </div>
@@ -51,7 +59,7 @@ const { data } = await useFetch('/api/products')
               {{ product.title }}
             </h5>
             <pre class="text-gray-500 mb-4">{{
-            product.variants[0].prices[0].amount
+              product.variants[0].calculated_price.calculated_amount
             }}</pre>
             <p>{{ product.description }}</p>
           </div>

playground/nuxt.config.ts

@@ -13,12 +13,12 @@ export default defineNuxtConfig({
   },
   modules: ['../src/module'],
   medusa: {
-      baseUrl: 'https://production-like-starter.herokuapp.com',
+      baseUrl: 'http://localhost:9000',
     //   apiKey: 'test',
-    //   publishableApiKey: 'test',
+      publishableKey: 'your_apy_key',
     //   maxRetries: 3
     //   global: false
-    server: true
+      server: true
   },
   devtools: { enabled: true }
 })

playground/server/api/customer.ts

@@ -3,9 +3,9 @@ import { serverMedusaClient } from '#medusa/server'
 export default eventHandler(async (event) => {
   const client = serverMedusaClient(event)
 
-  const { customer } = await client.auth.getSession({
+  const { customer } = await client.store.customer.retrieve({}, {
     Cookie: event.node.req.headers.cookie,
   });
 
   return customer
-})
+})