Vue 3 Projects

Create a Welcome Message App with Vue 3 and JavaScript

Spread the love

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:

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

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) {
      const { firstName, lastName } = this;
      this.message = `hello, ${firstName} ${lastName}`;

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.


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

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *