Update: Separate Vue Chat from Global JS.

resources/js/app.js

@@ -26,21 +26,6 @@ if (token) {
     console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
 }
 
-/**
- * Next, we will create a fresh Vue application instance and attach it to
- * the page. Then, you may begin adding components to this application
- * or customize the JavaScript scaffolding to fit your unique needs.
- */
-import Vue from 'vue';
-import chatbox from './components/chat/Chatbox';
-
-if (document.getElementById('vue')) {
-    new Vue({
-        el: '#vue',
-        components: { chatbox: chatbox },
-    });
-}
-
 /*
  * NPM Packages
  */

resources/js/components/chat/Chatbox.vue

@@ -213,6 +213,7 @@ import ChatMessages from './ChatMessages';
 import ChatForm from './ChatForm';
 import ChatUserList from './ChatUserList';
 import ChatstatusesDropdown from "./ChatstatusesDropdown.vue";
+import axios from "axios"
 
 export default {
   props: {

resources/js/unit3d/chat.js

@@ -4,6 +4,8 @@
  * allows your team to easily build robust real-time web applications.
  */
 import Echo from 'laravel-echo';
+import Vue from 'vue';
+import chatbox from '../components/chat/Chatbox';
 
 window.io = require('socket.io-client');
 
@@ -15,3 +17,9 @@ window.Echo = new Echo({
     transports: ['websocket'],
     enabledTransports: ['wss'],
 });
+
+new Vue({
+    el: '#vue',
+    components: { chatbox: chatbox },
+});
+

resources/views/home/index.blade.php

@@ -4,14 +4,12 @@
 
 @section('main')
     @include('blocks.news')
-
     @if (! auth()->user()->chat_hidden)
         <div id="vue">
-            <script src="{{ mix('js/chat.js') }}" crossorigin="anonymous"></script>
             @include('blocks.chat')
         </div>
+        <script src="{{ mix('js/chat.js') }}" crossorigin="anonymous"></script>
     @endif
-
     @include('blocks.featured')
     @livewire('random-media')
     @include('blocks.poll')