Vue is not defined/not a constructor

Question

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!

Answer 1

It looks like your initialization code is for Vue 2:

import Vue from 'vue'

let featured = new Vue({
    el: '.featured--vue_js',
    /*...*/
})

But your project has Vue 3 installed, so you should be using Vue 3's createApp():

import { createApp } from 'vue'

let featured = createApp({
    /*...*/
}).mount('.featured--vue_js')