Is importing Vue different on Laravel 9?

Question

I have an old app in Laravel 5.8 with VueJS 2 components running ok. I am refactoring all the app to Laravel 9, and I'm facing a issue with VueJS.

Laravel exactly version is:

php artisan -v: Laravel Framework 8.83.27

The error is:

Uncaught TypeError: Vue is not a constructor

Let's see some code:

webpack.min.js:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css');

package.json:

"devDependencies": {
        "@popperjs/core": "^2.11.6",
        "@tailwindcss/ui": "^0.3",
        "autoprefixer": "^9.6",
        "axios": "^0.21",
        "bootstrap": "^5.1.3",
        "cross-env": "^7.0.3",
        "laravel-mix": "^6.0.49",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "postcss-import": "^12.0",
        "postcss-nested": "^4.2",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1",
        "tailwindcss": "^1.8",
        "vue": "^2.6.12",
        "vue-loader": "^15.10.1",
        "vue-template-compiler": "^2.6.12"
    },

app.js:

require("./bootstrap");

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



Vue.component("UploadForm", require(".//components/UploadForm.vue"));
Vue.component("ModuloOnze", require(".//components/ModuloOnze.vue"));
Vue.component("Vida", require(".//components/Vida.vue"));
Vue.component("Endereco", require(".//components/Endereco.vue"));
Vue.component("Message", require(".//components/Message.vue"));
Vue.component("Lead", require(".//components/Lead.vue"));
Vue.component("LeadNovo", require(".//components/LeadNovo.vue"));
Vue.component("Atendimento", require(".//components/Atendimento.vue"));
Vue.component("Notification", require(".//components/Notification.vue"));
Vue.component("NotificationItem", require(".//components/NotificationItem.vue"));
Vue.component("Corretores", require(".//components/Corretores.vue"));
Vue.component("GraficoLeads", require(".//components/GraficoLeads.vue"));
Vue.component("chat-app", require(".//components/ChatApp.vue"));

import VueMoment from "vue-moment";
import moment from "moment-timezone";

Vue.use(VueMoment, {
  moment
});

import VCalendar from "v-calendar";
// import "v-calendar/lib/v-calendar.min.css";
Vue.use(VCalendar, {
  firstDayOfWeek: 1 // Set first day of week to Monday
});

// for auto scroll
import VueChatScroll from "vue-chat-scroll";
Vue.use(VueChatScroll);


import VueTheMask from "vue-the-mask";
Vue.use(VueTheMask);

import Toasted from "vue-toasted";
Vue.use(Toasted);

import Editor from "@tinymce/tinymce-vue";
Vue.use(Editor);

var VueScrollTo = require("vue-scrollto");
Vue.use(VueScrollTo);

// import VueGoogleCharts from 'vue-google-charts'
// Vue.use(VueGoogleCharts)

export const bus = new Vue();

home.blade.php:

@section('scripts')
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript"
    src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.16/af-2.2.2/b-1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-1.5.1/b-print-1.5.1/cr-1.4.1/fh-3.1.3/kt-2.3.2/rg-1.0.2/rr-1.2.3/sl-1.2.5/datatables.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment-with-locales.min.js"></script>

{{-- <script type="text/javascript" src="{{ asset('js/moment-with-locales.min.js') }}"></script> --}}
<script>
    let app = new Vue({
        el: '#app',
        data: {
        //
        },
    // methods: {
    //     marcarLido() {
    //         alert('marcarLlido')
    //         axios.get('leadsLidos')
    //     }
    // },
    mounted() {
        var tabela = $('#example').dataTable({
                order: [[1, 'desc']],
                "language": {
                    'url': '//cdn.datatables.net/plug-ins/1.10.16/i18n/Portuguese-Brasil.json'
                },
                'scrollX': true,
                'scrollY': false,
                'autoWidth': true,
                responsive: true,
                processing: true,
                serverSide: true,
                'ajax': '/montaTabela',
                columns: [
                    {data: 'id',
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                            $(nTd).html("<a href='/propostas/"+oData.id+"/edit/'>"+oData.id+"</a>");
                        }
                    },
                    {data: 'user_id'},
                    {data: 'contrato'},
                    {data: 'created_at',
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                            moment.locale('pt-br');
                            var data = oData.created_at;
                            let criado = moment(data, "DD/MM/YYYY H:i:s").fromNow();
                                $(nTd).html(criado);
                        }
                    },
                    {data: 'updated_at',
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                            moment.locale('pt-br');
                            var data = oData.updated_at;
                            let atualizado = moment(data, "DD/MM/YYYY H:i:s").fromNow();
                                $(nTd).html(atualizado);
                        }
                    },
                    {data: 'arquivo',
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {

                            if(oData.arquivo == 0) {

                                $(nTd).html("<span class='badge badge-pill badge-secondary'>Legado</span>");
                            }
                            else if(oData.arquivo == 1) {
                                $(nTd).html("<span class='badge badge-pill badge-info'>Nova</span>");
                            }
                        }
                    },
                    {data: 'fechada',
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                            if(oData.status_id == 0) {
                                $(nTd).html("<span class='badge badge-pill badge-warning'>Em andamento</span>");
                            }
                            if(oData.status_id == 1) {
                                $(nTd).html("<span class='badge badge-pill badge-primary'>Cadastrada</span>");
                            }
                            if (oData.status_id == 2) {
                                $(nTd).html("<span class='badge badge-pill badge-success'>Entregue</span>");
                            }
                            if (oData.status_id == 3) {
                                $(nTd).html("<span class='badge badge-pill badge-info'>Implantanda</span>");
                            }
                            if (oData.status_id == 4) {
                                $(nTd).html("<span class='badge badge-pill badge-danger'>Cancelada</span>");
                            }
                        }
                    }
                ]
            });
    }
});
</script>
@endsection

The laravel-mix v6.0.49 runs good till the end, with no errors, but when the page loads, that error described above, appears.

Any thoughts?

Trying to make VueJS from Laravel 5.8 works on Laravel 9 as well

Answer 1

Solved. Installed a new fresh Laravel 9 app and started to use ViteJS