
Security News
rv Is a New Rust-Powered Ruby Version Manager Inspired by Python's uv
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
@dice-roller/vue
Advanced tools
Vue.js component which allows rolling dice.
It is built upon this RPG dice roller, and is used in the documentation.
npm install @dice-roller/vue
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>
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 |
Name | Description |
---|---|
button | Content to place in the button |
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 |
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.
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. |
Name | Description |
---|---|
button | Content to place in the button |
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 |
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>
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 |
Name | Description |
---|---|
button | Content to place in the button |
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 |
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>
Property | Type | Default | Description |
---|---|---|---|
notation | String | Notation string to set on the component |
Name | Description |
---|---|
default | Content of the component |
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 |
See Vite Configuration Reference.
npm install @dice-roller/vue
npm run dev
npm run build
npm run lint
FAQs
Vue.js component which allows rolling dice
We found that @dice-roller/vue demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.