docs(tfal-89,tfal-83): update logger docs for current solution

docs/content/4.sdk/2.getting-started/4.logger.md

@@ -2,59 +2,48 @@
 
 The Logger provides a logging utility for Alokai Storefront projects. It allows you to log messages at various levels and ability to provide additional context.
 
-It is created to provide a unified way of logging messages across the project along with providing additional data out of the box.
+It is created to provide a unified way of logging messages across the project along with providing a structured data.
 
 ## Installation
 
 If the Logger is already included in the Alokai Storefront, you can skip this step.
 
-The Logger is provided by the SDK and framework specific packages.
+The Logger is provided by the SDK and the framework specific packages.
 
 In order to install the Logger, you need to update following packages to at least the following versions:
 
 - `@vue-storefront/sdk` to `3.3.0`
 - `@vue-storefront/nuxt` to `6.2.0`
 - `@vue-storefront/next` to `4.3.0`
 
-After updating the packages, you need to provide the Logger module to the SDK config.
+After updating the packages, you need to provide the Logger to the storefront.
 
 ::tabs{:titles='["Next.js", "Nuxt"]' class="mt-8"}
 
 #tab-1
 
+Create a file `logger.ts` in the `sdk` directory and add the following content:
+
 ```ts
-// apps/storefront-unified-nextjs/sdk/config.ts
+// apps/storefront-unified-nextjs/sdk/logger.ts
 
-// ...
-export function getSdkConfig() {
-  return defineSdkConfig(({ buildModule, config, getRequestHeaders, middlewareModule }) => ({ // [!code --]
-  return defineSdkConfig(({ buildModule, config, getRequestHeaders, loggerModule, middlewareModule }) => ({ // [!code ++]
-    logger: buildModule(loggerModule), // [!code ++]
-    // ...
-  }));
-}
-```
+import { createLogger } from '@vue-storefront/next';
 
-#tab-2
+export const logger = createLogger();
 
-```ts
-// apps/storefront-unified-nuxt/sdk/config.ts
-
-// ...
-export default defineSdkConfig(({ buildModule, middlewareModule, getRequestHeaders, config }) => ({ // [!code --]
-export default defineSdkConfig(({ buildModule, loggerModule, middlewareModule, getRequestHeaders, config }) => ({ // [!code ++]
-  logger: buildModule(loggerModule), // [!code ++]
-  // ...
-}));
 ```
 
+
+#tab-2
+
+You don't need to do anything. The Logger is automatically provided by the `@vue-storefront/nuxt` package. It is available via auto-import and ready to use.
 ::
 
 ## Configuration
 
 The default configuration is already provided, but you can customize it by providing the following options:
 
-- `verbosity` - the minimum level of the message to be logged. The default value is `info`. Possible values are:
+- `verbosity` - the minimum level of the message to be logged. The default value is `info`. Available values are:
   - `emergency`
   - `alert`
   - `critical`
@@ -65,72 +54,90 @@ The default configuration is already provided, but you can customize it by provi
   - `debug`
 - `includeStackTrace` - a boolean value that determines if the stack trace should be included in the log message. The default value is `true`.
 
-To provide the configuration for the Logger, you need to update the SDK config with the Logger module configuration by providing an object with options to the `buildModule` function, e.g.:
+To provide the configuration for the Logger, you need to update the following file:
 
-```ts
-  // ...
-  logger: buildModule(loggerModule, {
-    verbosity: 'debug',
-    includeStackTrace: false,
-  }),
-```
+::tabs{:titles='["Next.js", "Nuxt"]' class="mt-8"}
 
-### Custom handler
+#tab-1
 
-There might a certain use case where you want to customize the way the Logger logs messages e.g. you want to change a log provider to a different one.
-Then you can provide your own custom handler for the Logger. The handler must implement the `LoggerInterface` interface provided in the section [types](#type).
+Navigate to the `logger.ts` file in the `sdk` directory and add the configuration object to the `createLogger` function, e.g.:
 
-::warning
-Keep in mind that if you provide a custom handler, it will override the built-in logging functions and the other options passed to the Logger configuration will be ignored.
-::
+```ts
+// apps/storefront-unified-nextjs/sdk/logger.ts
 
-## Usage
+import { createLogger } from '@vue-storefront/next';
 
-You can use the Logger in the same way as you would use any other SDK modules:
+export const logger = createLogger(); // [!code --]
+export const logger = createLogger({ // [!code ++]
+  verbosity: 'debug', // [!code ++]
+  includeStackTrace: false, // [!code ++]
+}); // [!code ++]
+```
 
-::tabs{:titles='["Next.js", "Nuxt"]' class="mt-8"}
+#tab-2
 
-#tab-1
+Navigate to the `nuxt.config.ts` file and add the configuration object to the `@vue-storefront/nuxt` module, e.g.:
+```ts
+// apps/storefront-unified-nuxt/nuxt.config.ts
 
-::code-group
+export default defineNuxtConfig({
+  // ...
+  modules: [
+    // ...
+    '@vue-storefront/nuxt', // [!code --]
+    ['@vue-storefront/nuxt', { // [!code ++]
+      logger: { // [!code ++]
+        verbosity: 'debug', // [!code ++]
+        includeStackTrace: false, // [!code ++]
+      } // [!code ++]
+    }], // [!code ++]
+    // ...
+  ],
+});
 
-```tsx [Server Side]
-import { getSdk } from "@/sdk";
+```
+::
 
-function ServerComponent() {
-  const sdk = getSdk();
+## Usage
 
-  sdk.logger.info("Example server side log");
+You can use the Logger in similarly as you would use the common `console` object:
 
-  // ...
-}
-```
+::tabs{:titles='["Next.js", "Nuxt"]' class="mt-8"}
 
-```tsx [Client Side]
-import { useSdk } from "@/sdk/alokai-context";
+#tab-1
 
-function ClientComponent() {
-  const sdk = useSdk();
+No matter if this is a client or server side code, you can import the Logger and use it to log messages the same way, e.g.:
+```tsx
+import { logger } from "@/sdk/logger";
 
-  useEffect(() => {
-    sdk.logger.info("Example client side log");
-  }, []);
+function SomeComponent() {
+  logger.info("Example server side log");
 
   // ...
 }
 ```
 
-::
 
 #tab-2
 
 ```vue
 // component
 <script setup>
-useSdk().logger.info('Example log');
+logger.info('Example log');
 <script>
 ```
 
 ::
 
-Now instead of using `console.log` you can use the Logger to log messages at different levels.
+Now instead of using `console` you can use the Logger to log messages at different levels.
+You can use the following methods:
+- `emergency`
+- `alert`
+- `critical`
+- `error`
+- `warning`
+- `notice`
+- `info`
+- `debug`
+
+Keep in mind that `log` method is not available, you can use `info` instead.