Project Setup
Cleaning up default files
We created our vue-countdown project a previous lesson. This contained some starter code and default files:
vue-countdown/
├── node_modules/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ │ ├── icons/
│ │ ├── HelloWorld.vue
│ │ ├── TheWelcome.vue
│ │ └── WelcomeItem.vue
│ ├── App.vue
│ └── main.js
├── .gitignore
├── index.html
├── package.json
├── package-lock.json
├── README.md
├── vite.config.js
└── jsconfig.json
Clean up the project by removing all files and folders from inside the components folder, your components folder should now be empty:
vue-countdown/
├── node_modules/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ ├── App.vue
│ └── main.js
...
And start the development server using:
npm run dev
This will cause errors to appear in the browser since we are still trying to import these files in the App.vue. Clean up this file to remove any references to the removed files:
<script setup></script>
<template>
<h1>Vue Countdown</h1>
</template>
<style scoped></style>
Remove the default stylesheet files from inside the assets folder:
├── src/ │ ├── assets/
And remove the import './assets/main.css' line from the main.js file, leaving the following:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
Also, update the <title> of the app inside the index.html:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Countdown</title>
Remember, this index.html file is the HTML entry point containing a minimum HTML structure, the Vue.js application is bundled and injected into the #app section:
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
Adding event data
We also need some event data to work with, in the App.vue add an array of objects (commented out for now):
<script setup>
// const eventData = [
// {
// id: 1,
// name: "Graduation",
// details: "wooohoo!!!",
// date: "2023-09-25",
// background: "#F34949",
// },
// {
// id: 2,
// name: "Holidays",
// details: "wooohoo!!!",
// date: "2026-12-30",
// background: "#f9f970",
// },
// {
// id: 3,
// name: "HolidayYYYY",
// details: "Get me outta here!",
// date: "2028-09-12",
// background: "#7AD3F0",
// },
// {
// id: 4,
// name: "Birthday",
// details: "My birthday party",
// date: "2030-10-02",
// background: "#F07AEC",
// },
// {
// id: 5,
// name: "Christmas",
// details: "ho ho ho",
// date: "2025-03-5",
// background: "#EB9A0F",
// },
// {
// id: 6,
// name: "Conference Talk",
// details: "dont flop",
// date: "2024-02-28",
// background: "#68EE94",
// },
// ];
</script>
This will give us a good starting point and we will soon create, update, and remove these directly from our project.
You can also change any of these with the information you want to use, also change the dates so some are in the future, and some have expired, this will be useful later in the project.