Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

afoysal's avatar

Add VueJS with Laravel

I am trying to install VueJS with Laravel. My app.js file is like below.

import Vue from 'vue'
window.Vue = Vue;
require('./bootstrap'); 

Vue.component('mosque-component', require('./components/MosqueComponent.vue').default);
Vue.component('prayer-component', require('./components/PrayerComponent.vue').default);
Vue.component('time-component', require('./components/TimeComponent.vue').default);


const app = new Vue({
    el: '#content',
});

I attached VueJS component like below.

@section('content')
    <div>
        <mosque-component />
    </div>
@endsection

I added app.js file like below.

<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>

My package.json file is like below.

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.56.2",
        "sass-loader": "^12.6.0",
        "vue-loader": "^16.8.3"
    },
    "dependencies": {
        "vue": "^3.2.45"
    }
}

I am getting error like this Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default is undefined.

error

0 likes
2 replies
afoysal's avatar

@Sinnbeck Thanks. How can I implement whole thing ? Could you please help me with some initial code ? In which file should I place import { createApp } from 'vue' ? Thanks.

Please or to participate in this conversation.