Creating a minimalistic To-Do app in Vue.js

Hello, World!

(this is my first actual post)

Pre-article

I know y'all don't read the description, so the final project (with css of course) is here:
To-Do list

Introduction

Vue is an amazing framework that you can use almost everywhere. You can program it in Node.js, or even in a serverless fashion (what I will be doing). One of the most common first webdev projects you will eventually do with a new framework is a To-Do list, which I decided to do with Vue as my first big one and first actual GitHub Repo!

My editor setup (since i'm on a chromebook)

VSCode web + Volar (Vue language features)

Getting started

So I first decided to make a simple UI and then add on some features. I started off my UI like this:

<div id="app">
    <h1>To-Do list</h1>
    <input placeholder="Add a new task..." /><button>Add</button>
    <br />
    <ul>
        <li> tasks go here... </li>
    </ul>
</div>

Pretty simple right? Well, at least that's what it was before I injected Vue and Tailwind into it... 😆

Adding Reactivity

I went ahead and installed Vue in my webpage using the CDN, like this (put it in your head or wherever you like)

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Then, I made a script tag below my div and started writing code. Here's what I started with:

const {ref, createApp} = Vue

createApp({
  setup() {
    let tasks = ref([])
    let input = ref('')

    function addnewTask() {
      tasks.value.push(input.value); // add a new task from the <input>
      input.value = '' // clear the <input>
    }

    return {
      tasks,
      input, 
      addnewTask,
    }
  }
})

Then, to make the reactivity, I went and added some tags and attributes to my body.

<div id="app">
    <h1>To-Do list</h1>
    <input v-model="input" placeholder="Add a new task..." /><button @click="addnewTask">Add</button>
    <br />
    <ul>
        <li v-for="task in tasks">{{task}}</li>
    </ul>
</div>

That's the simplest I could make it for the start, but later on I added it where we could add more functionality. For example, later on, I had added a unique ID to each task so we could make a delete() function, and I had the program save your tasks to localStorage. That's all a bit too much, so you can see the full code on GitHub. Feel free to give it a star!

Thanks for reading, your pal,

• pxlmastrXD