Hi so I know there are a few questions already related, if not, exactly the same but for some reason none of those answers have worked for me, so I am asking this based on my specific scenario.
I've been using laravel-mix and vuejs for a few months now and just to give you a background I am very new to using webpack or bundlers. I started using laravel-mix because it was required for a project and since then I've been using it even on solo projects. Now that I'm using the new version of laravel-mix and vuejs, I can't seem to make vuejs work!
Let me first show you my webpack.mix.js:
const mix = require("laravel-mix")
mix.js('src/javascript/app.js', 'assets').extract(['vue', 'vue-lazysizes', 'flickity', 'axios'])
.vue()
.sass('src/style/app.scss', 'assets')
.options({
postCss: [require('tailwindcss')]
})
And this is my package.json:
{
"name": "name",
"version": "1.0.0",
"description": "",
"main": "webpack.mix.js",
"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"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@vue/compiler-sfc": "^3.0.11",
"autoprefixer": "^10.2.5",
"laravel-mix": "^6.0.13",
"lato-font": "^3.0.0",
"postcss": "^8.2.8",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.8",
"sass-loader": "^10.1.1",
"tailwindcss": "^2.0.3",
"vue-compiler": "^4.2.1",
"vue-loader": "^15.9.5",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"axios": "^0.21.1",
"flickity": "^2.2.2",
"lazysizes": "^5.3.0",
"vue": "^3.0.11",
"vue-lazysizes": "^1.0.5"
}
}
And this is what my app.js looks like:
import Vue from "vue";
import axios from 'axios';
import Flickity from 'flickity';
import vueLazysizes from 'vue-lazysizes';
export default {
directives: {
lazysizes: vueLazysizes
}
}
// window.Vue = Vue;
window.Flickity = Flickity;
window.axios = axios;
require("./modules/_global")
require("./modules/_index")
And this is my first Vue object:
let featured = new Vue({
el: '.featured--vue_js',
delimiters: ['${','}'],
data: {
loadingAnimation: true,
requestComplete: false
},
created(){
this.requestData()
},
methods: {
requestData(){
console.log(this)
}
}
})
Now here's the problem, every time I uncomment window.Vue = Vue; to declare Vue as a global object, I get an error of Uncaught TypeError: Vue is not a constructor.
Now I've tried removing it and it gives me the error of Uncaught ReferenceError: Vue is not defined.
If I try window.Vue = require('vue'); it gives me Uncaught TypeError: Vue is not a constructor again.
If I try declaring just before my Vue object const Vue = require('vue'); it still gives me Uncaught TypeError: Vue is not a constructor
And I've been doing this all night long and I don't understand why it's not working, so I really need help now because I am going to build quite a lot of functions using Vue and if I can't make it work it's really gonna be bad for me.
So thank you very much! Please don't instantly flag this as a duplicate because no answers have been working for me. Thank you for those who will answer!
