I'm struggling to understand why the 'home' component is not defined in my app.js. I attempted to link home.js with app.js by using the following code:
import {home} from "home.js";
However, this resulted in an error message stating "Cannot use import statement outside a module." Should I prioritize resolving this error before moving on to other issues?
Index.html
<!DOCTYPE html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div id="app" class="container">
<h3 class="d-flex justify-content-center">
FrontEnd Test
</h3>
<h5 class="d-flex justify-content-center">
Employee Portal
</h5>
<!-- Navigation links -->
<script src="variables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.4/axios.min.js"></script>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<script src="app.js"></script>
<script src="home.js"></script>
<script src="department.js"></script>
<script src="employee.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
home.js
const home = { template: `<h1>This is the Home Page</h1>` }
app.js
{path:'/home',component:home},
{path:'/employee',component:employee},
{path:'/department',component:department}
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
Any suggestions on why 'home' may not be defined properly?