Source from repo

VueUse Functions

Apply VueUse composables in Vue 3/Nuxt projects to replace custom implementations with battle-tested utilities.

antfuGitHub antfuSource repo Original GitHub link Publisher page

Files

268

Skill

n/a

Size

631.0 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

references/useStyleTag.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown132 linesFree

references/useStyleTag.md

1---
2category: Browser
3---
4 
5# useStyleTag
6 
7Inject reactive `style` element in head.
8 
9## Usage
10 
11### Basic usage
12 
13Provide a CSS string, then `useStyleTag` will automatically generate an id and inject it in `<head>`.
14 
15```ts
16import { useStyleTag } from '@vueuse/core'
17 
18const {
19  id,
20  css,
21  load,
22  unload,
23  isLoaded,
24} = useStyleTag('.foo { margin-top: 32px; }')
25 
26// Later you can modify styles
27css.value = '.foo { margin-top: 64px; }'
28```
29 
30This code will be injected to `<head>`:
31 
32```html
33<style id="vueuse_styletag_1">
34  .foo {
35    margin-top: 64px;
36  }
37</style>
38```
39 
40### Custom ID
41 
42If you need to define your own id, you can pass `id` as first argument.
43 
44```ts
45import { useStyleTag } from '@vueuse/core'
46// ---cut---
47useStyleTag('.foo { margin-top: 32px; }', { id: 'custom-id' })
48```
49 
50```html
51<!-- injected to <head> -->
52<style id="custom-id">
53  .foo {
54    margin-top: 32px;
55  }
56</style>
57```
58 
59### Media query
60 
61You can pass media attributes as last argument within object.
62 
63```ts
64import { useStyleTag } from '@vueuse/core'
65// ---cut---
66useStyleTag('.foo { margin-top: 32px; }', { media: 'print' })
67```
68 
69```html
70<!-- injected to <head> -->
71<style id="vueuse_styletag_1" media="print">
72  .foo {
73    margin-top: 32px;
74  }
75</style>
76```
77 
78## Type Declarations
79 
80```ts
81export interface UseStyleTagOptions extends ConfigurableDocument {
82  /**
83   * Media query for styles to apply
84   */
85  media?: string
86  /**
87   * Load the style immediately
88   *
89   * @default true
90   */
91  immediate?: boolean
92  /**
93   * Manual controls the timing of loading and unloading
94   *
95   * @default false
96   */
97  manual?: boolean
98  /**
99   * DOM id of the style tag
100   *
101   * @default auto-incremented
102   */
103  id?: string
104  /**
105   * Nonce value for CSP (Content Security Policy)
106   *
107   * @default undefined
108   */
109  nonce?: string
110}
111export interface UseStyleTagReturn {
112  id: string
113  css: ShallowRef<string>
114  load: () => void
115  unload: () => void
116  isLoaded: Readonly<ShallowRef<boolean>>
117}
118/**
119 * Inject <style> element in head.
120 *
121 * Overload: Omitted id
122 *
123 * @see https://vueuse.org/useStyleTag
124 * @param css
125 * @param options
126 */
127export declare function useStyleTag(
128  css: MaybeRef<string>,
129  options?: UseStyleTagOptions,
130): UseStyleTagReturn
131```
132

Preparing the source view

VueUse Functions

references/useStyleTag.md