Unable to Resolve Vue Components in Laravel 9 with Vue.js, Inertia, and Custom Admin Directory

I'm using Laravel 9 with vue.js and Inertia. The thing is there is a small issue that I'm facing. In my "resources/js/Pages" directory I have all the vue files. Now what I want to do is create an additional directory for admin users in the "resources/js/Pages/Admin" directory and store all the vue files related to admin users there.

Following is the code of my app.js file:

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import './bootstrap';
import '../css/app.css'; 

createInertiaApp({
  resolve: name =>
   import(`./Pages/${name}.vue`),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

Now I have created the directory in "resources/js/Pages" and named it "Admin". And inside that directory I have created a vue file "Admin_login.vue"the and following is the basic content of it:

<template>
    <h1>Admin Page</h1>
</template>

Now I want to access that file for that I have created the following route into my web.php file

Route::get('/Admin_Login', function () {
    return Inertia::render('Admin/Admin_login');
});

But I can not access the desired page and I don't know where I'm making the mistake.

I have modified the app.js file into the following code, but unfortunately it was not working as well

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import './bootstrap';
import '../css/app.css'; 

createInertiaApp({
  resolve: (name) => {
    if (name.startsWith('Admin_')) {
      const adminName = name.replace(/^Admin_/, 'Admin/');
      return import(`./Pages/${adminName}.vue`);
    }

    return import(`./Pages/${name}.vue`);
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
});

via Chebli Mohamed