JackJones's avatar

How to bundle files together and have just one entry point?

I'm talking to ChatGPT and need direction

I currently have a separate file for loads of views, I have a basic Vue config file:

import { createApp } from 'vue/dist/vue.esm-bundler'
import { createPinia } from 'pinia'
import Vue3Toastify, { toast } from 'vue3-toastify'
import 'vue3-toastify/dist/index.css'

const pinia = createPinia()

export default function vueConfig() {
    const app = createApp()

    app.use(pinia)
        .use(Vue3Toastify, {
            autoClose: 543000,
            position: toast.POSITION.BOTTOM_RIGHT,
            style: {
                fontSize: '0.75rem',
                minWidth: '320px',
                width: 'auto',
            },
        })

    return { app }
}

and then I load a component for example for my Users Index:

import '../app.js';
import UsersIndex from '../components/UsersIndex.vue'
import vueConfig from '../vue-config.js'

const { app } = vueConfig()

app.component('UsersIndex', UsersIndex)
    .mount('#app')

and then in the view have:

@section('javascript')
    @parent

    @vite(['resources/js/app/users-index.js'])
@endsection

and my JS looks like:

@vite([
    'resources/js/app/sidebar.js',
    'resources/js/app/navbar.js',
    'resources/js/app/storage.js',
])

@yield('javascript')

@if(session()->has('success') || count($errors))
    @vite(['resources/js/flash.js'])
@endif

This is obviously the wrong way to do it, ChatGPT is telling me client is being loaded 3 times, so I'm doing something wrong, the AI suggested doing this but I don't know if it's talking sense or not, sometimes it does, sometimes it's insane

// resources/js/app/main.js
import { initSidebar } from './sidebar';
import { initNavbar } from './navbar';
import { initStorage } from './storage';
import { initUsersIndex } from './usersIndex';

document.addEventListener('DOMContentLoaded', () => {
    const pageType = document.body.dataset.page; // Use a data attribute to identify the page

    switch (pageType) {
        case 'users-index':
            initUsersIndex();
            break;
        case 'dashboard':
            // initDashboard();
            break;
        // Add more cases for other pages as needed
        default:
            initNavbar();
            initSidebar();
            break;
    }
});


<body data-page="users-index">
    <div id="app"></div>
    <!-- Other content -->
</body>

I don't even know what to Google, I don't know the terms for what I'm trying to accomplish

Can anyone help please?

0 likes
1 reply

Please or to participate in this conversation.