docs(tfal-56): next/nuxt logger implementation

.gitignore

@@ -35,3 +35,6 @@ coverage
 
 .turbo
 .cache_ggshield
+
+# Docs Nuxt temp directory
+docs/.nuxt/

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

@@ -0,0 +1,162 @@
+# Logger
+
+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.
+
+## 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.
+
+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.
+
+::tabs{:titles='["Next.js", "Nuxt"]' class="mt-8"}
+
+#tab-1
+
+```ts
+// apps/storefront-unified-nextjs/sdk/config.ts
+
+// ...
+export function getSdkConfig() {
+  return defineSdkConfig(({ buildModule, config, getRequestHeaders, middlewareModule }) => ({ // [!code --]
+  return defineSdkConfig(({ buildModule, config, getRequestHeaders, loggerModule, middlewareModule }) => ({ // [!code ++]
+    logger: buildModule(loggerModule), // [!code ++]
+    // ...
+  }));
+}
+```
+
+#tab-2
+
+```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 ++]
+  // ...
+}));
+```
+::
+
+
+## Configuration
+
+The default configuration is already provided, but you can customize it by providing the following options:
+
+* `level` - the minimum level of the message to be logged. The default value is `info`. 
+* `includeStackTrace` - a boolean value that determines if the stack trace should be included in the log message. The default value is `true`.
+* `handler` - a custom handler that will be called when the message is logged.
+
+```ts
+type LoggerModuleConfig = Partial<{
+  level: LogLevel;
+  includeStackTrace: boolean;
+  handler: LoggerInterface;
+  [key: string]: any;
+}>;
+type LogLevel =
+  | "emergency"
+  | "alert"
+  | "critical"
+  | "error"
+  | "warning"
+  | "notice"
+  | "info"
+  | "debug";
+```
+
+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.:
+```ts
+  // ...
+  logger: buildModule(loggerModule, {
+    level: 'debug',
+    includeStackTrace: false,
+  }),
+```
+
+### Custom handler
+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).
+
+::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
+/**
+ * Common interface for a logger.
+ */
+type LogData = unknown;
+type Metadata = Record<string, unknown>;
+
+interface LoggerInterface {
+  emergency(logData: LogData, metadata?: Metadata): void;
+  alert(logData: LogData, metadata?: Metadata): void;
+  critical(logData: LogData, metadata?: Metadata): void;
+  error(logData: LogData, metadata?: Metadata): void;
+  warning(logData: LogData, metadata?: Metadata): void;
+  notice(logData: LogData, metadata?: Metadata): void;
+  info(logData: LogData, metadata?: Metadata): void;
+  debug(logData: LogData, metadata?: Metadata): void;
+}
+```
+
+## Usage
+
+You can use the Logger in the same way as you would use any other SDK modules:
+
+::tabs{:titles='["Next.js", "Nuxt"]' class="mt-8"}
+
+#tab-1
+
+::code-group
+
+```tsx [Server Side]
+import { getSdk } from '@/sdk';
+
+function ServerComponent() {
+  const sdk = getSdk();
+
+  sdk.logger.info('Example server side log');
+
+  // ...
+}
+```
+
+```tsx [Client Side]
+import { useSdk } from '@/sdk/alokai-context';
+
+function ClientComponent() {
+  const sdk = useSdk();
+
+  useEffect(() => {
+    sdk.logger.info('Example client side log');
+  }, []);
+
+  // ...
+}
+```
+
+::
+
+#tab-2
+
+```vue
+// component
+<script setup>
+useSdk().logger.info('Example log');
+<script>
+```
+::
+
+Now instead of using `console.log` you can use the Logger to log messages at different levels.