Category: Vue 3

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a rock paper scissors game with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create rock-paper-scissors

and select all the default options to create the project.

Create a Rock, Paper, Scissors Game

To create the rock, paper, scissors game, we write:

<template>
  <div>
    <button @click="selected = 'rock'">rock</button>
    <button @click="selected = 'paper'">paper</button>
    <button @click="selected = 'scissors'">scissors</button>
  </div>
  <button @click="play">play</button>
  <p>your choice: {{ selected }}</p>
  <p>computer's choice: {{ computedSeletced }}</p>
  <div>{{ result }}</div>
</template>

<script>
const choices = ["rock", "paper", "scissors"];
export default {
  name: "App",
  data() {
    return {
      selected: "",
      computedSeletced: "",
    };
  },
  computed: {
    result() {
      const { computedSeletced, selected } = this;
      if (computedSeletced === selected) {
        return `it's a tie`;
      } else {
        if (
          (computedSeletced === "rock" && selected === "scissors") ||
          (computedSeletced === "paper" && selected === "rock") ||
          (computedSeletced === "scissors" && selected === "paper")
        ) {
          return "computer won";
        }
        return "player won";
      }
    },
  },
  methods: {
    play() {
      if (!this.selected) {
        return;
      }
      const computerChoiceIndex = Math.floor(Math.random() * choices.length);
      this.computedSeletced = choices[computerChoiceIndex];
    },
  },
};
</script>

In the template, we have a few buttons.

The top 3 buttons lets the player choose between rock, paper, and scissors.

Below, that we have the play button that calls play when we click the button.

The play method makes the computer pick a choice by setting the computedSelected reactive property to a random choice.

Next, we have 2 p elements to show the choices of the player and the computer.

And then we have a div to display the result.

In the script tag, we have the choices array with the choices.

data returns an array with the reactive properties and their initial values.

Then we add the result computed property to return the game’s result.

We get the computedSelected and selected reactive properties which have the computer and player choices respectively.

If they’re the same, then it’s a tie.

Then in the else block, we check according to the rules of the game.

Rock beats scissors, paper beats rock, and scissors beat paper.

So we check all those conditions to return who won.

Then finally, we have the play method which we mentioned earlier to let the computer pick a choice.

We check that the player picked a choice before letting the computer pick a choice.

Conclusion

We can create a rock, paper, scissors game easily with Vue 3 and JavaScript.

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a coin flip app with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create coin-flip

and select all the default options to create the project.

Create a Coin Flip App

To create the coin flip app, we write:

<template>
  <div>
    <h1>select a face</h1>
    <button @click="selectedFace = 'heads'">heads</button>
    <button @click="selectedFace = 'tails'">tails</button>
  </div>
  <p>you selected: {{ selectedFace }}</p>
  <p>computer selected: {{ computerSelectedFace }}</p>
  <button @click="flip">flip coin</button>
  <p v-if="isWin">you win</p>
  <p v-else>you lost</p>
</template>

<script>
const faces = ["heads", "tails"];
export default {
  name: "App",
  data() {
    return {
      selectedFace: "",
      coinFlipResult: "",
    };
  },
  computed: {
    computerSelectedFace() {
      const { selectedFace } = this;
      const face = faces.find((f) => f !== selectedFace);
      return face;
    },
    isWin() {
      const { selectedFace, coinFlipResult } = this;
      return coinFlipResult === selectedFace;
    },
  },
  methods: {
    flip() {
      let index;
      if (Math.random() < 0.5) {
        index = 0;
      } else {
        index = 1;
      }
      this.coinFlipResult = faces[index];
    },
  },
};
</script>

In the template, we have a heads button to let the player select heads.

And we have another button to lets the player select tails.

Once a button is clicked, the selectedFace value is set.

Then we have the p elements to show the selected coin face of the player and the computer.

Next, we add a flip coin button to let us flip the coin.

Then we display if the player won or lost in the p elements.

Next, in the script tag, we have the faces array with the 'heads' and 'tails' strings.

data returns an object with the reactive properties and their initial values.

Next, we have the computed properties.

We have the computedSelectedFace which returns the coin face that the computer chooses, which is the one the player didn’t choose.

isWin checks if coinFlipResult is the same as seletedFace , which indicates that the player wins.

And finally, we have the flip method to set coinFlipResult to set the coin flip result.

Conclusion

We can create a coin flip app easily with Vue 3 and JavaScript.

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a welcome message app with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create welcome-message

and select all the default options to create the project.

Create a Welcome Message App

To create the welcome message app, we write:

<template>
  <form @submit.prevent="submit">
    <div>
      <label>first name</label>
      <input v-model.trim="firstName" />
    </div>
    <div>
      <label>last name</label>
      <input v-model.trim="lastName" />
    </div>
    <button type="submit">submit</button>
  </form>
  {{ message }}
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      firstName: "",
      lastName: "",
      message: "",
    };
  },
  computed: {
    formValid() {
      const { firstName, lastName } = this;
      return firstName.length > 0 && lastName.length > 0;
    },
  },
  methods: {
    submit() {
      if (!this.formValid) {
        return;
      }
      const { firstName, lastName } = this;
      this.message = `hello, ${firstName} ${lastName}`;
    },
  },
};
</script>

We have the form with 2 input fields.

One is for entering the first name and one is for entering the last name.

To bind the input values to reactive properties, we have the v-model directive.

The trim modifier lets us trim the starting and trailing whitespace from the entered value.

To listen to the submit event, we have the @submit directive on the form.

The prevent modifier lets us prevent server-side submission and do client-side submission.

In the component object, we have the data method to return an object with the reactive properties and their initial values.

Next, we add the formValid computed property to check if firstName and lastName have lengths bigger than 0.

Then finally, we add the submit method that checks if formValid is true .

If it is, then we proceed to set the message reactive property to the welcome message string.

Then message is displayed below the form in the template.

Conclusion

We can create a welcome message app with Vue 3 and JavaScript.

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a hangman game with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create hangman

and select all the default options to create the project.

Create a Hangman Game

To create the hangman game, we write:

<template>
  <div v-if="isWin">
    you win
    <button type="button" @click="reset">reset</button>
  </div>
  <div v-else>
    <div v-if="guessesLeft > 0">
      <p>guesses left: {{ guessesLeft }}</p>
      <form @submit.prevent="guess">
        <div>
          <label>guess</label>
          <input v-model.trim="guessLetter" />
        </div>
        <button type="submit">guess</button>
      </form>

      <span v-for="(l, index) of lettersToShow" :key="index">
        {{ l }}
      </span>
    </div>
    <div v-else>
      you lost
      <button type="button" @click="reset">reset</button>
    </div>
  </div>
</template>

<script>
const answer = "hangman";

export default {
  name: "App",
  data() {
    return {
      guessLetter: "",
      answer,
      guesses: [],
    };
  },
  computed: {
    formValid() {
      const { guessLetter } = this;
      return /[a-z]{1}/.test(guessLetter);
    },
    lettersToShow() {
      const { answer, guesses } = this;
      return answer.split("").map((a) => {
        if (guesses.includes(a)) {
          return a;
        }
        return "_";
      });
    },
    guessesLeft() {
      const { answer, guesses } = this;
      return (
        6 -
        guesses.filter((g) => {
          return !answer.includes(g);
        }).length
      );
    },
    isWin() {
      const { answer, guesses } = this;
      const includedLetters = guesses.filter((g) => {
        return answer.includes(g);
      });
      return answer.split("").every((a) => {
        return includedLetters.includes(a);
      });
    },
  },
  methods: {
    guess() {
      if (!this.formValid) {
        return;
      }
      this.guesses.push(this.guessLetter);
      this.guessLetter = "";
    },
    reset() {
      this.guesses = [];
      this.guessLetter = "";
    },
  },
};
</script>

In the template, we check is isWin is true .

If it is, then we show ‘you win’.

And we show the reset button to let the user restart the game.

Otherwise, we show a div with a form to let the player guess letters if guessesLeft is bigger than 0.

This indicates that the player can still guess.

The form has the guess field to let the player enter a letter to guess.

We bind it to guessLetter with v-model .

And we use the trim modifier to trim whitespaces.

We listen to the submit event with the @submit directive and the guess method.

prevent lets us prevent server-side form submission and do client-side submission instead.

Below that, we loop through the letters to show.

Otherwise, we show a ‘you lost’ message to the player since there are no more guesses left.

And we show the reset button on that div to let the player reset the game.

At the top of the script we have the answer variable.

guessLetter has the letter.

guesses has an array of guesses, which are single-letter strings.

We make sure that the input value is a single-letter string with the formValid computed property.

lettersToShow has the letters that are guessed so far.

We return the letter that are guessed corrected if they’re checked to be so with guess.includes(a) .

answers have correct string, so we can check the letters in that with includes to see if we have correct letters.

Otherwise, we return an underscore.

guessesLeft have the number of guesses left.

It’s 6 minus the number of incorrect guesses, which is determined by:

guesses.filter((g) => {
  return !answer.includes(g);
}).length

isWin determines if the player won or not.

We determine this by getting the correct letters that are stored in the includedLetters variable.

And we call every on the answer string split into an array to see if every letter in answer is included in includedLetters .

Now we add the guess method to let the player entered the guess.

We only accept the guess if the form is valid according to the formValid variable.

If that’s true , then we push the guessLetter to this.guesses and reset the value of guessLetter after that.

The reset method resets the guesses and guessLetter values.

Conclusion

We can create a hangman game easily with Vue 3 and JavaScript.

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a notes app with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create notes-app

and select all the default options to create the project.

We also need the uuid package to let us generate unique IDs for our notes.

To do this, we run:

npm i uuid

Create the Notes App

To create the notes app, we write:

<template>
  <form @submit.prevent="add">
    <h1>add note</h1>
    <div>
      <label>title</label>
      <input v-model="title" />
    </div>
    <div>
      <label>description</label>
      <input v-model="description" />
    </div>
    <button type="submit">add</button>
  </form>

  <form>
    <h1>search</h1>
    <div>
      <label>keyword</label>
      <input v-model="keyword" />
    </div>
  </form>

  <div v-for="(note, index) of filteredNotes" :key="note.id">
    <h2>{{ note.title }}</h2>
    <p>{{ note.description }}</p>
    <button type="button" @click="remove(index)">remove</button>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";

export default {
  name: "App",
  data() {
    return {
      title: "",
      description: "",
      keyword: "",
      notes: [],
    };
  },
  computed: {
    filteredNotes() {
      const { keyword } = this;
      if (!keyword) {
        return this.notes;
      }
      return this.notes.filter(({ title, description }) => {
        return title.includes(keyword) || description.includes(keyword);
      });
    },
  },
  methods: {
    add() {
      const { title, description } = this;
      this.notes.push({
        id: uuidv4,
        title,
        description,
      });
      this.title = "";
      this.description = "";
    },
    remove(index) {
      this.notes.splice(index, 1);
    },
  },
};
</script>

The first form lets us add a note entry.

We have the submit event listener added with the @submit directive.

prevent lets us prevent server-side submission.

The inputs have the v-model directive to let us bind to the reactive properties so we can use them in the component object.

Then we have the submit button with type set to submit to let us submit the form when we click it.

Below that, we have another form to let us search for notes.

We have an input that’s bound to the keyword reactive property with v-model .

And below that, we render the filterNotes into HTML with the v-for directive.

We render the title and description properties.

Also, we need the key prop set to the id property so that it receives a unique ID.

This way, Vue 3 can keep track of the items properly.

In the component object, we have the data method to return an object with the reactive properties with their initial values.

Also, we have the filteredNotes computed property to get the notes filtered by keyword .

Then we add the add method to put the title and description into an object with the id and call this.notes.push to push that into the this.notes array.

The remove method lets us remove an entry by index with splice .

Conclusion

We can create a notes app easily with Vue 3 and JavaScript.