0
# Composables
1

2
Vue composables providing common functionality for PrimeVue components including ID generation, dynamic styling, and attribute selection utilities.
3

4
## Capabilities
5

6
### useStyle
7

8
Dynamic CSS injection composable for loading and managing styles at runtime.
9

10
```typescript { .api }
11
interface UseStyleOptions {
12
  /** Target document for style injection */
13
  document?: Document;
14
  /** Load styles immediately */
15
  immediate?: boolean;
16
  /** Manual loading control */
17
  manual?: boolean;
18
  /** Style element name */
19
  name?: string;
20
  /** Style element ID */
21
  id?: string;
22
  /** Media query for style element */
23
  media?: string;
24
  /** CSP nonce value */
25
  nonce?: string;
26
  /** Insert at beginning of head */
27
  first?: boolean;
28
  /** Callback when style is mounted */
29
  onMounted?: (name: string) => void;
30
  /** Callback when style is updated */
31
  onUpdated?: (name: string) => void;
32
  /** Callback when style is loaded */
33
  onLoad?: (event: Event, options: { name: string }) => void;
34
  /** Additional properties for style element */
35
  props?: Record<string, any>;
36
}
37

38
/**
39
 * Create and manage dynamic CSS styles
40
 * @param css - CSS content to inject
41
 * @param options - Configuration options
42
 * @returns Style management object
43
 */
44
declare function useStyle(css: string, options?: UseStyleOptions): {
45
  /** Style element ID */
46
  id: string | undefined;
47
  /** Style element name */
48
  name: string;
49
  /** Style element reference */
50
  el: Ref<HTMLStyleElement | null>;
51
  /** CSS content reference */
52
  css: Ref<string>;
53
  /** Load styles with optional CSS and properties */
54
  load: (css?: string, props?: any) => void;
55
  /** Remove styles from DOM */
56
  unload: () => void;
57
  /** Reactive loading state */
58
  isLoaded: Readonly<Ref<boolean>>;
59
};
60
```
61

62
**Usage Examples:**
63

64
```typescript
65
import { useStyle } from '@primevue/core/usestyle';
66

67
// Basic usage
68
const { load, unload, isLoaded } = useStyle('.my-class { color: red; }');
69

70
// With options
71
const styleManager = useStyle('', {
72
  name: 'custom-styles',
73
  nonce: 'abc123',
74
  onMounted: (name) => console.log(`Styles ${name} mounted`),
75
  onUpdated: (name) => console.log(`Styles ${name} updated`)
76
});
77

78
// Dynamic loading
79
styleManager.load('.dynamic { background: blue; }');
80

81
// Conditional loading
82
if (condition) {
83
  styleManager.load('.conditional { display: none; }');
84
} else {
85
  styleManager.unload();
86
}
87

88
// Check loading state
89
watch(styleManager.isLoaded, (loaded) => {
90
  console.log('Styles loaded:', loaded);
91
});
92
```
93

94
### useId
95

96
ID generation composable for creating unique component identifiers.
97

98
```typescript { .api }
99
/**
100
 * Generate unique component ID
101
 * @param initialValue - Optional initial ID value
102
 * @returns Unique ID string
103
 */
104
declare function useId(initialValue?: string): string;
105
```
106

107
**Usage Examples:**
108

109
```typescript
110
import { useId } from '@primevue/core/useid';
111

112
// Generate unique ID
113
const componentId = useId(); // Returns: 'pv_id_1_2_3'
114

115
// With initial value
116
const customId = useId('my-component'); // Returns: 'my-component'
117

118
// In Vue component
119
export default {
120
  setup() {
121
    const inputId = useId();
122
    const labelId = useId();
123
    
124
    return {
125
      inputId,     // 'pv_id_1_2_3'
126
      labelId      // 'pv_id_4_5_6'
127
    };
128
  }
129
};
130
```
131

132
### useAttrSelector
133

134
Attribute selector generation for component styling and targeting.
135

136
```typescript { .api }
137
/**
138
 * Generate unique attribute selector for component styling
139
 * @returns Unique attribute selector string
140
 */
141
declare function useAttrSelector(): string;
142
```
143

144
**Usage Examples:**
145

146
```typescript
147
import { useAttrSelector } from '@primevue/core/useattrselector';
148

149
// Generate attribute selector
150
const attrSelector = useAttrSelector(); // Returns: 'pc_1_2_3'
151

152
// Use in component
153
export default {
154
  setup() {
155
    const selector = useAttrSelector();
156
    
157
    return {
158
      selector, // Use as data attribute
159
      getScopedClass: (cls) => `[${selector}] .${cls}`
160
    };
161
  },
162
  
163
  template: `
164
    <div :[selector]="">
165
      <span class="content">Scoped content</span>
166
    </div>
167
  `
168
};
169
```
170

171
## Service Composables
172

173
### PrimeVueService
174

175
Event bus service for component communication (re-exported from @primeuix/utils/eventbus).
176

177
```typescript { .api }
178
declare const PrimeVueService: {
179
  /**
180
   * Register event listener
181
   * @param event - Event name
182
   * @param callback - Event callback function
183
   */
184
  on(event: string, callback: Function): void;
185
  
186
  /**
187
   * Remove event listener
188
   * @param event - Event name
189
   * @param callback - Event callback function
190
   */
191
  off(event: string, callback: Function): void;
192
  
193
  /**
194
   * Emit event with data
195
   * @param event - Event name
196
   * @param data - Event data
197
   */
198
  emit(event: string, data?: any): void;
199
  
200
  /**
201
   * Register one-time event listener
202
   * @param event - Event name
203
   * @param callback - Event callback function
204
   */
205
  once(event: string, callback: Function): void;
206
  
207
  /**
208
   * Remove all listeners for event
209
   * @param event - Event name
210
   */
211
  removeAllListeners(event?: string): void;
212
};
213
```
214

215
**Usage Examples:**
216

217
```typescript
218
import PrimeVueService from '@primevue/core/service';
219

220
// Listen for configuration changes
221
PrimeVueService.on('config:change', ({ newValue, oldValue }) => {
222
  console.log('Config changed:', newValue);
223
});
224

225
// Listen for theme changes
226
PrimeVueService.on('config:theme:change', ({ newValue, oldValue }) => {
227
  console.log('Theme changed from', oldValue, 'to', newValue);
228
});
229

230
// Emit custom events
231
PrimeVueService.emit('component:mounted', { component: 'MyComponent' });
232

233
// One-time listener
234
PrimeVueService.once('app:ready', () => {
235
  console.log('Application is ready');
236
});
237

238
// Remove listener
239
const handleConfigChange = (config) => { /* ... */ };
240
PrimeVueService.on('config:change', handleConfigChange);
241
PrimeVueService.off('config:change', handleConfigChange);
242
```
243

244
## Advanced Usage Patterns
245

246
### Conditional Styling
247

248
```typescript
249
import { useStyle } from '@primevue/core/usestyle';
250
import { computed, watch } from 'vue';
251

252
export default {
253
  setup(props) {
254
    const { load, unload } = useStyle('', { manual: true });
255
    
256
    const styles = computed(() => {
257
      return props.variant === 'primary' 
258
        ? '.component { background: blue; }'
259
        : '.component { background: gray; }';
260
    });
261
    
262
    watch(styles, (newStyles) => {
263
      load(newStyles);
264
    }, { immediate: true });
265
    
266
    return { styles };
267
  }
268
};
269
```
270

271
### Component Scoping
272

273
```typescript
274
import { useAttrSelector, useStyle } from '@primevue/core';
275

276
export default {
277
  setup() {
278
    const selector = useAttrSelector();
279
    
280
    const { load } = useStyle(`
281
      [${selector}] .component {
282
        /* Scoped styles */
283
      }
284
    `);
285
    
286
    return { selector };
287
  }
288
};
289
```
290

291
## Import Patterns
292

293
```typescript
294
// Individual composable imports (recommended)
295
import { useStyle } from '@primevue/core/usestyle';
296
import { useId } from '@primevue/core/useid';
297
import { useAttrSelector } from '@primevue/core/useattrselector';
298
import PrimeVueService from '@primevue/core/service';
299

300
// Named imports from main package
301
import { useStyle, useId } from '@primevue/core';
302

303
// All composables
304
import { useStyle, useId, useAttrSelector } from '@primevue/core';
305
```