Upgrading Vue 2 to 3 with Laravel/Blade components not working - how to?

Has anyone done this? I have a Laravel + Vue 2 projects set up in the typical Laravel way: app.js:

import Vue from 'vue';
Vue.component('lists-page', require('./components/pages/ListsPage.vue').default);
Vue.component('sidebar-list', require('./components/SidebarList.vue').default);
const app = new Vue({
    el: '#app'
});

Then in Blade files I just use:

	<lists-page :lists="{{$lists}}"></lists-page>

And that is basically it.

But in Vue 3 things have changed. Following various guides I have tried this:

import { createApp } from "vue";
const app = createApp()
app.component('lists-page', require('./components/pages/ListsPage.vue').default);
app.mount("#app");

I have updated all other Vue packages to Vue 3, and fixed any build or console errors due to syntax changes etc. There's no errors in the page, but it is not rendering: instead I just have a red printout of what looks like a debug log wherever a component is on my page, like this:

			@http://lists.test/js/app.js?id=bcc40402fff147ed18d53120f5e17727:35514:19
			renderFnWithContext@http://lists.test/js/app.js?id=bcc40402fff147ed18d53120f5e17727:22980:23
			@http://lists.test/js/app.js?id etc etc

Screenshot

Does anyone have any ideas? How did you upgrade your projects to work like this with Vue 3? Thank you!

vincent15000

3 years ago

Level 63

Which version of Laravel are you using for this project ?

Do you have webpack or vite ?

samiles

3 years ago

Level 1

@vincent15000 Laravel 9 latest, and web pack. It was originally created as a Laravel 8 project and upgraded.

1 like

vincent15000

3 years ago

Level 63

@samiles The way to create and declare a VueJS app in Laravel is different between VueJS 2 and VueJS 3.

Here is an example of what I have done.

UPDATED => sorry I think I have shown for VueJS 2, I will check and come back.

require('./bootstrap')

window.axios = require('axios')
window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest',
    'X-Csrf-Token': document.querySelector('meta[name="csrf-token"]').content
}

window.Vue = require('vue')

import axios from 'axios'
import Vue from 'vue'
import VueAxios from 'vue-axios'
import VueMoment from 'vue-moment'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
import Vuelidate from 'vuelidate'

Vue.use(Buefy)

Vue.use(VueAxios, axios)

window.moment = require('moment')
require('moment/locale/fr')
Vue.use(VueMoment, {
	moment
})

Vue.use(Vuelidate)

import store from "./store/index"

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

geerizzle

3 years ago

Level 2

Did you manage to resolve this I'm facing the same issue?

Please or to participate in this conversation.