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
