Vue Compiles but shows Blank Pages with Background colour only with no console error or JS error

Question

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      comment: ''
    };
  },
  methods: {
    submitComment() {
      const commentData = {
        username: this.username,
        comment: this.comment
      };


      // This sends the data to the server
      axios.post('/api/comments', commentData)
        .then(response => {
          console.log(response.data);
          alert('Comment submitted!');

          // This clears the input fields 
          this.username = '';
          this.comment = '';
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>


<template>
  <div class="background">
    <div>
      <div class="container">
        <div class="link">
          <a href="/score">
            <button class="scoreboard-button">Check the ScoreBoard Here</button>
          </a>
        </div>
      </div>

      <div class="picture">
        <img src="https://cdn.discordapp.com/attachments/758287762641387551/1118967731761455215/My_project.png" class="logo">
      </div>

      <div class="box">
        <h2 class="box-title">Type your comments here</h2>
        
        <div>
          <input type="text" v-model="username" placeholder="Username">
          <textarea v-model="comment" placeholder="Enter your comment"></textarea>
          <button @click="submitComment">Submit</button>
        </div>
      </div>
    </div>
  </div>

</template>



<style>

.background {
  background-color: #007bff;
}

.box {
  width: 400px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f2f2f2;
  border-radius: 5px;
}

.box-title {
  text-align: center;
  margin-top: 0;
  color: #333;
}

.box input[type="text"],
.box textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  resize: vertical;
}

.box button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.box button:hover {
  background-color: #45a049;
}

.container {
  text-align: center;
}

.link {
  margin-top: 20px;
}

.scoreboard-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.picture {
  text-align: center;
  margin-top: 20px;
}

.logo {
  width: 200px;
  height: auto;
}
</style>

<script>
import axios from 'axios';
import APIRequest from '../components/APIRequest.vue';

export default {
  components: {
    APIRequest
  },
  data() {
    return {
      users: []
    };
  },
  mounted() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      axios.get('http://localhost:3001/comment')
        .then(response => {
          this.users = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>


<template>
  <div>
    <a href="/comment">
      <button class= "Comment-button">Enter your comment here</button>
    </a>

    <div class="content">
      <table>
        <tr>
          <th>Ranking</th>
          <th>User Name</th>
          <th>Score</th>
        </tr>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.user_rank }}</td>
          <td>{{ user.username }}</td>
          <td>{{ user.score }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>


<style> 
body {
  background-color: royalblue ;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

h1 {
  text-align: center;
  margin-top: 20px;
  color: black;
}

th,
td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid wheat;
}

th {
  background-color: grey;
  color: black;
}


tr:nth-child(even) {
  background-color: plum;
  color: black;
}


tr.highlight:nth-child(even) {
  background-color: gold; 
}

tr:hover {
  background-color: dimgray;
}

td:first-child {
  font-weight: bold;
}

.comment-button {
  display: block;
  margin: 20px auto;
  padding: 15px 30px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  transition: background-color 0.3s ease;
}

.comment-button:hover {
  background-color: #0056b3;
}
</style>

When I run npm run dev, it gave me a blank page with the background colour I inputted in only with no console error or JS syntax error. For the router setup, I have router.js and Main.js to link my Vue frontend to the Django backend. I don't think it has anything to do with my backend.

I tried to run npm run dev and my webpage did not show up. I also tried to run npm run build and no errors showed up. I expected my 2 of my webpage (Comment.vue and Score.vue) but the first one didn't even show up. The first code above is Comment.vue and the second code is Score.vue . This first one below is router.js and the second one is Main.js .

import { createRouter, createWebHistory } from 'vue-router';
import Comment from '../views/Comment.vue';
import Score from '../views/Score.vue';

const routes = [
  {
    path: '/comment',
    name: 'Comment',
    component: Comment
  },
  {
    path: '/score',
    name: 'Score',
    component: Score
  },
  {
    path: '/',
    redirect: '/comment'
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

import { createApp } from 'vue';
import App from './App.vue'
import router from './router/router';


const app = createApp(Appment);
app.use(router);
app.mount('#app');