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 …

Step by Step

Change into your vuedice directory:

cd vuedice
<!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 it.

curl -O https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js

Now we need to source the vue.js library into our index.html file.

<!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> tags where we can see everything going on. This is particularly useful when dealing with Vue since we will be adding special HTML template content that goes with the Vue JavaScript code we are writing.

Make sure <script></script> comes after the vue.js one.

    <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.

TODO