I've exhausted all efforts to resolve the file paths for Home and App. I even turned to AI to help me out, but still no luck.
Code snippet from main.js in the src folder:
import Home from '@views/Home.vue'; // Using alias import App from '@src/App.vue'; // Using alias
More code from index.js in the router folder:
import Home from '@views/Home.vue'; import App from '@src/App.vue';
Snippet from App.vue:
<template> <div id="app"> </div> </template> <script> export default { name: 'App', }; </script> <style> </style>
And here's a piece of Home.vue:
<template> <div class="flex justify-center items-center h-screen "> <div class="bg-white p-10 rounded-lg shadow-lg"> <h2 class="text-2xl mb-4">Sign in</h2> <form class="flex flex-col space-y-4"> <input type="email" placeholder="Email" class="border p-2" /> <button class="bg-blue-500 text-white p-2 rounded">Send Code</button> </form> </div> </div> </template> <script> export default { name: 'Home', }; </script> <style scoped> </style>
Despite trying everything under the sun, including relying on AI, I'm unable to figure out what's causing the issue in this fresh project. There doesn't seem to be much to troubleshoot at this point.