How can I re-initialize vanilla js codes whenever the page load

ahmadzissa commented 10 months ago

Laravel Version: 10.10 PHP Version: 8.1.6 Splade Version: 1.4.16

Description:

I purchased a theme from themeforst, and it uses vanilla js. The js works in the first-page load, but whenever I do any action like clicking on the nav bar or clicking on table pagination, it stops working because the js does not load again when the dom updates.

is there any way to load the js file each time the page loads ( dom change) just like vue js ?

from app.js import "../css/app.css"; import "@protonemedia/laravel-splade/dist/style.css"; import "./app.css"; import './themejs.js' // this is the file I need to reload

jamesj2 commented 10 months ago

I don't know anything about themeforst but are you loading the app.js in the root.blade.php? That files stays in browser and doesn't get reloaded on partial page loads. Also, your routes need to use the Splade middleware.

ahmadzissa commented 10 months ago

I'm loading the theme.js file in resources/js/app.js file

 import "../css/app.css";
import "@protonemedia/laravel-splade/dist/style.css";
 import "./app.css";
 import './themejs.js'

 import VueApexCharts from 'vue-apexcharts' ;

 import { createApp } from "vue/dist/vue.esm-bundler.js";
import { renderSpladeApp, SpladePlugin } from "@protonemedia/laravel-splade";

const el = document.getElementById("app");

createApp({
    render: renderSpladeApp({ el })
})
    .use(SpladePlugin, {
        "max_keep_alive": 10,
        "transform_anchors": false,
        "progress_bar": true
    })
     .mount(el);

I'm using Splade middleware for all routes

Route::middleware(['splade'])->group(function () {

For Root file I have these codes

   @spladeHead
        @vite('resources/js/app.js')
    </head>
    <body class="font-sans antialiased">
        @splade
    </body>

is there any way to make it load with every action like vue js ?

protonemedia / laravel-splade

How can I re-initialize vanilla js codes whenever the page load #532