Laravel Vite Mixing JS Files

Hi All,

I know everyone is new to vite and laravel but if anyone could help with this it would be greatly appreciated!

I have upgraded an existing lararvel project and it has all gone smooth , I just need to mix my resources/js/permissions.js

usually I mix the whole file and can use the functions in blade like this:

 <a onclick="addHubPermissions();">Add</a>

however, I have pulled my files in app.js

import './bootstrap';
import './permissions'

and if I alert in the file it reaches it so it complies fine yet I can't access the functions, I can export the functions individually and it'll work but surely this can't be for every function? EG below

import {addPermission} from './permissions'

window.addPermission = addPermission

export function addHubPermissions() {
    let array = permissions.value.split(",");

    let hubArr = hubPermission.value.split(',')

    hubArr.forEach(id => {
        if (!array.includes(id)) {
            if (permissions.value != "") {
                permissions.value += ',' + id;
            } else {
                permissions.value = id;
            }
        }
    });
    changesReminder.classList.remove('d-none')
    getPermissions();
}

So I feel like my question is how can I export every function all at once so I can access them without having to do an import and setting it in the window for every function?

TIA

Elliot_putt

3 years ago

Best Answer

Level 6

Vite seems like a little bit of a headache seems very similar to stuff I've learnt in Vue solved this problem by either importing all like this and setting it in the window or exporting a class like below too.

in app.js

import { Permissions } from "./permissions";
window.Permission = Permissions;

in the js file permissions

export class Permissions {

 addPermission() {

}

}

in the view

  <a  onclick="Permission.prototype.addPermission()">Add</a>

Please or to participate in this conversation.