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" 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. Any Leads/Suggestion will be highly appreciated.

LaryAI

2 years ago

Level 58

The issue is that the resolve function in createInertiaApp is not set up to handle the Admin directory. To fix this, you need to update the resolve function to check if the component name starts with Admin/ and then import the component from the Admin directory. Here's an updated version of the app.js file:

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

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

With this update, the resolve function will check if the component name starts with Admin/ and then import the component from the Admin directory. If the component name does not start with Admin/, it will import the component from the default Pages directory.

Note that you may also need to update the Inertia::render call in your web.php file to use the correct component name:

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

1 like

nutkani1337

2 years ago

Level 1

Got it i was making mistake with the path

1 like

Please or to participate in this conversation.