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
Top comments (0)