Level 1
Did you figure it out? Same issue here
Jul 1, 2021
2
Level 5
Inertia problem when rendering components
Hi artisans,
Anyone using inertia here?
I'm integrating an HTML theme on my project and it's loading properly on server-side rendering ( when refreshing the page).
When I use inertia link to redirect from one route to another, the template gets messed up and it seems like some JS files are not correctly loading.
when I refresh everything gets back to normal.
Below is webpack.mix.js file
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.combine([
'resources/js/template/jquery.min.js',
'resources/js/template/bootstrap.bundle.min.js',
'resources/js/template/app.min.js',
'resources/js/template/app.init.js',
'resources/js/template/app-style-switcher.js',
'resources/js/template/perfect-scrollbar.jquery.min.js',
'resources/js/template/sparkline.js',
'resources/js/template/waves.js',
'resources/js/template/sidebarmenu.js',
'resources/js/template/feather.min.js',
'resources/js/template/custom.min.js',
], 'public/js/template.js')
.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css');
app. blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
<script src="{{ mix('/js/template.js') }}" defer></script>
<script src="{{ mix('/js/app.js') }}" defer></script>
</head>
<body>
@inertia
</body>
</html>
Layout.vue file
<template>
<div>
<Preloader> </Preloader>
<div id="main-wrapper">
<!-- -------------------------------------------------------------- -->
<!-- Topbar header - style you can find in pages.scss -->
<!-- -------------------------------------------------------------- -->
<Header> </Header>
<!-- -------------------------------------------------------------- -->
<!-- End Topbar header -->
<!-- -------------------------------------------------------------- -->
<!-- -------------------------------------------------------------- -->
<!-- Left Sidebar - style you can find in sidebar.scss -->
<!-- -------------------------------------------------------------- -->
<Aside> </Aside>
<!-- -------------------------------------------------------------- -->
<!-- End Left Sidebar - style you can find in sidebar.scss -->
<!-- -------------------------------------------------------------- -->
<!-- -------------------------------------------------------------- -->
<!-- Page wrapper -->
<!-- -------------------------------------------------------------- -->
<div class="page-wrapper" style="display: block">
<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<slot> </slot>
<!-- -------------------------------------------------------------- -->
<!-- End Container fluid -->
<!-- -------------------------------------------------------------- -->
<!-- -------------------------------------------------------------- -->
<!-- footer -->
<!-- -------------------------------------------------------------- -->
<Footer> </Footer>
<!-- -------------------------------------------------------------- -->
<!-- End footer -->
<!-- -------------------------------------------------------------- -->
</div>
<!-- -------------------------------------------------------------- -->
<!-- End Page wrapper -->
<!-- -------------------------------------------------------------- -->
</div>
</div>
</template>
<script>
import Preloader from "./Preloader.vue";
import Header from "./Header.vue";
import Aside from "./Aside.vue";
import Footer from "./Footer.vue";
export default {
components: {
Preloader,
Header,
Aside,
Footer,
},
// mounted()
// {
// $(".preloader").fadeOut();
// }
};
</script>
What's causing that? ://
Level 5
@gadhoke I had to convert the jquery code to Vue
Please or to participate in this conversation.