Currently working on my first frontend website using Vue and Laravel. I decided to purchase a template from Themeforest which is based on HTML/CSS/JavaScript.
The setup of Vue and Vue Router with Laravel is complete and everything seems to be functioning well. Here is how my app.js file looks:
require('./bootstrap');
import $ from 'jquery';
window.Vue = require('vue');
import VueRouter from 'vue-router';
import routes from './router';
import slider from "./components/slider/index.vue";
import insideheader from "./components/slider/innerheader.vue";
Vue.use(VueRouter);
import App from './components/App.vue';
Vue.component('slider', slider);
Vue.component('insideheader', insideheader);
const router = new VueRouter({
mode: 'history',
routes,
});
Vue.router = router;
const app = new Vue({
el: '#app',
data: {
},
router: router,
render: t => t(App),
});
require('./js/vendor/jquery-library.js')
...
This snippet showcases what my App.vue file consists of:
import Home from "./../components/home.vue";
import About from "./../components/about.vue";
const router = [
{ path: '/', component: Home, name: 'home' },
...
]
export default router;
If I directly navigate to '/home' or '/about' in the browser, everything displays properly. However, when using $router.push to load another Vue file dynamically, some CSS and JavaScript files are not rendering correctly without any errors logged in the console. It seems like the issue might be related to the JavaScript files as the page structure loads fine but the jQuery functions aren't executing as expected.
Any suggestions or assistance would be greatly appreciated.
Thank you in advance for your help!