Using REM Indicator

This guide shows you how to use the useRemIndicator composable to convert REM values to pixels using a DOM element reference in your Vue 3 projects.

Overview

The useRemIndicator composable provides REM to pixel conversion by measuring an actual DOM element's width. It uses Vue's provide/inject pattern to make conversion functions available throughout your component tree. This is useful when you need to convert REM values based on the actual rendered size of a reference element.

Setup

Import useRemIndicator from your composables folder. This composable must be used in a component that has a reference element in the template.

import { useRemIndicator } from "@/composables/remIndicatorComposable";

Basic Usage

import { useRemIndicator } from "@/composables/remIndicatorComposable";

const {
  remToPixel,
  remIndicatorRef,
  convertRemToPixels,
  convertPixelsToRem,
} = useRemIndicator();

In your template, you need a reference element with 1rem width:

<template>
  <div>
    <!-- Reference element for REM calculation -->
    <div ref="remIndicatorRef" style="width: 1rem; height: 0; visibility: hidden;"></div>
    
    <!-- Your component content -->
  </div>
</template>

Available Methods and Properties

Property/Method	Description
remToPixel	Reactive ref containing current rem value in pixels
remIndicatorRef	Template ref for the REM indicator element
convertRemToPixels(rem)	Convert REM value to pixels
convertPixelsToRem(pixels)	Convert pixels to REM value

Provide/Inject Usage

The composable automatically provides conversion functions that can be injected in child components:

// In a child component
import { inject } from "vue";

const remToPixel = inject("remToPixel");
const convertRemToPixels = inject("convertRemToPixels");
const convertPixelsToRem = inject("convertPixelsToRem");

Use Cases

1. Element-Based REM Conversion

• Convert REM values based on actual rendered element size
• Handle custom font size settings
• Support user font size preferences
• Calculate dimensions relative to a specific element

2. Component Tree Conversion

• Provide conversion functions to all child components
• Share REM calculations across component hierarchy
• Avoid prop drilling for conversion utilities
• Centralize REM conversion logic

3. Dynamic Font Size Support

• Automatically update when font size changes
• Respond to window resize events
• Support responsive font sizing
• Handle browser zoom changes

4. Layout Calculations

• Calculate positions based on REM values
• Convert REM spacing to pixels for APIs
• Calculate dimensions for third-party libraries
• Position elements relative to REM-based layouts

5. Responsive Design

• Convert REM breakpoints to pixels
• Calculate responsive thresholds
• Handle viewport size changes
• Support multiple screen sizes

Best Practices

1. Reference element - Always include a 1rem width reference element in your template
2. Hidden element - Use visibility: hidden or height: 0 to hide the reference element
3. Provide/Inject - Use inject in child components to access conversion functions
4. Lifecycle - The composable automatically sets up and cleans up event listeners
5. Reactivity - remToPixel is reactive and updates when the element size changes
6. Window resize - The composable automatically recalculates on window resize

Comparison with useRemToPixel

• useRemIndicator: Uses a DOM element reference, provides via inject, simpler setup
• useRemToPixel: Uses computed root font size, more advanced monitoring, better for complex scenarios

Choose useRemIndicator when you need element-based conversion and want to share functions via provide/inject.

---

📖 Related Documentation:

• useRemToPixel Guide → - Alternative REM conversion composable
• Vue Provide/Inject