Game-agnostic modifier calculator for any RPG system
See how modifiers combine in real-time
Works with D&D, Pathfinder, Call of Cthulhu, FATE, and any RPG system
See exactly where each modifier comes from with detailed breakdowns
Support for all-stack, typed bonuses, or highest-only rules
Auto-updates when modifiers change with Vue 3 reactivity
CSS variables for complete color customization
Display as numeric totals or dice notation formulas
Track buffs and debuffs separately with visual highlighting
Mobile-friendly design that works on any device
Allow players to add and remove modifiers dynamically
Ready-to-use Vue 3 component for modifier calculations
npm install @modifier-calculator/vue<template>
<VModifierCalculator
:modifiers="modifiers"
show-breakdown
@update:total="handleUpdate"
/>
</template>
<script setup>
import { ref } from 'vue';
import { VModifierCalculator } from '@modifier-calculator/vue';
const modifiers = ref([
{ id: '1', label: 'Strength', value: 3, type: 'base' },
{ id: '2', label: 'Proficiency', value: 3, type: 'training' },
{ id: '3', label: 'Magic Weapon', value: 1, type: 'bonus' }
]);
</script>