Admin template is not working into the laravel ,vue with inertia?

Styles are breaking and vanilla js files any of them are not working properly. My app.js file

import "./bootstrap";
import "../css/app.css";
import "summernote/dist/summernote-lite.css";
// app.js
// Vendor JS
import './assets/js/jquery-3.6.0.min.js';
// import './assets/js/aos.js';
import './assets/js/slick.min.js';
import './assets/js/quill.min.js';
import './assets/js/main.js';
import './assets/js/chart.js';

// Init libraries if needed
// AOS.init();

import VueSplide from "@splidejs/vue-splide";
import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/vue3";

import AdminLayout from "./Pages/Layouts/AdminLayout.vue";
import AppLayout from "./Pages/Layouts/AppLayout.vue";

createInertiaApp({
    resolve: async (name) => {
        const pages = import.meta.glob("./Pages/**/*.vue"); // dynamic imports

        // Lazy load only when needed (code splitting)
        const module = await pages[`./Pages/${name}.vue`]();

        const page = module.default;

        // Allow page to define its own layout
        // If not set, apply default (AdminLayout / AppLayout)
        if (!page.layout) {
            page.layout =  name.startsWith("Auth/") ? '' :  name.startsWith("Admin/") ? AdminLayout : AppLayout;
        }

        return page;
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(VueSplide)
            .mount(el);
    },
});

my vite.config

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import laravel from "laravel-vite-plugin";
import path from "path";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
    plugins: [
        laravel({
            input: [
                "resources/css/app.css", // Tailwind + custom CSS entry
                "resources/js/app.js",   // Main JS entry
            ],
            refresh: true,
        }),
        tailwindcss(),
        vue(),
    ],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "resources/js"),
            "@/components": path.resolve(__dirname, "resources/js/components"),
        },
    },
});

my app.blade.php file

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>BanCo - Dashboard</title>
        @vite(['resources/js/app.js',''])


        @inertiaHead
    </head>
    <body>
        <!-- layout start -->
        @inertia

        <!-- layout end -->


    </body>

    </html>

my ap.css

@import 'tailwindcss';
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
  --color-red-800: #F7FAFC;
  --color-gray: #e7edf3;
  --color-sidebar: #fafafa;
  --color-navbar: #2C3E50;
  --color-button: #FF7043;
  --color-button-hover: #F4511E;
  --color-black: #263238;
  --color-accent: #FFD54F;
  --color-primary: #f5f5f5;
}

/* If you want external CSS libraries (like slick.css, aos.css) */
@import "../js/assets/css/slick.css";
@import "../js/assets/css/aos.css";
@import "../js/assets/css/output.css";
@import "../js/assets/css/style.css";

vincent15000

7 months ago

Level 63

The name of the page never starts with Auth/, here you include a part of the path.

For example for Auth/UsersPage.vue, the name is UsersPage.

Furthermore it would be more secure to load by default not the AdminLayout, but the AppLayout. I never load any admin informations except if I am sure that an admin is logged in.

Shivamyadav

7 months ago

Level 20

Sorry for that. Thanks for pointing out, K will update it and thanks once again

1 like

malinda7

7 months ago

Level 1

Hey! I ran into the same issue before. the problem usually comes from the admin template’s javascript not initializing properly with inertia.js. A simple fix is to make sure your template’s js runs after inertia mounts the app. you can do this by calling your template’s initialization function inside the setup of createInertiaapp or in a DOMContentLoaded listener. That usually gets everything working.

1 like

Shivamyadav

7 months ago

Level 20

Could you please give an example how you have done with your code.

1 like

vincent15000

7 months ago

Level 63

I think that if you were right, the problem would be the same with the app layout.

Please or to participate in this conversation.