Creating a Basic Vue3 App

Creating a Basic Vue3 App


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.


  • 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:

  <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> 
      <li v-for="(link, index) in links" :key="index"> 
        <a :href="link.url" target="_blank">{{ link.description }} </a>
        <button @click="removeLink(index)">Delete</button> 
  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); 

  /* Add your CSS styles here */ 

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.


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


Hi, my name is Stephen Finchett. I have been a software engineer for over 30 years and worked on complex, business critical, multi-user systems for all of my career. For the last 15 years, I have been concentrating on web based solutions using the Microsoft Stack including ASP.Net, C#, TypeScript, SQL Server and running everything at scale within Kubernetes.