VUE3 Getting Started Example: Build a simple instant messaging application

Vue3 is one of the most advanced JavaScript frameworks currently and it is the next generation version of Vue.js. Vue3 not only provides better performance and richer features, but also provides a better development experience. In this article, we will introduce how to use Vue3 to build a simple instant messaging application.

1. Determine the application structure

Before we start building the application, we need to determine the structure of the application. In our sample application, we will create the following components:

• App.vue: The main component of the application, responsible for displaying all other components.
• ChatList.vue: Displays the chat list related to the user.
• ChatMessage.vue: Display a single chat message.
• ChatInput.vue: Provides input components for users to interact with messages.

2. Creating the Application

Before you start building the application, make sure you have the latest versions of Node.js and Vue CLI installed on your computer.

To create an application, use the Vue CLI and run the following command:

vue create chat-app

This will create a new Vue3 application. You will then need to follow the on-screen prompts and select the following options:

• Select the manual installation feature
• Select Babel and Router
• Select the "ESLint Prettier" installation question The following "space"
• Select "Lint and fix on commit"

3. Create component

Next, we need to create the application s component. You can create the following file in the /src/components/ directory:

• App.vue

<template>
  <div class="chat-app">
    <ChatList />
    <ChatInput />
  </div>
</template>

<script>
import ChatList from "./ChatList";
import ChatInput from "./ChatInput";

export default {
  name: "App",
  components: {
    ChatList,
    ChatInput,
  },
};
</script>

<style>
.chat-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: space-between;
}
</style>

• ChatList.vue

<template>
  <div class="chat-list">
    <ChatMessage v-for="message in messages" :key="message.id" :message="message" />
  </div>
</template>

<script>
import ChatMessage from "./ChatMessage";

export default {
  name: "ChatList",
  components: {
    ChatMessage,
  },
  data() {
    return {
      messages: [
        { id: 1, text: "Hello", author: "Alice" },
        { id: 2, text: "Hi there", author: "Bob" },
      ],
    };
  },
};
</script>

<style>
.chat-list {
  height: calc(100% - 64px);
  overflow-y: scroll;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
</style>

• ChatMessage.vue

<template>
  <div class="chat-message">
    <div class="chat-message-author">{{ message.author }}</div>
    <div class="chat-message-text">{{ message.text }}</div>
  </div>
</template>

<script>
export default {
  name: "ChatMessage",
  props: {
    message: {
      type: Object,
      required: true,
    },
  },
};
</script>

<style>
.chat-message {
  margin-bottom: 8px;
}

.chat-message-author {
  font-weight: bold;
  margin-bottom: 4px;
}

.chat-message-text {
  font-size: 16px;
}
</style>

• ChatInput.vue

<template>
  <div class="chat-input">
    <input type="text" v-model="message" @keyup.enter="sendMessage" />
    <button @click="sendMessage">Send</button>
  </div>
</template>

<script>
export default {
  name: "ChatInput",
  data() {
    return {
      message: "",
    };
  },
  methods: {
    sendMessage() {
      this.$emit("send", this.message);
      this.message = "";
    },
  },
};
</script>

<style>
.chat-input {
  display: flex;
  height: 64px;
  padding: 16px;
}

.chat-input input {
  flex: 1;
  border-radius: 4px 0 0 4px;
  border: none;
  padding: 8px;
  font-size: 16px;
}

.chat-input button {
  border-radius: 0 4px 4px 0;
  border: none;
  background-color: #007aff;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
  cursor: pointer;
}
</style>

4. Handling state in parent component

In our application, data sharing needs to be done across multiple components. So we can set state in parent component and pass it to all child components. In App.vue, we will add the following code:

<script>
import ChatList from "./ChatList";
import ChatInput from "./ChatInput";

export default {
  name: "App",
  components: {
    ChatList,
    ChatInput,
  },
  data() {
    return {
      messages: [
        { id: 1, text: "Hello", author: "Alice" },
        { id: 2, text: "Hi there", author: "Bob" },
      ],
    };
  },
  methods: {
    sendMessage(message) {
      const newMessage = {
        id: this.messages.length + 1,
        text: message,
        author: "You",
      };
      this.messages.push(newMessage);
    },
  },
};
</script>

This code will initialize the messages array and add the sendMessage method, which will receive each message and add it to the messages array.

5. Handling events in the child component

Now, we need to handle the sendMessage event in the child component and send it to the parent component. In ChatInput.vue, we will add the following code:

<script>
export default {
  name: "ChatInput",
  data() {
    return {
      message: "",
    };
  },
  methods: {
    sendMessage() {
      this.$emit("send", this.message);
      this.message = "";
    },
  },
};
</script>

This code will trigger the send event when the user sends a message and send the message text back to the parent component as a parameter.

6. Display data in child components

Finally, we need to display data in child components. In ChatMessage.vue and ChatList.vue, we will use the following code:

<ChatMessage v-for="message in messages" :key="message.id" :message="message" />

This code will display the ChatMessage component based on the content in the messages array.

7. Run the application

Now, our application is ready. To run the application, run the following command:

npm run serve

This will launch the application on the local development server, accessible at http://localhost:8080/.

Summary

This article introduces how to use Vue3 to build a simple instant messaging application. We learned how to create applications and components using the Vue CLI, and how to set state in parent components and handle events and display data in child components. Through this article, you can learn how to use Vue3 to develop modern, interactive web applications and lay a solid foundation for your next project.

The above is the detailed content of VUE3 Getting Started Example: Build a simple instant messaging application. For more information, please follow other related articles on the PHP Chinese website!