Creating a Dice Roller Vue Component
Here’s how to create a simple dice rolling Vue.js component to get an idea of how Vue works.
But First …
- Create a
vuedicedirectory or project repo. Your Codebook is fine for this one.
Step by Step
Change into your
<!doctype html> <html> <head> <title>Dice Roller</title> </head> <body> <h1>Dice Roller</h1> </body> </html>
Now we need to add the Vue.js library. Although you can load this remotely, I like download it and include it so that it works locally even when you are not connected to the Internet. Later, when making PWAs we will revisit this decision.
Go to https://vuejs.org to get the latest.
If you know the version you want you can just
curl -O https://firstname.lastname@example.org/dist/vue.js
Now we need to source the
vue.js library into our
<!doctype html> <html> <head> <title>Dice Roller</title> </head> <body> <h1>Dice Roller</h1> <script src='vue.js'></script> </body> </html>
Alright, now we need to add our code. Rather than source an external script we will just write our code within the
<script></script> comes after the
<h1>Dice Roller</h1> <script src='vue.js'></script> <script> console.log('hello console') </script
Now open this up in your Chrome web browser and check out the console.
You should notice that Vue has loaded correctly even though we aren’t using it yet.
You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html
If you don’t see that then you your
vue.js is not loading properly. By the way, the message is different if you get the other production version, but we’ll worry about that later.
Now would be a great time to install the Chrome Vue Plugin if you have not done so already.
Now we have to make an
div for our app.