How to add other js file in Inertia App?

This is my app.blade.php file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
    <link rel="stylesheet" type="text/css" href="/css/plugins.css">
    @inertiaHead
  </head>
  <body>
    @inertia
    <script src="js/plugins.js"></script>
    <script src="js/scripts.js"></script>
  </body>
</html>

vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/sass/app.scss', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

and app.js:

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { InertiaProgress } from '@inertiajs/progress';
 
createInertiaApp({
  resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
});

InertiaProgress.init({showSpinner: true,});

Everything works fine but because my template is a Bootstrap based template it needs two more javascript files to work properly. I loaded both file before ending close tag of body inside app.blade.php file but scripts related to template won't work and there is no error to debug. I think Vuejs won't let other javascript work as it should.

tykus

3 years ago

Level 104

https://creagia.com/blog/using-laravel-vite-with-bootstrap-and-sass

Please or to participate in this conversation.