Create a Pass the 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 pass the 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 pass-the-message

and select all the default options to create the project.

Create the Pass the Message App

To create the pass the message app, we write:

<template>
  <form @submit.prevent="pass">
    <label>message you like to pass</label>
    <input v-model="message" />
    <button type="submit">submit</button>
  </form>
  <h1>last message delivered</h1>
  <p>{{ prevMessage }}</p>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      message: "",
      prevMessage: "",
    };
  },
  methods: {
    pass() {
      this.prevMessage = this.message;
      this.message = "";
    },
  },
};
</script>

We have the form to let us type in the message to pass in.

We bind the entered value to the message reactive property with v-model .

Also, we listen to the submit event with the pass method.

The prevent modifier prevents the default server-side submission behavior.

In the pass method, we set the value of the prevMessage reactive property to message .

And we set this.mnessage to an empty string to empty the input.

Now, when we type in something and click submit, the message is displayed below the last message delivered heading.

The data message method returns the initial values of the message and prevMessage reactive properties.

Conclusion

We can create a pass the message app easily with Vue 3 and JavaScript.