+ {{ headline }} +
++ {{ description }} +
+
+
diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/2.installation.md
new file mode 100644
index 0000000..3a98c7a
--- /dev/null
+++ b/docs/content/1.getting-started/2.installation.md
@@ -0,0 +1,79 @@
+---
+title: Installation
+description: How to add nuxt-laravel-echo to your Nuxt application!
+navigation:
+ icon: i-lucide-download
+---
+
+## Quick Start
+
+You can use the following command to install the module
+and automatically register it in your `nuxt.config.ts` modules section
+
+```bash [Terminal]
+npx nuxi@latest module add nuxt-laravel-echo
+```
+
+or manually install a dependency via:
+
+```bash [Terminal]
+pnpm add nuxt-laravel-echo
+```
+
+and register the module in your `nuxt.config.ts`:
+
+```typescript [nuxt.config.ts]
+export default defineNuxtConfig({
+ modules: [
+ // other modules
+ 'nuxt-laravel-echo'
+ ],
+
+ echo: {},
+})
+```
+
+## Configuration
+
+Once you have the module installed and registered, provide the
+configuration in `nuxt.config.ts` according to your setup.
+
+::tip
+---
+target: _blank
+to: https://laravel.com/docs/11.x/broadcasting#client-reverb
+---
+See more details here - **Laravel Broadcasting Client Setup**.
+::
+
+```typescript [nuxt.config.ts]
+export default defineNuxtConfig({
+ //... other parts of the config
+
+ echo: {
+ key: 'REPLACE_ME', // Your Laravel Echo app key
+ authentication: {
+ baseUrl: 'laravel.test', // Your Laravel app URL
+ },
+ },
+})
+```
+
+That's it! You can now use Nuxt Auth Sanctum in your Nuxt app ✨
+
+## Dev server
+
+If you experience issues during the dev server run (`pnpm run dev`), you should enable compatibility mode for the Pusher
+library by adding Vite configuration in your `nuxt.config.ts` like this:
+
+```typescript [nuxt.config.ts]
+export default defineNuxtConfig({
+ // ... other parts of the config
+
+ vite: {
+ optimizeDeps: {
+ include: ['nuxt-laravel-echo > pusher-js'], // or ['pusher-js'] for older Vite versions
+ },
+ },
+})
+```
diff --git a/docs/content/2.usage/1.config.md b/docs/content/2.usage/1.config.md
new file mode 100644
index 0000000..b3f01be
--- /dev/null
+++ b/docs/content/2.usage/1.config.md
@@ -0,0 +1,117 @@
+---
+title: Configuration
+description: Detailed description of available module options.
+
+navigation:
+ icon: i-lucide-cog
+---
+
+## Default configuration
+
+By default, the module uses the following configuration values that you can adjust:
+
+```typescript [nuxt.config.ts]
+export default defineNuxtConfig({
+ modules: ['nuxt-laravel-echo'],
+
+ echo: {
+ broadcaster: 'reverb', // available: reverb, pusher
+ host: 'localhost',
+ port: 8080,
+ scheme: 'https', // available: http, https
+ transports: ['ws', 'wss'],
+ authentication: {
+ mode: 'cookie',
+ baseUrl: 'http://localhost:80',
+ authEndpoint: '/broadcasting/auth',
+ csrfEndpoint: '/sanctum/csrf-cookie',
+ csrfCookie: 'XSRF-TOKEN',
+ csrfHeader: 'X-XSRF-TOKEN',
+ },
+ logLevel: 3,
+ properties: undefined,
+ },
+})
+```
+
+If you don't specify any value in your `nuxt.config.ts`, then the default config will be used on plugin initialization.
+
+## Overrides
+
+Module configuration is exposed to `runtimeConfig` property of your Nuxt app,
+so you can override either in `echo` module config or `runtimeConfig.public.echo` property.
+
+```typescript [nuxt.config.ts]
+export default defineNuxtConfig({
+ modules: ['nuxt-laravel-echo'],
+
+ echo: {
+ key: 'MY_APP_KEY',
+ },
+
+ runtimeConfig: {
+ public: {
+ echo: {
+ logLevel: 3,
+ },
+ },
+ },
+})
+```
+
+## Environment variables
+
+It is possible to override options via environment variables too.
+It might be useful when you want to use `.env` file to provide key for the broadcast backend.
+
+And here is what it will look like in `.env` file:
+
+```env [.env]
+NUXT_PUBLIC_ECHO_KEY='REPLACE_ME'
+```
+
+## Available options
+
+For any additional configurations, you can adjust the next list of available parameters:
+
+| Parameter | Description | Default |
+| --------- | ----------- | ------- |
+| **key** | The Laravel Broadcasting app key for a secure connection. | `undefined` |
+| **broadcaster** | The Laravel broadcaster type to use. Use reverb or pusher. | `reverb` |
+| **host** | The host to connect to WebSocket. | `localhost` |
+| **port** | The port to connect to WebSocket. | `8080` |
+| **scheme** | The scheme to use for the connection. Use http or https. | `https` |
+| **cluster** | The application cluster to connect to. | `undefined` |
+| **transports** | The transports to enable for the connection. | `['ws', 'wss']` |
+| **authentication** | Authentication options for Private and Presence channels. | `object` |
+| **authentication.mode** | Authentication mode cookie or token | `cookie` |
+| **authentication.baseUrl** | The base URL of Laravel application. | `http://localhost:80` |
+| **authentication.authEndpoint** | The endpoint used for channels authentication. | `/broadcasting/auth` |
+| **authentication.csrfEndpoint** | The endpoint used for CSRF token retrieval. | `/sanctum/csrf-cookie` |
+| **authentication.csrfCookie** | The name of the CSRF cookie. | `XSRF-TOKEN` |
+| **authentication.csrfHeader** | The name of the CSRF header. | `X-XSRF-TOKEN` |
+| **logLevel** | The log level to use for the logger. | `3` |
+| **properties** | Additional properties to extend the Echo instance options. See Additional properties section. | `undefined` |
+
+## Additional properties
+
+When you are using the Pusher backend, you may need to assign additional properties to your Echo instance object such as:
+
+- enableStats
+- activityTimeout
+- etc
+
+For these, you can override `echo.properties` parameter to pass all the details that are not included in the default config:
+
+```typescript [nuxt.config.ts]
+export default defineNuxtConfig({
+ modules: ['nuxt-laravel-echo'],
+
+ echo: {
+ key: 'REPLACE_ME',
+ properties: {
+ customField: 'customValue',
+ },
+ },
+})
+```
diff --git a/docs/content/2.usage/2.cookie.md b/docs/content/2.usage/2.cookie.md
new file mode 100644
index 0000000..e7ebe71
--- /dev/null
+++ b/docs/content/2.usage/2.cookie.md
@@ -0,0 +1,40 @@
+---
+title: Cookie authentication
+description: How to setup Sanctum cookie-based authentication for Laravel Echo.
+
+navigation:
+ icon: i-lucide-cookie
+---
+
+## Configuration
+
+By default, the module provides configuration to integrate seamlessly with Laravel Sanctum authentication based on the XSRF token.
+
+To explicitly set this authentication mode, update `echo.authentication.mode` configuration property to `cookie`.
+
+::tip
+---
+to: https://laravel.com/docs/12.x/sanctum#authorizing-private-broadcast-channels
+target: _blank
+---
+You can check the official Laravel documentation here - **Authorizing Private Channels**.
+::
+
+::warning
+Nuxt and Laravel applications must share the same top-level domain. For instance:
+- Nuxt application - `domain.com`
+- Laravel application - `api.domain.com`
+::
+
+## How it works
+
+You should already have an authenticated user by submitting credentials to your login endpoint,
+for instance, using the [Nuxt Auth Sanctum](https://manchenkoff.gitbook.io/nuxt-auth-sanctum) module.
+
+Once the module has an authentication state, it will request a CSRF cookie from the API,
+and pass it as an XSRF header to each Echo channel authorization request to confirm the current user identity.
+
+::callout
+Ensure that you use `cookie` mode for `nuxt-auth-sanctum` module
+to save the CSRF cookie from the API response on authentication requests.
+::
diff --git a/docs/content/2.usage/3.token.md b/docs/content/2.usage/3.token.md
new file mode 100644
index 0000000..d347745
--- /dev/null
+++ b/docs/content/2.usage/3.token.md
@@ -0,0 +1,48 @@
+---
+title: Token authentication
+description: How to setup Sanctum Bearer token-based authentication for Laravel Echo.
+navigation:
+ icon: i-lucide-shield
+---
+
+## Configuration
+
+::caution
+Beware, that token-based authentication is not recommended for SPA applications.
+::
+
+Sometimes, token authentication might be useful when you cannot host your application on the same TLD
+or have a mobile or desktop application built with Nuxt (e.g. based on Capacitor).
+
+To explicitly set this authentication mode, update `echo.authentication.mode` configuration property to `token`.
+
+::tip
+---
+to: https://laravel.com/docs/12.x/sanctum#authorizing-private-broadcast-channels
+target: _blank
+---
+You can check the official Laravel documentation here - **Authorizing Private Channels**.
+::
+
+## How it works
+
+You should already have an authenticated user by submitting credentials to your login endpoint,
+for instance, using the [Nuxt Auth Sanctum](https://manchenkoff.gitbook.io/nuxt-auth-sanctum) module.
+
+Once the module has an authentication state, it will request a CSRF cookie from the API,
+and pass it as an XSRF header to each Echo channel authorization request to confirm the current user identity.
+
+::callout
+Ensure that you use `cookie` mode for `nuxt-auth-sanctum` module
+to save the CSRF cookie from the API response on authentication requests.
+::
+
+## Custom token storage
+
+Default token storage uses cookies to keep the Authentication token and
+automatically load it for Echo channel authorization requests.
+
+However, you are free to define custom storage in your `app.config.ts` by implementing an interface
+(especially, when cookies are not supported, for example - *Capacitor*, *Ionic*, *LocalStorage*, etc).
+
+Check this section for more details - [Token storage](/other/token-storage).
diff --git a/docs/content/3.composables/1.useEcho.md b/docs/content/3.composables/1.useEcho.md
new file mode 100644
index 0000000..08e321f
--- /dev/null
+++ b/docs/content/3.composables/1.useEcho.md
@@ -0,0 +1,69 @@
+---
+title: useEcho
+description: Composable for working with Echo isntance in your code.
+navigation:
+ icon: i-lucide-parentheses
+---
+
+## Usage
+
+By using this composable you can access the global object provided by the plugin and call any method to work with sockets on your backend.
+
+::tip
+---
+to: https://laravel.com/docs/12.x/broadcasting
+target: _blank
+---
+For more details about the `Echo` instance and available functions, check official **Laravel Broadcasting** documentation.
+::
+
+## Code sample
+
+Here is an example of a client component subscribing to the public and private channels:
+
+```vue [components/Broadcast.client.vue]
+
+```
+
+::warning
+Keep in mind, for accessing Private and Presence channels you should have configured
+authentication on your backend side, preferably Laravel Sanctum.
+::
diff --git a/docs/content/3.composables/2.useEchoConfig.md b/docs/content/3.composables/2.useEchoConfig.md
new file mode 100644
index 0000000..117c4b4
--- /dev/null
+++ b/docs/content/3.composables/2.useEchoConfig.md
@@ -0,0 +1,22 @@
+---
+title: useEchoConfig
+description: Accessing the current Echo configuration from your Nuxt app.
+navigation:
+ icon: i-lucide-parentheses
+---
+
+## Usage
+
+This composable provides quick access to Nuxt configuration under the `echo` key.
+It is used as a part of the module implementation, so there is no particular need to use this in your application.
+
+## Code sample
+
+Here is an example of the call:
+
+```typescript [SomeService.ts]
+const echoConfig = useEchoConfig()
+
+console.log(echoConfig.host) // print the broadcasting host URL
+```
+
diff --git a/docs/content/3.composables/3.useEchoAppConfig.md b/docs/content/3.composables/3.useEchoAppConfig.md
new file mode 100644
index 0000000..0b03f31
--- /dev/null
+++ b/docs/content/3.composables/3.useEchoAppConfig.md
@@ -0,0 +1,22 @@
+---
+title: useEchoAppConfig
+description: Accessing the bundled Echo configuration from your Nuxt app.
+navigation:
+ icon: i-lucide-parentheses
+---
+
+## Usage
+
+This composable provides quick access to app configuration under the `echo` key instead of calling `useAppConfig().echo`.
+It is used as a part of the module implementation, so there is no particular need to use this in your application.
+
+## Code sample
+
+Here is an example of the call:
+
+```typescript [SomeService.ts]
+const echoAppConfig = useEchoAppConfig()
+
+// sets the Bearer token value to the storage
+echoConfig.tokenStorage.set('auth_token_value')
+```
diff --git a/docs/content/4.other/1.token-storage.md b/docs/content/4.other/1.token-storage.md
new file mode 100644
index 0000000..da288b8
--- /dev/null
+++ b/docs/content/4.other/1.token-storage.md
@@ -0,0 +1,92 @@
+---
+title: Token storage
+description: How to store your Bearer tokens for Private channels
+navigation:
+ icon: i-lucide-vault
+---
+
+## Usage
+
+Token storage is used for accessing a Bearer token from the Laravel API for Echo private channel authorization requests.
+
+It is enabled only when `echo.authentication.mode` set to `token`.
+
+::note
+By default, if there is no custom token storage defined, cookies will be used.
+::
+
+Each token storage implements the following interface:
+
+```typescript [tokenStorage.ts]
+/**
+ * Handlers to work with authentication tokens.
+ */
+export interface TokenStorage {
+ /**
+ * Function to load a token from the storage.
+ */
+ get: (app: NuxtApp) => Promise