DEV Community

Caleb (pxlmastr)
Caleb (pxlmastr)

Posted on

Creating a minimalistic To-Do app in Vue.js

#webdev #javascript #vue #tutorial

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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, } } })
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)