How to connect scripts?

Good afternoon! I created a project on pure view, connected styles and scripts from the template, everything works fine

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="src/assets/css/app.min.css">
</head>

<body>
<div id="app"></div>

<script src="src/assets/js/main.min.js"></script>

<script type="module" src="/src/app.js"></script>
</body>

</html>

But since the project is small, I decided to write on using inertiajs. I ran into a problem. Styles are connected, but scripts are not connected. Can anyone help me?

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title inertia>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Scripts -->
        @routes
        @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
        @inertiaHead
    </head>
    <body class="font-sans antialiased">
        @inertia
        <script src="../js/main.min.js"></script>
    </body>
</html>

import './bootstrap';
import '../css/app.min.css';
import './main.min.js';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
});

InertiaProgress.init({ color: '#4B5563' });

I need to include a script main.min.js

Sinnbeck

3 years ago

Level 102

What is in that main.min.js file and what is it needed for

Yablochnyi

3 years ago

Level 1

@Sinnbeck there are scripts for calling modal windows and slides. It's just that on normal vue everything is connected and working. And on inertia I can not connect

Sinnbeck

3 years ago

Level 102

@Yablochnyi then you should probably export it in that file and import it in app.js

Yablochnyi

3 years ago

Level 1

@Sinnbeck Here is my app.js i did the import but it doesn't work. Am I doing something wrong?

import './bootstrap';
import '../css/app.min.css';
import './main.min.js';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
});

InertiaProgress.init({ color: '#4B5563' });

Sinnbeck

3 years ago

Level 102

@Yablochnyi I have no way of knowing. I don't know the contents of the file or how you expect it should work

Please or to participate in this conversation.