Vue.js 101 : Setting up our Todo Project

Screenshot from the tutorial

Vue.js 101: Setting Up Our Todo Project

Welcome to our introductory tutorial on setting up a Todo application using Vue.js! In this post, we’ll walk you through the initial steps to create a simple yet effective Todo app. By the end of this guide, you will have a clear understanding of how to set up and structure your Vue.js project.

What is Vue.js?

Vue.js is a progressive JavaScript framework used for building user interfaces and single-page applications. It’s known for its simplicity and flexibility, making it an excellent choice for developers at all levels. In this tutorial, we will leverage Vue.js's reactive capabilities to create a Todo list.

Prerequisites

Before we dive into the setup process, ensure you have the following installed on your machine:

• Node.js: Vue.js development requires Node.js for package management.
• npm or yarn: These are package managers that help manage dependencies.

You can download Node.js here.

Creating a New Vue Project

To create a new Vue.js project, follow these steps:

Step 1: Install Vue CLI

Vue CLI is a command-line tool that helps in scaffolding new Vue.js projects. To install it globally, open your terminal and run:

npm install -g @vue/cli

Step 2: Create a New Project

Once Vue CLI is installed, you can create a new project by running the following command:

vue create todo-app

You will be prompted to select a preset. You can choose the default settings by pressing Enter, which will set up a project with Babel and ESLint.

Step 3: Navigate to the Project Directory

After the setup is complete, navigate to your project directory:

cd todo-app

Step 4: Start the Development Server

To see your new Vue.js application in action, you can start the development server with:

npm run serve

This command will compile and hot-reload your application for development. By default, it will be accessible at http://localhost:8080.

Project Structure

Once your project is created, you’ll notice a specific structure in the todo-app folder:

todo-app/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── package.json
└── vue.config.js

• src/: This is where the main application code resides.
• components/: This folder will hold the components of your Todo app.
• App.vue: The root component of your application.
• main.js: The entry point of your application.

Setting Up the Todo Component

Now that our initial setup is complete, let’s create a simple Todo component.

Step 1: Create the Todo Component

Inside the src/components/ directory, create a new file named Todo.vue:

<template>
  <div>
    <h1>My Todo List</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo" />
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: [],
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push({ id: Date.now(), text: this.newTodo });
        this.newTodo = '';
      }
    },
  },
};
</script>

<style scoped>
/* Add some basic styling */
h1 {
  color: #42b983;
}
input {
  margin-bottom: 10px;
}
</style>

Step 2: Use the Todo Component in App.vue

Now, we need to include our Todo component in the main application file, App.vue. Open src/App.vue and modify it as follows:

<template>
  <div id="app">
    <Todo />
  </div>
</template>

<script>
import Todo from './components/Todo.vue';

export default {
  components: {
    Todo,
  },
};
</script>

Conclusion

Congratulations! You have successfully set up a basic Todo application using Vue.js. This tutorial covered the installation of Vue CLI, the creation of a new project, and the implementation of a simple Todo component.

In future posts, we will expand on this application by adding features such as editing and deleting todos, persisting data, and ultimately deploying the app.

Stay tuned for more Vue.js tutorials, and happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios