A stat generation input field based on DiceRoller
Roll for a character stat right here in your browser
Values come exclusively from dice rolls, not manual entry
Min/max ranges with automatic validation and error messages
CSS variables for complete color customization
Optional display of individual die results and modifiers
Support for d4, d6, d8, d10, d12, d20, and d100
Full event system compatible with Vuetify patterns
Support for +/- modifiers (e.g., "2d6+3")
Compact and inline variants for any layout
Built specifically for D&D, Pathfinder, and tabletop games
Ready-to-use Vue 3 component for character stat generation
npm install @stat-field/vue<template>
<VStatField
v-model="strength"
die="3d6"
label="Strength"
:min="3"
:max="18"
show-details
/>
</template>
<script setup>
import { ref } from 'vue';
import { VStatField } from '@stat-field/vue';
const strength = ref(null);
</script>