Skip to content
On this page

useStyleTag

Category
Export Size
1.09 kB
Last Changed
4 weeks ago

Inject reactive style element in head.

Demo

Edit CSS:

ID: vueuse_styletag_1

Loaded: false

Usage

Basic usage

Provide a CSS string, then useStyleTagwill automatically generate an id and inject it in <head>.

js
import { useStyleTag } from '@vueuse/core'

const {
  id,
  css,
  load,
  unload,
  isLoaded,
} = useStyleTag('.foo { margin-top: 32px; }')

// Later you can modify styles
css.value = '.foo { margin-top: 64px; }'
import { useStyleTag } from '@vueuse/core'

const {
  id,
  css,
  load,
  unload,
  isLoaded,
} = useStyleTag('.foo { margin-top: 32px; }')

// Later you can modify styles
css.value = '.foo { margin-top: 64px; }'

This code will be injected to <head>:

html
<style type="text/css" id="vueuse_styletag_1">
.foo { margin-top: 64px; }
</style>
<style type="text/css" id="vueuse_styletag_1">
.foo { margin-top: 64px; }
</style>

Custom ID

If you need to define your own id, you can pass id as first argument.

js
import { useStyleTag } from '@vueuse/core'

useStyleTag('.foo { margin-top: 32px; }', { id: 'custom-id' })
import { useStyleTag } from '@vueuse/core'

useStyleTag('.foo { margin-top: 32px; }', { id: 'custom-id' })
html
<!-- injected to <head> -->
<style type="text/css" id="custom-id">
.foo { margin-top: 32px; }
</style>
<!-- injected to <head> -->
<style type="text/css" id="custom-id">
.foo { margin-top: 32px; }
</style>

Media query

You can pass media attributes as last argument within object.

js
useStyleTag('.foo { margin-top: 32px; }', { media: 'print' })
useStyleTag('.foo { margin-top: 32px; }', { media: 'print' })
html
<!-- injected to <head> -->
<style type="text/css" id="vueuse_styletag_1" media="print">
.foo { margin-top: 32px; }
</style>
<!-- injected to <head> -->
<style type="text/css" id="vueuse_styletag_1" media="print">
.foo { margin-top: 32px; }
</style>

Type Declarations

typescript
export interface UseStyleTagOptions extends ConfigurableDocument {
  /**
   * Media query for styles to apply
   */
  media?: string
  /**
   * Load the style immediately
   *
   * @default true
   */
  immediate?: boolean
  /**
   * Manual controls the timing of loading and unloading
   *
   * @default false
   */
  manual?: boolean
  /**
   * DOM id of the style tag
   *
   * @default auto-incremented
   */
  id?: string
}
export interface UseStyleTagReturn {
  id: string
  css: Ref<string>
  load: () => void
  unload: () => void
  isLoaded: Readonly<Ref<boolean>>
}
/**
 * Inject <style> element in head.
 *
 * Overload: Omitted id
 *
 * @see https://vueuse.org/useStyleTag
 * @param css
 * @param options
 */
export declare function useStyleTag(
  css: MaybeRef<string>,
  options?: UseStyleTagOptions
): UseStyleTagReturn
export interface UseStyleTagOptions extends ConfigurableDocument {
  /**
   * Media query for styles to apply
   */
  media?: string
  /**
   * Load the style immediately
   *
   * @default true
   */
  immediate?: boolean
  /**
   * Manual controls the timing of loading and unloading
   *
   * @default false
   */
  manual?: boolean
  /**
   * DOM id of the style tag
   *
   * @default auto-incremented
   */
  id?: string
}
export interface UseStyleTagReturn {
  id: string
  css: Ref<string>
  load: () => void
  unload: () => void
  isLoaded: Readonly<Ref<boolean>>
}
/**
 * Inject <style> element in head.
 *
 * Overload: Omitted id
 *
 * @see https://vueuse.org/useStyleTag
 * @param css
 * @param options
 */
export declare function useStyleTag(
  css: MaybeRef<string>,
  options?: UseStyleTagOptions
): UseStyleTagReturn

Source

SourceDemoDocs

Contributors

sibbng
James Wragg
Anthony Fu
Jelf

Changelog

v9.7.0 on 12/16/2022
cfcc2 - fix: allow multiline CSS (#2476)
v9.6.0 on 11/22/2022
94413 - fix: allow use of existing node (#2442)
v8.9.3 on 7/14/2022
71df6 - fix: fix hydration mismatch issue (#1918)
v7.5.5 on 1/25/2022
0a696 - feat: new function (#1154)

Released under the MIT License.