Whenever I run the Vue app using npm run serve in my command line interface, a blank page is displayed instead of the expected login view. The reason behind this issue baffles me
This file pertains to the SignUp view
<template>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-10 col-md-8 offset-sm-1 offset-md-2">
<div id="signUp" class="mt-5">
<form class="border border-primary rounded form-inline" @submit="signUp">
<h2 class="col-12 text-center text-primary mt-3 mb-5">Sign Up</h2>
<!-- Form fields for sign up -->
</form>
</div>
</div>
</div>
</div>
</template>
<script>
// JavaScript content related to sign up
</script>
<style scoped>
// Styling specific to this component
</style>
The following files are part of the src directory.
Main.js
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false;
// Vue instance creation
router.js
import Router from 'vue-router'
import SignUp from "./views/SignUp";
Vue.use(Router);
// Vue router setup
store.js
import Vuex from 'vuex'
Vue.use(Vuex);
// Vuex store configuration
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<style>
// Global styles
</style>
I have attempted to include the node_modules file in my project and investigate why this issue occurs in Vue, but the root cause remains elusive.