File tree Expand file tree Collapse file tree
apps/docs/src/pages/composables/plugins Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -89,6 +89,48 @@ app.use(createRtlPlugin({ target: '#app' }))
8989app .use (createRtlPlugin ({ target: null }))
9090```
9191
92+ ### Custom Adapters
93+
94+ Implement ` RtlAdapter ` to control how RTL direction is applied to the DOM:
95+
96+ ``` ts
97+ import type { RtlAdapter } from ' @vuetify/v0'
98+
99+ class CustomRtlAdapter implements RtlAdapter {
100+ setup (app , context , target ) {
101+ // context.isRtl — reactive ref, write to it to change direction
102+ // context.toggle — flips isRtl
103+ watchEffect (() => {
104+ const el = typeof target === ' string' ? document .querySelector (target ) : target
105+ if (el ) el .setAttribute (' dir' , context .isRtl .value ? ' rtl' : ' ltr' )
106+ })
107+ }
108+ }
109+
110+ app .use (createRtlPlugin ({ adapter: new CustomRtlAdapter () }))
111+ ```
112+
113+ ``` ts
114+ interface RtlAdapter {
115+ setup: (app : App , context : { isRtl: Ref <boolean >; toggle: () => void }, target ? : string | HTMLElement | null ) => void
116+ }
117+ ```
118+
119+ ## Standalone Usage
120+
121+ Use ` createRtl ` to create a raw RTL context without the plugin system — useful for testing or embedding in other composables:
122+
123+ ``` ts
124+ import { createRtl } from ' @vuetify/v0'
125+
126+ const rtl = createRtl ({ default: true }) // starts in RTL
127+ rtl .isRtl .value // true
128+ rtl .toggle ()
129+ rtl .isRtl .value // false
130+ ```
131+
132+ ` createRtl ` accepts ` default?: boolean ` (initial direction) and returns ` { isRtl: ShallowRef<boolean>, toggle: () => void } ` . No ` app ` is required.
133+
92134## Styling
93135
94136The ` dir ` attribute set by the adapter enables three approaches to direction-aware styling with utility classes:
You can’t perform that action at this time.
0 commit comments