Summer Sale! All accounts are 50% off this week.

CalElAn's avatar

How do I use Vue 3 in Laravel without importing 'createApp' in every js file that has a Vue app instance

I am working on a website that was built with Laravel and I am building some of the forms using Vue 3. The site has 3 custom forms across different pages. That means that there are 3 different js files required across 3 different pages which contain a Vue App instance each. Currently, I am doing:

import { createApp } from "vue";

in every js file that contains a Vue instance. This increases the size of the js files

In order to avoid repeating the above statement across all the 3 js files, what I tried to do was:

import { createApp } from "vue";
window.createApp = createApp;

in app.js which is linked at the top level of the site

This worked, except in the js file where I have installed a component:

AppName.component('pagination', require('laravel-vue-pagination'));

The component doesn't load and these are the errors I am getting:

[Vue warn]: resolveComponent can only be used in render() or setup().
[Vue warn]: Unhandled error during execution of render function [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next

Uncaught (in promise) TypeError: Cannot read property 'computed' of undefined

I am not sure that using window.createApp is the best method to achieve what I am trying to do, that is, to avoid repeating import { createApp } from "vue". How can I achieve this without causing the above errors?

Or is there a problem with the component? The component I am using is laravel-vue-pagination from https://github.com/barryp/laravel-vue-pagination/tree/vue3

0 likes
2 replies
awsqed's avatar

Do you want to use Livewire or Alpine.js instead? Only 3 custom forms so I think Vue is too much.

CalElAn's avatar

It will take some time to refactor into livewire since the project has grown considerably large. Also, more forms are being buit in vue.

Please or to participate in this conversation.