Build a Simple Vue.js Interactive Web-Based Mood Tracker: A Beginner’s Guide

Written by

javascriptdebugged

in

Feeling overwhelmed by your emotions? Ever wished you could track your mood over time to better understand yourself? In today’s digital age, we have the tools to do just that! This tutorial will guide you through building a simple, yet effective, mood tracker using Vue.js. This project is perfect for beginners and intermediate developers looking to sharpen their skills while creating something useful. We’ll break down the process step-by-step, explaining each concept in simple terms, providing plenty of code examples, and highlighting common pitfalls to avoid.

Why Build a Mood Tracker?

Mood tracking isn’t just a trendy activity; it’s a powerful tool for self-awareness and mental well-being. By regularly logging your mood, you can identify patterns, triggers, and potential areas for improvement. A mood tracker can help you:

  • Recognize emotional trends.
  • Identify triggers for negative moods.
  • Monitor the effectiveness of coping strategies.
  • Promote self-reflection and personal growth.

Building your own mood tracker offers several advantages over using pre-built apps. You gain a deeper understanding of the underlying technology, allowing you to customize the app to your specific needs and preferences. Plus, it’s a fantastic way to learn and practice Vue.js, a popular JavaScript framework for building user interfaces.

Prerequisites

Before we dive in, ensure you have the following:

  • A basic understanding of HTML, CSS, and JavaScript.
  • Node.js and npm (Node Package Manager) installed on your system.
  • A code editor (e.g., VS Code, Sublime Text).

Setting Up Your Vue.js Project

Let’s start by creating a new Vue.js project using the Vue CLI (Command Line Interface). Open your terminal or command prompt and run the following command:

npm create vue@latest mood-tracker

The CLI will guide you through the setup process. You can choose the default options for this project. When prompted, select the following:

  • Project name: mood-tracker
  • Add TypeScript: No
  • Add JSX support: No
  • Add Vue Router for Single Page Application development?: No
  • Use Pinia for state management?: Yes
  • Add Vitest for Unit Testing?: No
  • Add an End-to-End Test Framework?: No
  • Use the default config for linting? (recommended): Yes
  • Would you like to customize the project with features?: No

Navigate into your project directory:

cd mood-tracker

Install the dependencies:

npm install

Now, start the development server:

npm run dev

This will typically launch the app in your browser at http://localhost:5173/. You should see the default Vue.js welcome page. This confirms that your setup is successful.

Project Structure Overview

Before we start coding, let’s take a quick look at the project structure generated by Vue CLI:

  • public/: Contains static assets like the favicon.
  • src/: This is where the majority of our code will reside.
    • components/: We’ll store our reusable Vue components here.
    • stores/: We will be using Pinia for state management, so we will create stores here
    • App.vue: The main component that serves as the root of our application.
    • main.js: The entry point of our application, where we initialize Vue and configure the store.
  • package.json: Contains project metadata and dependencies.

Creating the Mood Tracker Components

We’ll create several components to build our mood tracker. Let’s start with the basics.

MoodEntry.vue

This component will handle the entry of a single mood record. Create a new file named MoodEntry.vue inside the components/ directory. Here’s the basic structure:

<template>
  <div class="mood-entry">
    <h3>Enter Your Mood</h3>
    <!-- Input fields and logic will go here -->
  </div>
</template>

<script setup>

</script>

<style scoped>
.mood-entry {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}
</style>

In this component, we’ve set up the basic HTML structure with a heading and a container. The scoped attribute in the <style> tag ensures that the styles only apply to this component.

MoodSelector.vue

This will be a reusable component to select the mood. Create a new file named MoodSelector.vue inside the components/ directory:

<template>
  <div>
    <label for="mood-select">Select Mood:</label>
    <select id="mood-select" v-model="selectedMood">
      <option value="happy">Happy</option>
      <option value="sad">Sad</option>
      <option value="angry">Angry</option>
      <option value="neutral">Neutral</option>
    </select>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const selectedMood = ref('');

// Emit the selected mood to the parent component
// const emit = defineEmits(['moodSelected']);

// watch(selectedMood, (newMood) => {
//   emit('moodSelected', newMood);
// });
</script>

This component provides a dropdown menu with mood options. We use v-model to bind the selected value to the selectedMood variable. Note that we will emit the selected mood to the parent component.

MoodList.vue

This component will display the list of mood entries. Create a new file named MoodList.vue inside the components/ directory:

<template>
  <div class="mood-list">
    <h3>Mood History</h3>
    <ul>
      <li v-for="entry in moodEntries" :key="entry.id">
        {{ entry.mood }} - {{ entry.date }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const moodEntries = ref([]);

// Fetch mood entries from the store (we'll implement this later)
// onMounted(() => {
//   moodEntries.value = getMoodEntries();
// });
</script>

<style scoped>
.mood-list {
  margin-top: 20px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 5px;
  border-bottom: 1px solid #eee;
}
</style>

This component displays a list of mood entries, iterating over an array of mood data. We’ll populate this data from our Pinia store later.

App.vue Integration

Now, let’s integrate these components into our main application component (App.vue):

<template>
  <div id="app">
    <h1>Mood Tracker</h1>
    <MoodEntry />
    <MoodList />
  </div>
</template>

<script setup>
import MoodEntry from './components/MoodEntry.vue';
import MoodList from './components/MoodList.vue';
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Here, we import the MoodEntry and MoodList components and include them in our template. At this point, you should see the basic structure of your mood tracker in the browser, with the “Enter Your Mood” and “Mood History” sections.

Implementing State Management with Pinia

Pinia is a state management library for Vue.js. It allows us to manage and share data across our components. Let’s create a Pinia store to store our mood entries.

Creating the Mood Store

Create a new file named moodStore.js inside the stores/ directory:

import { defineStore } from 'pinia';

export const useMoodStore = defineStore('mood', {
  state: () => ({
    moodEntries: [],
  }),
  getters: {
    // You can add getters here to derive data from the state
  },
  actions: {
    addMoodEntry(mood) {
      const newEntry = {
        id: Date.now(),
        mood: mood.mood,
        date: new Date().toLocaleDateString(),
      };
      this.moodEntries.push(newEntry);
    },
  },
});

This code defines a Pinia store named “mood”.

  • state: Contains the reactive data (moodEntries).
  • getters: (Optional) Computed properties that derive data from the state.
  • actions: Methods that modify the state (addMoodEntry).

Integrating the Store into Components

Let’s use the store in our components.

MoodEntry.vue (Updated)

Modify the MoodEntry.vue component to include a mood selector, a text input for notes, and a button to submit the mood entry. Also, import and use the store to add mood entries.

<template>
  <div class="mood-entry">
    <h3>Enter Your Mood</h3>
    <MoodSelector @moodSelected="handleMoodSelected" />
    <input type="text" v-model="notes" placeholder="Notes (optional)">
    <button @click="addEntry">Add Entry</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import MoodSelector from './MoodSelector.vue';
import { useMoodStore } from '../stores/moodStore';

const store = useMoodStore();
const selectedMood = ref('');
const notes = ref('');

const handleMoodSelected = (mood) => {
  selectedMood.value = mood;
};

const addEntry = () => {
  if (selectedMood.value) {
    store.addMoodEntry({
      mood: selectedMood.value,
      notes: notes.value,
    });
    selectedMood.value = '';
    notes.value = '';
  }
};
</script>

<style scoped>
.mood-entry {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}
input, button, select {
  margin-bottom: 10px;
}
</style>

We’ve added a MoodSelector component and an input field for notes. The addEntry method calls the addMoodEntry action from the Pinia store.

MoodList.vue (Updated)

Update the MoodList.vue component to fetch the mood entries from the store:

<template>
  <div class="mood-list">
    <h3>Mood History</h3>
    <ul>
      <li v-for="entry in moodEntries" :key="entry.id">
        {{ entry.mood }} - {{ entry.date }} - {{ entry.notes || 'No notes'}}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { useMoodStore } from '../stores/moodStore';
import { computed } from 'vue';

const store = useMoodStore();
const moodEntries = computed(() => store.moodEntries);
</script>

<style scoped>
.mood-list {
  margin-top: 20px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 5px;
  border-bottom: 1px solid #eee;
}
</style>

We import the useMoodStore and use it to access the moodEntries from the store. We also use computed to make sure that the entries are reactive.

main.js (Update)

Make sure to import and use Pinia in your main.js file:

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.mount('#app')

By adding these updates, your application should now store and display the mood entries.

Adding Styles

To enhance the visual appeal, let’s add some basic styling. You can add styles directly in the <style scoped> sections of each component or create a separate CSS file.

Here’s some example CSS you can add to your components, feel free to customize it to your liking:

/* Example styles for MoodEntry.vue */
.mood-entry {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

input, button, select {
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

/* Example styles for MoodList.vue */
.mood-list {
  margin-top: 20px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 5px;
  border-bottom: 1px solid #eee;
}

Common Mistakes and How to Fix Them

Here are some common mistakes beginners encounter and how to resolve them:

  • Incorrect Component Imports: Make sure you import components correctly in your App.vue and other components. Double-check the file paths.
  • Incorrect v-model Usage: Ensure you’re using v-model correctly to bind input fields to reactive data.
  • State Not Updating: If the UI isn’t updating after a state change, verify that your data is reactive (e.g., using ref or reactive) and that you’re correctly accessing and modifying state within your Pinia store.
  • Scope Issues: Be mindful of the scope of variables. In the <script setup> syntax, variables declared at the top level are available in the template.
  • CSS Conflicts: Use scoped styles to prevent CSS conflicts between components.

Key Takeaways

In this tutorial, we’ve covered the essentials of building a simple mood tracker with Vue.js:

  • Project setup using Vue CLI.
  • Creating reusable components.
  • Implementing state management with Pinia.
  • Adding basic styling.

You now have a functional mood tracker that you can expand upon. Consider adding features like:

  • Date and time selection.
  • More mood options or custom mood labels.
  • Data persistence (saving to local storage or a database).
  • Mood visualization (charts and graphs).

FAQ

Here are some frequently asked questions:

  1. Can I use a different state management library?
    Yes, you can use other state management libraries like Vuex. Pinia is recommended for its simplicity and ease of use.
  2. How do I add more advanced features?
    You can add features by adding new components, modifying existing ones, and integrating with external APIs or libraries.
  3. How can I deploy this app?
    You can deploy your app using platforms like Netlify, Vercel, or GitHub Pages. You’ll need to build your project for production using npm run build before deploying.
  4. How do I handle user authentication?
    User authentication involves setting up a backend to manage user accounts and secure data. You would then integrate this with your Vue.js application using API calls.

Building a mood tracker is a rewarding project that combines practical application with the ability to improve your Vue.js skills. The ability to track your mood, and to observe your moods over time, will provide insights that can help you become more mindful of your emotions and develop strategies for greater well-being. By following the steps in this tutorial, you’ve taken a significant step towards creating a useful and personalized tool. Remember that the journey of learning is continuous, so keep exploring, experimenting, and refining your skills. With each project, your understanding of Vue.js will deepen, and your ability to build innovative web applications will grow.

More posts