Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vue dice roller

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

A Dice Roller Vue.js component with images. Like story cubes. This lets you roll a number of dices in the form of images. Think of it like rolling a number of dice virtually.

Instead of regular dice (1,2,3,4,5,6) they choose from a limited set of images. You should be able to change them to regular dice if you want.

vue dice

To generate the icon list

printf "https://raw.githubusercontent.com/vitogit/vue-dice-roller/master/src/icons/%s?sanitize=true\',\n\'" * > _list.js
Github: [https://github.com/vitogit/vue-dice-roller](//github.com/vitogit/vue-dice-roller) ### License This project is based on [storygen](//github.com/treetrnk/storygen/) The icons used are from [game-icons.net](//game-icons.net/) the author is https://github.com/Delapouite It has a CC BY 3.0 license so if you use the component or the icons you must credit him for his work. ### Installation To install you need npm and node. Clone the github repo then run these commads:
npm install --save vue-dice-roller

Install all the components:

import Vue from 'vue'
import VueDiceRoller from 'vue-dice-roller'

Vue.use(VueDiceRoller)

A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.**

Distribution import

Install all the components:

import 'vue-dice-roller/dist/vue-dice-roller.css'
import VueDiceRoller from 'vue-dice-roller/dist/vue-dice-roller.common'

Vue.use(VueDiceRoller)

You may have to setup your bundler to embed the css file in your page.

Browser


<link rel="stylesheet" href="vue-dice-roller/dist/vue-dice-roller.css"/>

<script src="vue.js"></script>
<script src="vue-dice-roller/dist/vue-dice-roller.browser.js"></script>

Example

The code below creates the dice page:

<div id="app">
<button @click="roll">ROLL</button>
<select v-model="diceCount">
<option v-for="index in 10" :value="index"></option>
</select>
<dice-roller ref="diceroller" :count="diceCount"/>
</div>

<script>
Vue.use(VueDiceRoller)
new Vue({
el: '#app',
data () {
return {
diceCount: 6
}
},
methods: {
roll() {
console.log("this.$refs",this.$refs)
this.$refs.diceroller.roll();
}
}
})
</script>

← poll app vuejs vue data grid →

© vuejsexamples.net - Privacy Policy - Cookie Policy