Level 60
what version of vue do you have in package.json?
1 like
Dec 13, 2022
15
Level 8
Vue is undefined
My app.js file is like below.
require('./bootstrap');
window.Vue = require('vue').default;
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 added app.js file like below.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="{{ asset('js/app.js') }}" defer></script>
</head>
<body class="footer-offset">
</body>
</html>
I ran npm install, npm install vue and npm run dev. But I am getting below error.
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"
}
}
Level 8
@Sergiu17 Thanks. I updated post with package.json. Please check the post..
Level 102
Are you compiling this with vite or mix? or are the files just in public ?
1 like
Level 8
@Sinnbeck Thanks. I updated post with package.json. I am using mix. Thanks.
Level 102
@afoysal Ok. then use mix to load it :) Any reason you are deferring the loading of it ?
<script type="text/javascript" src="{{ mix('js/app.js') }}" defer></script>
1 like
Level 8
@Sinnbeck Thanks. I am still getting Uncaught TypeError: Vue is undefined error. Thanks
Level 102
@afoysal It is also showing an error regarding chart, but the code shown does not have any mention of chart ? Did you recompile with npm run watch ?
Did you remove "defer" ?
1 like
Level 8
@Sinnbeck Thanks. Now I am getting Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default is undefined. https://i.stack.imgur.com/4wzod.png
Level 102
@afoysal Ok. That might be an issue with how vue is imported. I dont know use it myself, and I always use import over require, so im unsure. I assume this is vue 2 or something ?
1 like
Level 8
@Sinnbeck Thanks. I am using like this.
import Vue from 'vue'
window.Vue = Vue;
require('./bootstrap');
Level 102
@afoysal Ok and its working now or ?
1 like
Level 8
@Sinnbeck Thanks. Should I remove defer ? Thanks.
Level 102
@afoysal Depends one how you are using it. If it works there might not be any need to :) I was just curious
1 like
Level 8
@Sinnbeck Thanks. No it is not working. I am getting Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default is undefined. I tried with removed defer. Thanks.
Level 102
@afoysal Are you sure there is a default export named Vue? What guide are you following ?
as far as I can tell you should import createApp
1 like
Please or to participate in this conversation.