RPG Dice Roller Vue Components
Vue.js component which allows rolling dice.
It is built upon this RPG dice roller, and is used in the documentation.
Get started
Install
npm install @dice-roller/vue
Components
Tailwind
If you're using Tailwind v3, you can use the pre-styled Tailwind component:
<script>
import { DiceRollerTailwind } from '@dice-roller/vue'
</script>
<template>
<DiceRollerTailwind />
</template>
Component reference
Properties
Property | Type | Default | Description |
---|
btn-label | String | "Roll" | Text content to place in the button |
id | String | | The id attribute of the component |
notation | String | | Notation string to set on the component |
Slots
Name | Description |
---|
button | Content to place in the button |
Events
Event | Arguments | Description |
---|
notation:change | notation - Current value of the notation input | Change event triggered by the user interaction. Emitted after the notation is changed |
roll | notation - Value of the rolled notation.value - The response of the roll | Emitted after a roll is made |
Bootstrap
If you're using Bootstrap v5, you can use the Bootstrap component:
<script>
import { DiceRollerBootstrap } from '@dice-roller/vue'
</script>
<template>
<DiceRollerBootstrap />
</template>
The Bootstrap component is wrapped in a card, and uses other bootstrap components. It can be easily styled.
Component reference
Properties
Property | Type | Default | Description |
---|
bg-variant | String | | Applies one of the Bootstrap theme colour variants to the background |
border-variant | String | | Applies one of the Bootstrap theme colour variants to the border |
btn-label | String | "Roll" | Text content to place in the button |
btn-variant | String | "primary" | Applies one of the Bootstrap theme colour variants to the button |
id | String | | The id attribute of the component |
notation | String | | Notation string to set on the component |
output-bg-variant | String | | Applies one of the Bootstrap theme colour variants to the background of the output container |
output-border-variant | String | | Applies one of the Bootstrap theme colour variants to the border of the output container |
output-text-variant | String | | Applies one of the Bootstrap theme colour variants to the text of the output container |
output-variant | String | | Applies one of the Bootstrap theme colour variants to the output container. This defines the background colour and contrasting text. See Bootstrap Color & background. |
text-variant | String | | Applies one of the Bootstrap theme colour variants to the text |
variant | String | | Applies one of the Bootstrap theme colour variants to the component. This defines the background colour and contrasting text. See Bootstrap Color & background. |
Slots
Name | Description |
---|
button | Content to place in the button |
Events
Event | Arguments | Description |
---|
notation:change | notation - Current value of the notation input | Change event triggered by the user interaction. Emitted after the notation is changed |
roll | notation - Value of the rolled notation.value - The response of the roll | Emitted after a roll is made |
Plain HTML
There's also a basic component, which provides HTML markup, without any styling. It applies a class to the elements, so you can style it with your own CSS.
<script>
import { DiceRoller } from '@dice-roller/vue'
</script>
<template>
<DiceRoller />
</template>
Component reference
Properties
Property | Type | Default | Description |
---|
btn-label | String | "Roll" | Text content to place in the button |
class-name | String | "dice-roller" | The class name of the component |
id | String | | The id attribute of the component |
notation | String | | Notation string to set on the component |
Slots
Name | Description |
---|
button | Content to place in the button |
Events
Event | Arguments | Description |
---|
notation:change | notation - Current value of the notation input | Change event triggered by the user interaction. Emitted after the notation is changed |
roll | notation - Value of the rolled notation.value - The response of the roll | Emitted after a roll is made |
Renderless component
If you want to write your own HTML markup, you can use the renderless component instead. This provides the logic and functionality, without any markup, so you can build your own.
<script>
import { DiceRollerRenderless } from '@dice-roller/vue';
</script>
<template>
<DiceRollerRenderless v-slot="{ currentNotation, error, output, roll, on, bind }">
<div>
<div v-if="error">{{ error }}</div>
<input type="text" v-on="on" v-bind="bind" />
<button type="button" @click="roll">Roll</button>
<div>
<strong>Notation:</strong> <em>{{ currentNotation }}</em>
</div>
<output v-if="output">{{ output }}</output>
</div>
</DiceRollerRenderless>
</template>
Component reference
Properties
Property | Type | Default | Description |
---|
notation | String | | Notation string to set on the component |
Slots
Name | Description |
---|
default | Content of the component |
Events
Event | Arguments | Description |
---|
notation:change | notation - Current value of the notation input | Change event triggered by the user interaction. Emitted after the notation is changed |
roll | notation - Value of the rolled notation.value - The response of the roll | Emitted after a roll is made |
Development
Customise configuration
See Vite Configuration Reference.
Project Setup
npm install @dice-roller/vue
Compile and Hot-Reload for Development
npm run dev
Compile and Minify for Production
npm run build
npm run lint