use-style-tag

Inject a reactive <style> element.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/composable

Import the entry directly. Call lifecycle-bound utilities inside <script setup> so cleanup follows the component scope; consult the runtime contract for this entry's SSR and hydration behavior.

import { useStyleTag } from "@vizejs/composable/use-style-tag";

Try it

Add CSS only while a feature is on

Insert and remove a <style> element for page-wide rules that belong to one feature.

Open the interactive example

What to observe: Add highlight styles outlines the note. Remove highlight styles takes the outline away again.

immediate: false waits for load(). The css ref can be changed while the tag is loaded; the tag is removed with the component.

Compare the initial and interacted states

Copy the example

Save this complete SFC in your Vue project. Its public imports and source are the same ones executed in the preview.

<script setup lang="ts">
import { useStyleTag } from "@vizejs/composable/use-style-tag";

const { loaded, load, unload } = useStyleTag(".example-note { outline: 3px solid #f97316; }", {
  immediate: false,
});
</script>

<template>
  <div class="composable-example">
    <p>Add page-wide CSS only while a feature is on, and remove it when it is off.</p>
    <button type="button" @click="() => (loaded ? unload() : load())">
      {{ loaded ? "Remove highlight styles" : "Add highlight styles" }}
    </button>
    <p class="example-note">This note is outlined while the style tag is in the document.</p>
    <output aria-live="polite">{{ loaded ? "Style tag added." : "No style tag." }}</output>
  </div>
</template>

Runtime contract

API

useStyleTag

Inject a reactive <style> element. The element's text follows css. An existing <style> with the same id — for example one emitted in server-rendered HTML — is adopted instead of duplicated, which keeps hydration free of flashes. The element is removed when the owning reactive scope stops or unload is called. Server rendering: nothing is injected and loaded is false. Emit the server-side <style id> through the application's head manager using the same id to make the client adopt it.

function useStyleTag( css: MaybeRefOrGetter<string>, options: UseStyleTagOptions = {}, ): StyleTagControls

const { css } = useStyleTag(() => `:root { --accent: ${accent.value} }`, { id: "theme" });

Types

StyleTagElement

<style> subset used by useStyleTag.

StyleTagHost

Document capability used by useStyleTag.

UseStyleTagOptions

Options for useStyleTag.

StyleTagControls

Reactive state and actions returned by useStyleTag.