Load necessary scripts when needed

I have a Inertia/VueJs project with a Bootstrap template, the template has a JavaScript file that handles template's functionality. I loaded the file like this (template.js):

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
            import ('./template.js');
    },
    progress: {
        color: '#4B5563',
    },
});

and it works fine but because my app is an admin panel and user should login first, the script breaks because in login page we don't have all necessary HTML tags. I want to run necessary scripts on main layout not login page.

azimidev

3 years ago

Level 55

You can add a condition to only run the script on the pages that have the necessary HTML tags. check for the existence of a specific element on the page and only run the script if that element is present.

if (document.getElementById('navigation-menu')) {
    import ('./template.js');
}

This way, the script would only run if the element with the ID 'navigation-menu' is present on the page, ensuring that it won't break on the login page.

Armani

3 years ago

Level 17

@azimidev At first I thought the same way but because Inertia won't work like this, it just load a part of page. it is not like full reload that's why when user land on login page and tried to login, everything loaded and after that assets won't load again.

Please or to participate in this conversation.