Vue Component Library

Appearance

Using REM to Pixel Composable ​

This guide shows you how to use the useRemToPixel composable to convert REM values to pixels dynamically in your Vue 3 projects.

Overview ​

The useRemToPixel composable provides reactive conversion between REM and pixel values. It automatically monitors the root font size and updates conversions when the font size changes, making it perfect for responsive designs.

Setup ​

Import useRemToPixel from your composables folder. This composable must be used within a Vue component's setup context.

Basic Usage ​

js
import { useRemToPixel } from "@/composables/useRemToPixel";

const {
  rootFontSize,
  convertRemToPixels,
  convertMultipleRemToPixels,
  convertOffsetToPixels,
} = useRemToPixel();

// Convert 2rem to pixels
const pixels = convertRemToPixels(2); // e.g., 32px if 1rem = 16px

// Convert multiple REM values
const pixelArray = convertMultipleRemToPixels([1, 2, 3]); // [16, 32, 48]px

// Convert REM offset to pixel offset
const offset = convertOffsetToPixels([2, 1.5]); // [32, 24]px

Available Methods ​

MethodDescription
convertRemToPixels(remValue)Convert a single REM value to pixels
convertMultipleRemToPixels(array)Convert array of REM values to pixels
convertOffsetToPixels([x, y])Convert REM offset array to pixel offset
rootFontSizeReactive ref containing current root font size
updateRootFontSize()Manually update root font size from DOM
setupMonitoring()Manually set up font size monitoring
cleanupMonitoring()Clean up font size monitoring

Use Cases ​

1. Dynamic Positioning

  • Calculate element positions based on REM values
  • Convert REM offsets for tooltips and popovers
  • Position elements relative to REM-based layouts

2. Responsive Calculations

  • Convert REM values for canvas or SVG rendering
  • Calculate dimensions for third-party libraries that need pixels
  • Convert REM spacing for API calls that require pixel values

3. Animation and Transitions

  • Convert REM values for animation keyframes
  • Calculate transform values in pixels
  • Set dynamic widths/heights based on REM calculations

4. Integration with External Libraries

  • Convert REM values for libraries that require pixel inputs
  • Calculate dimensions for charts and graphs
  • Set sizes for canvas elements

5. Media Queries and Breakpoints

  • Convert REM breakpoints to pixels for JavaScript
  • Calculate responsive thresholds
  • Determine viewport sizes in pixels from REM values

Best Practices ​

  1. Use in component context - This composable must be used within Vue component setup
  2. Monitor font size changes - The composable automatically updates when root font size changes
  3. Use for dynamic calculations - Best for values that need to update when font size changes
  4. Handle edge cases - Always check if values are valid numbers before conversion
  5. Clean up on unmount - The composable automatically cleans up observers on component unmount

📖 Related Documentation: