# 1. Table of Contents - [1. Table of Contents](#1-table-of-contents) - [2. Introduction](#2-introduction) - [3. Requirements](#3-requirements) - [3.1. Nodejs & NPM](#31-nodejs--npm) - [3.2. Vuejs 3.0](#32-vuejs-30) - [3.3. A code Editor](#33-a-code-editor) - [4. Creating the project](#4-creating-the-project) - [5. Initial Setup](#5-initial-setup) - [6. Starting Up](#6-starting-up) - [7. Making the Game](#7-making-the-game) - [7.1. Snippet](#71-snippet) - [7.2. GameFigure Component](#72-gamefigure-component) - [7.3. GameWord Component](#73-gameword-component) - [7.4. WrongLetters Component](#74-wrongletters-component) - [7.5. LetterNotification Component](#75-letternotification-component) - [7.6. GameOverPopup Component](#76-gameoverpopup-component) - [8. Additional Stuff](#8-additional-stuff) - [8.1. Making Globally Managed State](#81-making-globally-managed-state) - [8.2. Using The `addWord` method](#82-using-the-addword-method) - [8.3. Creating the GuessedWords View](#83-creating-the-guessedwords-view) - [8.4. Configuring Router](#84-configuring-router) - [8.5. Adding Navigation](#85-adding-navigation) # 2. Introduction I had taken Brad Traversy's hangman game, which he made in his [20 Web Projects With Vanilla JavaScript](https://www.udemy.com/course/web-projects-with-vanilla-javascript/) Udemy course, and remade it using [Vue 3](https://v3.vuejs.org/), I also added a few things of my own and changed some styles. In this article I am not going to focus on explaining the styles, just copy & paste them form this post. You can find the code for the actual game in his [GitHub repo](https://github.com/bradtraversy/vanillawebprojects/tree/master/hangman) for the course. You can find the the code for this project in this [repo](https://github.com/abasit027/Hangman). You can also find a live demo of the game [here](https://vue3-hangman.netlify.app/) In this article I am going to tell you how I did it. In this way you can learn about the new features of Vue 3. You can learn about the differences between the v2 & v3 on the official v3 [migration guide](https://v3.vuejs.org/guide/migration/introduction.html#overview). However the new features that I have used are as follows: * [Typescript](https://v3.vuejs.org/guide/typescript-support.html#typescript-support) - Vue3 have full support for typescript, since it is completely rewritten in typescript. * [Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-api) - A new API, in addition to the old Options API which still has full support, that makes things a lot easier. * [Reactivity API](https://v3.vuejs.org/guide/reactivity.html#what-is-reactivity) - A new addition in Vue3 it exposes functions to make reactive variables & objects, create computed properties, watcher functions and much more. This API is a must when using **Composition API**. * [Fragments](https://v3.vuejs.org/guide/migration/fragments.html#overview) - Vue now supports fragments, if you don't know what fragments are then we are going discuss about fragments later. So let's get started! # 3. Requirements Requirements for this project are: ## 3.1. Nodejs & NPM Nodejs is required to run the Vue CLI and compiler. We also need a package manger, I use npm but you use yarn if you want to. If you don't have it then download the installer for the latest LTS version from their [website](https://nodejs.org/en/) and install it, make sure you also install NPM. ## 3.2. Vuejs 3.0 Obviously, that's the title. If you already have installed the newest version of the vue cli than good, else just run the following command to install it. ``` bash npm i -g @vue/cli ``` ## 3.3. A code Editor Personally I prefer [VSCode](#) (and so do most of the developers). If you are using VSCode then sure you install the [Vetur extension](https://github.com/vuejs/vetur). You can use any other code editor if you want to. # 4. Creating the project Open up your commandline and change your directory to where you want to make this project. Initialize a new vue project by running the following command: ``` bash vue create hangman ``` It will ask you about a preset: ![Preset](https://dev-to-uploads.s3.amazonaws.com/i/xrs9m3468a1sxsn8coe6.png) Select manually and hit enter. Next it will ask about what features do we want: ![Features](https://dev-to-uploads.s3.amazonaws.com/i/9h1i91z1zz3n33ctwh5w.png) For our project we will be using typescript, scss, vue-router, and eslint. So select the following and hit enter. ![Selected Features](https://dev-to-uploads.s3.amazonaws.com/i/4c80j2nve5vh2w2b3xx2.png) Next it will ask which version of vue do we want to use: ![Version](https://dev-to-uploads.s3.amazonaws.com/i/5tba4mdpxjencukekoau.png) Select 3.x(Preview) and hit enter. Next, it will ask us a couple of yes/no questions. Answer as following: ![Y/N Questions](https://dev-to-uploads.s3.amazonaws.com/i/pk54p4dcenizk5981rio.png) Next, it will ask us which CSS Pre-processor do want to use. Select Sass/SCSS (with node-sass) and hit enter. Then, it will ask us to pick a linter config. Select ESLint + Standard config and hit enter. It will also ask us about some additional linting features: ![Lint Features](https://dev-to-uploads.s3.amazonaws.com/i/2mspafr8betpz5n2bn1w.png) Select both and hit enter. Then it will ask us where we want to put our config for different stuff. Select what you want and hit enter. It will also ask us if we want to save these settings as a preset for future project answer what you want and hit enter. Once the setup is complete then in your cd into hangman. If you are using VSCode then type ``` bash code . ``` and hit enter this will open code with the project folder. Now you can close your command prompt. Form now on we will be using VSCode's integrated terminal. # 5. Initial Setup Open VSCode's integrated terminal and run the following command ``` bash npm run serve ``` This will start the vue compiler with development mode & start a dev server at localhost:8080 and open it in the browser and it will look like this: ![Initial App](https://dev-to-uploads.s3.amazonaws.com/i/vt6p5kgr8h12ezvgwevv.png) We also need to install an npm package [random-words](https://www.npmjs.com/package/random-words), as the name suggests we are going to use it to get a random word every time. So run the following in the project root folder in any shell: ``` bash npm i random-words ``` Open the `main.ts` file in the src folder, it will look like this : ``` ts import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App) .use(router) .mount('#app'); ``` Here we can see the new approach to create new objects, e.g. new app, new router, new store, e.t.c. in Vue3, Vue2 provided us with classes that we could use to create new object, but Vue3 provides us with functions to create objects that are the basis of our app. As you can see here we are importing the new `createApp` function from `vue` with which we are creating a new app. Since this functions returns us our app therefore we have to use this app to define global stuff, e.g. plugins, components, e.t.c. And we can longer do this in our configuration files of the plugins. Now in our project directory in the src folder open up the App.vue file. ```vue ``` Remove every thing except the `` from the template and copy and paste the following styles instead in the style: ``` scss * { box-sizing: border-box; } body { margin: 0; padding: 50px 0 0 0; background-color: #2b2b6d; color: #ffffff; font-family: Tahoma; display: grid; place-content: center; place-items: center; text-align: center; } h1, h2, h3, h4 { font-weight: 500; } main { position: relative; width: 800px; } ``` Now in the views directory open `Home.vue`. It will look like this ``` vue ``` Remove every thing form the `

` in template also remove the import of the `HelloWorld.vue` and also remove it from the components option. In the components directory in the src folder delete the `HelloWorld.vue` file. Now in the browser it will just be a purple color. # 6. Starting Up We are going to build our game in the `Home.vue` file so open it up. In here we are going to use a new feature in Vue3 fragments. In the template we are now going to replace that div with a simple `

` and a `

` tag. It will now look like this: ``` html

Hangman

Find the hidden word enter a letter

``` Fragments allow us to have multiple root nodes. So now we don't require to wrap all of this up in a div to have only one root node. In the browser it will now show us a header. So now let's break up our game and see how it is going to work. In an hangman game a random word is chosen and we are told the no. of letters in that word. We have to guess the word by guessing one letter at a time if that letter is present in the word then it is written at position(s) it is present at in the word, if the letter is not present then it joins the list of wrong letters and the next body part of a stick-man is drawn. The total number of body parts of stick-man is 6(1 head, 1 stick for neck & belly, 2 arms and 2 legs). If we guess the word before the the drawing of the stick-man is complete then we win, else if the we can't guess the word and the drawing of the stick-man is complete then the stick-man is hanged and we lose. If a letter that have already been called is called again whether it was correct or wrong it doesn't count and we are notified that the letter have already been called. If we understand all of the above then we will see that there is actually a lot stuff that needs to be done. We require the following: 1. A random word (we are going to use the random-words package for this) 2. Show visually how many letters are in the word. 3. Functionality to enter letters one by one. 4. If the letter is correct then show it in its place. 5. Else if the letter is wrong then it joins the list of wrong letters, which we need to show on the screen. 6. And the next body part of the stick-man is drawn. 7. If a letter is entered again then we need to show a notification saying letter has already been entered. 8. If the user correctly guesses the word before the man is hanged then we need to stop the play and show a popup saying they won. 9. If the drawing of the stick-man is complete then we need to stop the play and show them a popup saying that they lost and also tell them the correct word. 10. On the popup we also need to have a play again button. 11. For additional features and to learn some more things we are also going to build a page that tells the users the words that they have correctly guessed. 12. For this purpose we also need a global state. If we see above requirements then we need two views. We are also going to build different components for the word, wrong letters, stick-man, notification and popup to simplify our work. # 7. Making the Game In the script tag of the `Home.vue` file you will notice that the component has been defined with a `defineComponent()` method. This method is used only when using type script to get proper type inference. In the `defineComponent` add a the new `setup()` method, this method is the whole new **Composition API** this allows us to group our functionality together which will be far apart in the old **Options API**. This method is called when creating the component and it returns state and methods for our component. It takes up to two arguments, but we will talk about them later. In the `setup()` method the variables we declare are not reactive, if we want to make any variable reactive then we can do so with the new `ref()` method, we just have to import the for vue. ``` ts import { defineComponent, ref } from 'vue'; ``` Then in the `setup` method we need quite a few reactive variables: ``` ts const word = ref(''); const correctLetters = ref>([]); const wrongLetters = ref>([]); const notification = ref(false); const popup = ref(false); const status = ref(''); ``` The `ref()` method takes the initial value of a variable as the argument and returns it wrapped within an object with a value property, which can then be used to access or mutate the value of the reactive variable. This is used to create *pass by reference* functionality because in JS the primitive types are passed by value and not by reference. This allows us to pass its value across our app without losing its reactivity. We have defined 6 variables so far. Let's see what they are for: * **Word** is the word which needs to be guessed, * **correctLetters** it is the array of letters correctly guessed, * **wrongLetters** it is the array of letters entered that were wrong, * **notification** and **popup** are boolean for either of them to be visible, * **status** is the status of the game . It is an empty string if the game is in play or else won or lost We also define a boolean variable for starting and stopping the game: ``` ts let playable = true; ``` Going ahead , now we are going to import the `random-words` at the top: ``` ts import randomWord from 'random-words'; ``` The `randomWord` method is going to give us a random word every time we call it. Next we are going to define `play` method: ``` ts const play = () => { word.value = randomWord(); correctLetters.value = []; wrongLetters.value = []; status.value = ''; playable = true; popup.value = false; }; ``` Here, we are setting the values of each variable to it's initial value. Except `word` which we are setting to a random word. Next we are going to define `gameOver` method: ``` ts const gameOver = (result: string) => { playable = false; status.value = result; popup.value = true; }; ``` This method takes in the result of the game sets the `playable` to `false`, the value of `popup` to true to show the popup and sets the value of `status` to `result` Next up, we are going to create the `showNotification` method which sets the value of `notification` to `true` and sets it to `false` again after 1s(1000ms) ``` ts const showNotification = () => { notification.value = true; setTimeout(() => (notification.value = false), 1000); }; ``` After that, we are going to create a method for event listener for *keydown* event that we are going to add in a lifecycle method of the component. This method obviously takes in a `KeyboardEvent` as an argument. Then we destructure it to take the `key` & `keyCode` out of it. Then we check if the game is `playable` and if the `keyCode` is between 60 & 90, it means if is key entered is an lowercase or uppercase letter. If all those conditions are met then we transform the `key` to lowercase then check if the current `word` includes the `key`. If it does then we check if the array of `correctLetters` doesn't include the `key`, if doesn't then we set the value of `correctLetters` to an array whose first element is `key` and copy the `correctLetters` to this new array with spread operator (this creates an array that all the elements of `correctLetters` plus the `key`) else we call the `showNotification()` method. If the `word` doesn't includes the `key` then we have same procedure for `wrongLetters` as we did for `correctLetters`. ``` ts const keyDown = (e: KeyboardEvent) => { let { keyCode, key } = e; if (playable && keyCode >= 60 && keyCode <= 90) { key = key.toLowerCase(); if (word.value.includes(key)) !correctLetters.value.includes(key) ? (correctLetters.value = [key, ...correctLetters.value]) : showNotification(); else !wrongLetters.value.includes(key) ? (wrongLetters.value = [key, ...wrongLetters.value]) : showNotification(); } }; ``` The one thing to know about the `setup()` method is that as is name suggests it is the setup of the component means the component is created after it runs, therefore with the exception of `props` we have no access to any properties declared in the component neither we can create any lifecycle methods but we can register lifecycle hooks inside `setup()` by importing several new functions from `vue`. They have the same name as for Options API but are prefixed with `on`: i.e. `mounted` will be `onMounted`. These functions accept a callback which will be called by the component. Further more 2 lifecycle methods have been renamed: * `destroyed` is now `unmounted` & * `beforeDestroy` is now `beforeUnmount`. We are going to register three lifecycle hooks: * `onBeforeMount`: Here we are going to add the eventListener, for keyup, on the `window`. * `onMounted`: Here we are going to call the play method. * `onUnounted`: Here we are going to remove the event listener. We are going to import the functions form `vue`: ``` ts import { defineComponent, ref, onBeforeMount, onMounted, onUnmounted } from 'vue'; ``` Next we are going to call these functions to register the hooks: ``` ts onBeforeMount(() => window.addEventListener('keydown', keyDown)); onMounted(() => play()); onUnmounted(() => window.removeEventListener('keydown', keyDown)); ``` At the end we need to return an object with all the variables and methods that we are going to use in the component: ``` ts return { word, correctLetters, wrongLetters, notification, popup, status, play, gameOver, }; ``` This is all for functionality of our main view. Though we are not done with it when create all the components next we are going to import them in here and use them. ## 7.1. Snippet Following is the snippet that we are going to use to scaffold our every component: ``` vue ``` ## 7.2. GameFigure Component The first component that we are going to create is the figure of the stick-man plus the hanging pole. In the *components* folder in the *src* directory create a new file and name it `GameFigure.vue`. Scaffold it with the above given [snippet](#61-snippet). The template for this component is just svg: ``` html ``` Before working on the functionality, we are going to add the styles. Copy and paste the following in the `

compostionapi

Hangman with Vue 3.0

Join Our Newsletter. No Spam, Only the good stuff.