Socket
Book a DemoInstallSign in
Socket

@dice-roller/vue

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@dice-roller/vue

Vue.js component which allows rolling dice

1.2.1
latest
Source
npmnpm
Version published
Maintainers
1
Created
Source

RPG Dice Roller

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
PropertyTypeDefaultDescription
btn-labelString"Roll"Text content to place in the button
idStringThe id attribute of the component
notationStringNotation string to set on the component
Slots
NameDescription
buttonContent to place in the button
Events
EventArgumentsDescription
notation:changenotation - Current value of the notation inputChange event triggered by the user interaction. Emitted after the notation is changed
rollnotation - 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
PropertyTypeDefaultDescription
bg-variantStringApplies one of the Bootstrap theme colour variants to the background
border-variantStringApplies one of the Bootstrap theme colour variants to the border
btn-labelString"Roll"Text content to place in the button
btn-variantString"primary"Applies one of the Bootstrap theme colour variants to the button
idStringThe id attribute of the component
notationStringNotation string to set on the component
output-bg-variantStringApplies one of the Bootstrap theme colour variants to the background of the output container
output-border-variantStringApplies one of the Bootstrap theme colour variants to the border of the output container
output-text-variantStringApplies one of the Bootstrap theme colour variants to the text of the output container
output-variantStringApplies one of the Bootstrap theme colour variants to the output container. This defines the background colour and contrasting text. See Bootstrap Color & background.
text-variantStringApplies one of the Bootstrap theme colour variants to the text
variantStringApplies one of the Bootstrap theme colour variants to the component. This defines the background colour and contrasting text. See Bootstrap Color & background.
Slots
NameDescription
buttonContent to place in the button
Events
EventArgumentsDescription
notation:changenotation - Current value of the notation inputChange event triggered by the user interaction. Emitted after the notation is changed
rollnotation - 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
PropertyTypeDefaultDescription
btn-labelString"Roll"Text content to place in the button
class-nameString"dice-roller"The class name of the component
idStringThe id attribute of the component
notationStringNotation string to set on the component
Slots
NameDescription
buttonContent to place in the button
Events
EventArgumentsDescription
notation:changenotation - Current value of the notation inputChange event triggered by the user interaction. Emitted after the notation is changed
rollnotation - 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
PropertyTypeDefaultDescription
notationStringNotation string to set on the component
Slots
NameDescription
defaultContent of the component
Events
EventArgumentsDescription
notation:changenotation - Current value of the notation inputChange event triggered by the user interaction. Emitted after the notation is changed
rollnotation - 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

Lint with ESLint

npm run lint

Keywords

dice

FAQs

Package last updated on 28 Nov 2023

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.