InertiaJS with VueJS conflict with jQuery

167
April 20, 2021, at 06:00 AM

So, I have this inertiaJS & VueJS app am creating, the backend is in Laravel. At the start, the app is working fine, but once you navigate to another page say log in, Jquery just fails without any error message and everything becomes deformed, even when I navigate back it doesn't work. I have uploaded a video of how it's behaving on YouTube (1080P) in case you want to see it.

Here is the entry page

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="mb-0 pb-0">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>{{ config('app.name', 'E-Traveller') }}</title>
        <!-- Fonts -->
        <link rel="stylesheet" href="{{ asset('fonts/assets/font/iconsmind-s/css/iconsminds.css') }}">
        <link rel="stylesheet" href="{{ asset('fonts/assets/font/simple-line-icons/css/simple-line-icons.css') }}">
        <!-- Styles -->
        <link rel="stylesheet" href="{{ asset('css/assets/css/vendor/bootstrap-stars.css') }}">
        <link rel="stylesheet" href="{{ asset('css/assets/css/vendor/bootstrap.min.css') }}">
        <link rel="stylesheet" href="{{ asset('css/assets/css/vendor/owl.carousel.min.css') }}">
        <link rel="stylesheet" href="{{ asset('css/assets/css/vendor/bootstrap-stars.css') }}">
        <link rel="stylesheet" href="{{ asset('css/assets/css/dore.light.bluenavy.min.css') }}">
        <link rel="stylesheet" href="{{ asset('css/assets/css/main.css') }}">
        <link rel="stylesheet" href="{{ mix('css/app.css') }}">
        <!-- Scripts -->
        @routes
        <script src="{{ asset('js/assets/js/vendor/jquery-3.3.1.min.js') }}" defer></script>
        <script src="{{ asset('js/assets/js/vendor/bootstrap.bundle.min.js') }}" defer></script>
        <script src="{{ asset('js/assets/js/vendor/owl.carousel.min.js') }}" defer></script>
        <script src="{{ asset('js/assets/js/vendor/jquery.barrating.min.js') }}" defer></script>
        <script src="{{ asset('js/assets/js/vendor/landing-page/headroom.min.js') }}" defer></script>
        <script src="{{ asset('js/assets/js/vendor/landing-page/jQuery.headroom.js') }}" defer></script>
        <script src="{{ asset('js/assets/js/vendor/landing-page/jquery.scrollTo.min.js') }}" defer></script>
        <script src="{{ asset('js/assets/js/vendor/landing-page/jquery.autoellipsis.js') }}" defer></script>
        <script src="{{ asset('js/assets/js/dore.scripts.landingpage.js') }}" defer></script>
        <script src="{{ asset('js/assets/js/scripts.js') }}" defer></script>
        <script src="{{ mix('js/app.js') }}" defer></script>
    </head>
    <body class="font-sans antialiased mb-0 pb-0">
        @inertia
    </body>
</html>

Here is the app.js file

require('./bootstrap');

// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
const el = document.getElementById('app');
createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin)
    .mount(el);
InertiaProgress.init({ color: '#00ff00', showSpinner: true });

Here is the SiteLayout file

<template name="">
    <div class="landing-page mb-0">
<!--        Mobile Menu-->
        <mobile-menu></mobile-menu>
        <div class="main-container">
<!--            Landing Page nav-->
            <landing-nav></landing-nav>
            <slot>
<!--                Site content goes here-->
            </slot>
<!--            Site Footer-->
            <site-footer></site-footer>
        </div>
    </div>
</template>
<script>
    import MobileMenu from "@/Components/Site/MobileMenu";
    import LandingNav from "@/Components/Site/LandingNav";
    import SiteFooter from "@/Components/Site/SiteFooter";
    export default {
        components: {
            MobileMenu,
            LandingNav,
            SiteFooter,
        }
    }
</script>
<style scoped>
</style>

Here is the homepage (Index.vue) file (a lot of stuff there are irrelevant but I am posting all just incase)

<template>
    <site-layout>
        <div class="content-container mb-0" id="home">
            <div class="section home">
                <div class="container">
                    <div class="row home-row">
                        <div class="col-12 d-block d-md-none">
                            <a target="_blank" href="/Dashboard.Default.html">
                                <img alt="mobile hero" class="mobile-hero"
                                     src="images/assets/img/landing-page/home-hero-mobile.png"/>
                            </a>
                        </div>
                        <div class="col-12 col-xl-4 col-lg-5 col-md-6">
                            <div class="home-text">
                                <div class="display-1">Book a ticket quickly!</div>
                                <p class="white mb-2">
                                    Where <strong>To</strong>?
                                </p>
                                <a class="btn btn-secondary btn-xl mr-2 mb-2" target="_blank"
                                   href="/Dashboard.Default.html">VIEW NOW <i
                                    class="simple-icon-arrow-right"></i></a>
                            </div>
                        </div>
                        <div class="col-12 col-xl-7 offset-xl-1 col-lg-7 col-md-6  d-none d-md-block">
                            <a target="_blank" href="/Dashboard.Default.html">
                                <img alt="hero" src="images/assets/img/landing-page/home-hero.png"/>
                            </a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 p-0">
                            <div class="owl-container">
                                <div class="owl-carousel home-carousel">
                                    <div class="card">
                                        <div class="card-body text-center">
                                            <div>
                                                <i class="iconsminds-mouse-3 large-icon"></i>
                                                <h5 class="mb-3 font-weight-semibold">
                                                    Right Click Menu
                                                </h5>
                                            </div>
                                            <div>
                                                <p class="detail-text">
                                                    Increases overall usability of the project by providing
                                                    additional actions menu.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card">
                                        <div class="card-body text-center">
                                            <div>
                                                <i class="iconsminds-electric-guitar large-icon"></i>
                                                <h5 class="mb-3 font-weight-semibold">
                                                    Video Player
                                                </h5>
                                            </div>
                                            <div>
                                                <p class="detail-text">
                                                    Carefully themed multimedia players powered by Video.js library
                                                    with Youtube support.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card">
                                        <div class="card-body text-center">
                                            <div>
                                                <i class="iconsminds-keyboard large-icon"></i>
                                                <h5 class="mb-3 font-weight-semibold">
                                                    Keyboard Shortcuts
                                                </h5>
                                            </div>
                                            <div>
                                                <p class="detail-text">
                                                    Easily configurable keyboard shortcuts plugin that highly
                                                    improves user experience.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card">
                                        <div class="card-body text-center">
                                            <div>
                                                <i class="iconsminds-three-arrow-fork large-icon"></i>
                                                <h5 class="mb-3 font-weight-semibold">
                                                    Two Panels Menu
                                                </h5>
                                            </div>
                                            <div>
                                                <p class="detail-text">
                                                    Three states two panels icon menu that looks good, auto resizes
                                                    and does the job well.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card">
                                        <div class="card-body text-center">
                                            <div>
                                                <i class="iconsminds-deer large-icon"></i>
                                                <h5 class="mb-3 font-weight-semibold">
                                                    Icons Mind
                                                </h5>
                                            </div>
                                            <div>
                                                <p class="detail-text">
                                                    1040 icons in 53 different categories, designed pixel perfect
                                                    and ready for your project.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card">
                                        <div class="card-body text-center">
                                            <div>
                                                <i class="iconsminds-palette large-icon"></i>
                                                <h5 class="mb-3 font-weight-semibold">
                                                    20 Color Schemes
                                                </h5>
                                            </div>
                                            <div>
                                                <p class="detail-text">
                                                    Colors, icons and design harmony that creates excellent themes
                                                    to cover entire project.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card">
                                        <div class="card-body text-center">
                                            <div>
                                                <i class="iconsminds-air-balloon-1 large-icon"></i>
                                                <h5 class="mb-3 font-weight-semibold">
                                                    4 Applications
                                                </h5>
                                            </div>
                                            <div>
                                                <p class="detail-text">
                                                    Applications that mostly made of components are the way to get
                                                    started to create something
                                                    similar.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card">
                                        <div class="card-body text-center">
                                            <div>
                                                <i class="iconsminds-resize large-icon"></i>
                                                <h5 class="mb-3 font-weight-semibold">
                                                    Extra Responsive
                                                </h5>
                                            </div>
                                            <div>
                                                <p class="detail-text">
                                                    Custom Bootstrap 4 xxs & xxl classes delivers better experiences
                                                    for smaller and larger
                                                    screens.
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <a class="btn btn-circle btn-outline-semi-light hero-circle-button scrollTo"
                           href="#features"
                           id="homeCircleButton"><i class="simple-icon-arrow-down"></i></a>
                    </div>
                </div>
            </div>
            
<!--            Alot of other DIVs here, not affected-->

        </div>
    </site-layout>

</template>
<style scoped>
</style>
<script>
    import SiteLayout from '@/Layouts/SiteLayout'
    export default {
        components: {
            SiteLayout,
        },
        props: {
            canLogin: Boolean,
            canRegister: Boolean,
            laravelVersion: String,
            phpVersion: String,
        }
    }
</script>

Then finally, here is the Login.vue page

<template>
    <site-layout>
        <div class="content-container mb-0" id="home">
            <div class="section home">
                <div class="container">
                    <div class="row home-row">
                        <div class="col-12">
                            <div class="display-1">
                                Login here
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </site-layout>
</template>
<script>
    import JetValidationErrors from '@/Jetstream/ValidationErrors';
    import SiteLayout from "@/Layouts/SiteLayout";

    export default {
        components: {
            JetValidationErrors,
            SiteLayout
        },
        
    }
</script>

Now when I navigate to home (/), inertia will return the Index.vue component and render it using the Intertia::render method. Here:

Route::get('/', function () {
    return Inertia::render('Site/Index', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
})->name('site.index');

How can I solve this problem with JS? is the problem with InertiaJS or is it with jQuery or is it just the way I have structured my files?

Regards, John Ngondi

Rent Charter Buses Company
READ ALSO
How to create responsive layouts with Jetpack Compose?

How to create responsive layouts with Jetpack Compose?

In the traditional view system, I handled responsiveness by using bias/guidelines/weights/wrap_content/avoiding hard coding dimensions/placing views relative to each other in Constraint Layout, using 'sdp' and 'ssp' etc

182
Calculate percentage difference between columns [closed]

Calculate percentage difference between columns [closed]

Want to improve this question? Add details and clarify the problem by editing this post

120
How to track Google Ads conversions from Whatsapp

How to track Google Ads conversions from Whatsapp

How to track Google Ads conversions from Whatsapp on HTML landing page

149
Circular Reference on PHP

Circular Reference on PHP

I have calculation like this

122