docs: normalize plugin adapter sections with install instructions

Author: johnleider

apps/docs/src/pages/composables/plugins/use-features.md

@@ -94,13 +94,29 @@ Adapters let you swap the underlying feature flag provider without changing your
 | `FlagsmithFeatureAdapter` | `@vuetify/v0/features/adapters/flagsmith` | [Flagsmith](https://flagsmith.com/) integration |
 | `LaunchDarklyFeatureAdapter` | `@vuetify/v0/features/adapters/launchdarkly` | [LaunchDarkly](https://launchdarkly.com/) integration |
 
-### Built-in Adapters
+### Flagsmith
 
-Each adapter is imported from its own nested subpath under `@vuetify/v0/features/adapters/`.
+[Flagsmith](https://flagsmith.com/) is an open-source feature flag platform. Requires the `@flagsmith/flagsmith` package.
 
-#### Flagsmith
+::: code-group no-filename
 
-Requires `@flagsmith/flagsmith` package.
+```bash pnpm
+pnpm add @flagsmith/flagsmith
+```
+
+```bash npm
+npm install @flagsmith/flagsmith
+```
+
+```bash yarn
+yarn add @flagsmith/flagsmith
+```
+
+```bash bun
+bun add @flagsmith/flagsmith
+```
+
+:::
 
 ```ts
 import flagsmith from '@flagsmith/flagsmith'
@@ -114,9 +130,29 @@ app.use(createFeaturesPlugin({
 }))
 ```
 
-#### LaunchDarkly
+### LaunchDarkly
+
+[LaunchDarkly](https://launchdarkly.com/) is a feature management platform. Requires the `launchdarkly-js-client-sdk` package.
+
+::: code-group no-filename
+
+```bash pnpm
+pnpm add launchdarkly-js-client-sdk
+```
+
+```bash npm
+npm install launchdarkly-js-client-sdk
+```
 
-Requires `launchdarkly-js-client-sdk` package.
+```bash yarn
+yarn add launchdarkly-js-client-sdk
+```
+
+```bash bun
+bun add launchdarkly-js-client-sdk
+```
+
+:::
 
 ```ts
 import * as LDClient from 'launchdarkly-js-client-sdk'
@@ -131,9 +167,29 @@ app.use(createFeaturesPlugin({
 }))
 ```
 
-#### PostHog
+### PostHog
+
+[PostHog](https://posthog.com/) is an open-source product analytics and feature flag platform. Requires the `posthog-js` package.
+
+::: code-group no-filename
+
+```bash pnpm
+pnpm add posthog-js
+```
 
-Requires `posthog-js` package.
+```bash npm
+npm install posthog-js
+```
+
+```bash yarn
+yarn add posthog-js
+```
+
+```bash bun
+bun add posthog-js
+```
+
+:::
 
 ```ts
 import posthog from 'posthog-js'

apps/docs/src/pages/composables/plugins/use-logger.md

@@ -77,6 +77,82 @@ Adapters let you swap the underlying logging implementation without changing you
 
 The default `Vuetify0LoggerAdapter` maps each level to the correct native console method — `debug` → `console.debug`, `info` → `console.info`, `warn` → `console.warn`, `error`/`fatal` → `console.error`. This ensures browser DevTools can correctly filter by level.
 
+### Pino
+
+[Pino](https://getpino.io/) is a high-performance JSON logger. Requires the `pino` package.
+
+::: code-group no-filename
+
+```bash pnpm
+pnpm add pino
+```
+
+```bash npm
+npm install pino
+```
+
+```bash yarn
+yarn add pino
+```
+
+```bash bun
+bun add pino
+```
+
+:::
+
+```ts src/plugins/zero.ts
+import pino from 'pino'
+import { PinoLoggerAdapter } from '@vuetify/v0/logger/adapters/pino'
+import { createLoggerPlugin } from '@vuetify/v0'
+
+const logger = pino({ level: 'debug' })
+
+app.use(
+  createLoggerPlugin({
+    adapter: new PinoLoggerAdapter(logger),
+  })
+)
+```
+
+### Consola
+
+[Consola](https://github.com/unjs/consola) is an elegant console logger by UnJS. Requires the `consola` package.
+
+::: code-group no-filename
+
+```bash pnpm
+pnpm add consola
+```
+
+```bash npm
+npm install consola
+```
+
+```bash yarn
+yarn add consola
+```
+
+```bash bun
+bun add consola
+```
+
+:::
+
+```ts src/plugins/zero.ts
+import { createConsola } from 'consola'
+import { ConsolaLoggerAdapter } from '@vuetify/v0/logger/adapters/consola'
+import { createLoggerPlugin } from '@vuetify/v0'
+
+const consola = createConsola({ level: 4 })
+
+app.use(
+  createLoggerPlugin({
+    adapter: new ConsolaLoggerAdapter(consola),
+  })
+)
+```
+
 ### Custom Adapters
 
 Implement `LoggerAdapter` to route logs to any destination:

apps/docs/src/pages/composables/plugins/use-notifications.md

@@ -192,78 +192,29 @@ Adapters let you swap the underlying notification service without changing your
 | `createKnockAdapter` | `@vuetify/v0/notifications` | [Knock](https://knock.app) integration |
 | `createNovuAdapter` | `@vuetify/v0/notifications` | [Novu](https://novu.co) integration |
 
-### Custom Adapters
-
-Implement `NotificationsAdapterInterface` to connect any backend:
-
-```ts
-import type { NotificationsAdapterInterface, NotificationsAdapterContext } from '@vuetify/v0'
-
-class MyBackendAdapter implements NotificationsAdapterInterface {
-  setup (context: NotificationsAdapterContext) {
-    // Wire inbound: push notifications into the registry
-    myBackend.onMessage(msg => {
-      context.send({ id: msg.id, title: msg.title, body: msg.body })
-    })
+### Knock
 
-    // Wire outbound: sync read/archive actions back to the backend
-    context.on('notification:read', (data: any) => {
-      myBackend.markRead(data.id)
-    })
-  }
+[Knock](https://knock.app) is a notification infrastructure platform with feeds, preferences, and multi-channel delivery. Install their [JavaScript SDK](https://docs.knock.app/sdks/javascript/overview) to get started. Supports both inbound (feed → notifications) and outbound (read/archive → Knock API).
 
-  dispose () {
-    myBackend.disconnect()
-  }
-}
+::: code-group no-filename
 
-app.use(createNotificationsPlugin({ adapter: new MyBackendAdapter() }))
+```bash pnpm
+pnpm add @knocklabs/client
 ```
 
-**Adapter context methods:**
-
-| Method | Purpose |
-| - | - |
-| `send(input)` | Register and enqueue for toast display (real-time inbound) |
-| `register(input)` | Register in history only — no toast (initial/historical load) |
-| `on(event, handler)` | Subscribe to outbound lifecycle events |
-| `off(event, handler)` | Unsubscribe from a lifecycle event |
-
-### Custom Ticket Fields
-
-Extend `NotificationInput` to add domain-specific fields. Pass the type parameter through the adapter and plugin:
-
-```ts
-import type { NotificationInput, NotificationsAdapterInterface, NotificationsAdapterContext } from '@vuetify/v0'
-
-interface AppNotification extends NotificationInput {
-  priority: 'low' | 'medium' | 'high'
-  imageUrl?: string
-}
-
-class MyBackendAdapter implements NotificationsAdapterInterface<AppNotification> {
-  setup (context: NotificationsAdapterContext<AppNotification>) {
-    myBackend.onMessage(msg => {
-      context.send({
-        id: msg.id,
-        subject: msg.title,
-        priority: msg.priority,    // custom field
-        imageUrl: msg.imageUrl,    // custom field
-      })
-    })
-  }
-}
-
-app.use(createNotificationsPlugin<AppNotification>({ adapter: new MyBackendAdapter() }))
+```bash npm
+npm install @knocklabs/client
 ```
 
-Custom fields are preserved on the ticket and accessible anywhere you inject the notifications context.
-
-> [!ASKAI] How do I write a custom adapter for my backend?
+```bash yarn
+yarn add @knocklabs/client
+```
 
-### Knock
+```bash bun
+bun add @knocklabs/client
+```
 
-[Knock](https://knock.app) is a notification infrastructure platform with feeds, preferences, and multi-channel delivery. Install their [JavaScript SDK](https://docs.knock.app/sdks/javascript/overview) to get started. Supports both inbound (feed → notifications) and outbound (read/archive → Knock API).
+:::
 
 ::: code-group
 
@@ -289,7 +240,7 @@ app.mount('#app')
 import Knock from '@knocklabs/client'
 
 export const knock = new Knock(import.meta.env.VITE_KNOCK_PUBLIC_KEY)
-knock.authenticate(userId)
+knock.authenticate(import.meta.env.VITE_KNOCK_USER_ID)
 
 export const feed = knock.feeds.initialize(
   import.meta.env.VITE_KNOCK_FEED_CHANNEL_ID
@@ -304,6 +255,26 @@ export const feed = knock.feeds.initialize(
 
 The adapter maps Novu severity strings to `NotificationSeverity` by default: `critical`/`high` → `error`, `medium` → `warning`, `low` → `info`. Pass a custom `severity` function to override.
 
+::: code-group no-filename
+
+```bash pnpm
+pnpm add @novu/js
+```
+
+```bash npm
+npm install @novu/js
+```
+
+```bash yarn
+yarn add @novu/js
+```
+
+```bash bun
+bun add @novu/js
+```
+
+:::
+
 ::: code-group
 
 ```ts src/main.ts
@@ -328,11 +299,80 @@ app.mount('#app')
 import { Novu } from '@novu/js'
 
 export const novu = new Novu({
-  subscriberId: userId,
+  subscriberId: import.meta.env.VITE_NOVU_SUBSCRIBER_ID,
   applicationIdentifier: import.meta.env.VITE_NOVU_APP_ID,
 })
 ```
 
 :::
 
+### Custom Adapters
+
+Implement `NotificationsAdapterInterface` to connect any backend:
+
+```ts
+import type { NotificationsAdapterInterface, NotificationsAdapterContext } from '@vuetify/v0'
+
+class MyBackendAdapter implements NotificationsAdapterInterface {
+  setup (context: NotificationsAdapterContext) {
+    // Wire inbound: push notifications into the registry
+    myBackend.onMessage(msg => {
+      context.send({ id: msg.id, title: msg.title, body: msg.body })
+    })
+
+    // Wire outbound: sync read/archive actions back to the backend
+    context.on('notification:read', (data: any) => {
+      myBackend.markRead(data.id)
+    })
+  }
+
+  dispose () {
+    myBackend.disconnect()
+  }
+}
+
+app.use(createNotificationsPlugin({ adapter: new MyBackendAdapter() }))
+```
+
+**Adapter context methods:**
+
+| Method | Purpose |
+| - | - |
+| `send(input)` | Register and enqueue for toast display (real-time inbound) |
+| `register(input)` | Register in history only — no toast (initial/historical load) |
+| `on(event, handler)` | Subscribe to outbound lifecycle events |
+| `off(event, handler)` | Unsubscribe from a lifecycle event |
+
+### Custom Ticket Fields
+
+Extend `NotificationInput` to add domain-specific fields. Pass the type parameter through the adapter and plugin:
+
+```ts
+import type { NotificationInput, NotificationsAdapterInterface, NotificationsAdapterContext } from '@vuetify/v0'
+
+interface AppNotification extends NotificationInput {
+  priority: 'low' | 'medium' | 'high'
+  imageUrl?: string
+}
+
+class MyBackendAdapter implements NotificationsAdapterInterface<AppNotification> {
+  setup (context: NotificationsAdapterContext<AppNotification>) {
+    myBackend.onMessage(msg => {
+      context.send({
+        id: msg.id,
+        subject: msg.title,
+        priority: msg.priority,    // custom field
+        imageUrl: msg.imageUrl,    // custom field
+      })
+    })
+  }
+}
+
+app.use(createNotificationsPlugin<AppNotification>({ adapter: new MyBackendAdapter() }))
+```
+
+Custom fields are preserved on the ticket and accessible anywhere you inject the notifications context.
+
+> [!ASKAI] How do I write a custom adapter for my backend?
+
 <DocsApi />