I have incorporated a Vue.js based commenting system and inbox messages system in my Laravel website. Additionally, I am utilizing a wysiwyg editor (Froala Editor) in my forms for uploading projects.
The issue I am facing is that the Froala Editor does not work when I include my app.js asset link in my base app.blade.php file.
<script src="{{url("/")}}/assets/bootstrap-5/js/jquery-3.6.1.min.js" data-pagespeed-no-defer ></script>
<script src="{{asset("assets/bootstrap-5/js/popper.min.js")}}" defer></script>
{{--dasbhoard template's app.js--}}
<script src="{{asset("dashboard/dist/js/app.js")}}"></script>
{{-- including Froala scripts files --}}
@include('back.admin.components.froala.footer-scripts-link')
{{-- app.js for Vue app --}}
@vite("resources/js/app.js")
// Additional script tags...
{{--including Froala instance and configuration--}}
@include('back.admin.components.froala.init-and-config')
This is the current placement of my assets links. I have tried moving @vite("resources/js/app.js") up and down to resolve the issue, but the Froala Editor still does not function correctly. Initially, there was an error related to SweetAlert2 used in my Vue.js app, which I resolved. However, now the Froala Editor isn't working without any errors shown in the console. The layout loads fine, but functionality is non-responsive. I have tested each toolbar icon and function, but nothing works as expected. There are no errors displayed in the console upon clicking any editor function. I'm stuck at this point and seeking guidance.
My package.json dependencies object looks like this:
"dependencies": {
// List of dependencies...
},
I have ensured all dependencies are updated to the latest versions using npm update. My Froala Editor version is v4.1.3. Note: I am implementing Froala in blade templates, it is not installed via npm and not utilized in Vue.js components.