Creating a Basic Vue3 App

Introduction

In this tutorial, we’ll build a simple Vue 3 application to manage website links. This app will allow you to add, display, and delete links. There isn’t a database or any way to store the links; the intention is to show some of the Vue3 functions in a real-world application to get you started.

Prerequisites

• Basic knowledge of JavaScript, HTML, and CSS.
• Node.js and npm installed on your machine.
• A text editor, like Visual Studio Code.

Step 1: Setting Up Your Vue 3 Project

1. Install Vue CLI: Open your terminal and run npm install -g @vue/cli.
2. Create a New Vue Project: Execute vue create my-link-manager. Choose default settings.
3. Navigate to Your Project: cd my-link-manager.
4. Start the Development Server: Run npm run serve.

Step 2: Structuring Your Project

Focus on these directories:

• src/components: Where Vue components will live.
• src/App.vue: The main Vue component.

Step 3: Designing the User Interface in App.vue

Replace the content of App.vue with the following:

<template> 
  <div id="app"> 
    <h1>Link Manager</h1> 
    
    <form @submit.prevent="addLink"> 
      <input v-model="newLink.url" placeholder="URL" required> 
      <input v-model="newLink.description" placeholder="Description" required> 
      <button type="submit">Add Link</button> 
    </form> 
    
    <ul> 
      <li v-for="(link, index) in links" :key="index"> 
        <a :href="link.url" target="_blank">{{ link.description }} </a>
        <button @click="removeLink(index)">Delete</button> 
      </li> 
    </ul> 
  </div> 
</template> 
<script> 
  export default { 
    data() { 
      return { 
        newLink: { url: '', description: '' }, 
        links: [] 
      }; 
    }, 
      
    methods: { 
      addLink() { 
        this.links.push({ ...this.newLink }); 
        this.newLink.url = ''; 
        this.newLink.description = ''; 
      }, 
      removeLink(index) { 
        this.links.splice(index, 1); 
      } 
    } 
  }; 
</script> 

<style> 
  /* Add your CSS styles here */ 
</style>

Step 4: Adding and Displaying Links

The code in App.vue handles adding and displaying links. The addLink method adds a new link to the links array, and the v-for directive in the template displays each link.

Step 5: Deleting Links

The removeLink method removes a link from the links array. This is triggered by the “Delete” button next to each link.

Step 6: Styling Your Application

Add CSS in the <style> section of App.vue to style your application. You can customize it as per your preference.

Step 7: Testing Your Application

• Manually Test: Ensure adding, displaying, and deleting links works correctly.
• Automated Testing: Consider writing unit tests using Vue Test Utils and Jest.

Conclusion

In this post, I created a basic Vue application for managing links to websites.

Related posts:

Creating a new Ubuntu Server VM in Proxmox Shrink an SQL database Fix incorrect Git Comments SQLCMD: A Tool for SQL Server Management