Can't i use Vue3 with a global app component like i did in Vue2?

In my other laravel app i used vue 2, with a global app component.

My root component was inside my blade layout and i had most of my pages in blade.php with a few vue components inside them.

Now i'm trying to do the same thing, but anything i put inside the div with the 'app' id is simply overwritten by the App vue component. I'm reading some stuff about Vue3 and it seems like i need to mount a new app for each component i have, is that it?

Here's my app.js file:

import './bootstrap';
import {createApp} from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})
app.mount("#app");

in my layout (app.blade.php) i have this

<!-- Page Content -->
		<main>
				<div id="app">
						{{ $slot }}
						<span>other stuff</span>
				</div>
		</main>

how it is i get no content (not even the other stuff span), and it all comes back when i remove the id. I tried importing app from a separate App.vue file, with a template and the content inside that template is shown, also ignoring the inner html inside the #app div

Is there any way for me to use it like this without the inner html being overwritten?

guigas

3 years ago

Level 12

I've also tried this in app.js, and it also removes all the content inside the #app div.

import './bootstrap';
import {createApp} from 'vue'

const app = createApp({})
app.mount("#app");

I just need to mount the app in my layout page while using the inner html of that div

guigas

3 years ago

Best Answer

Level 12

I tried adding a component and got this error message: [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js". at <App>

in which i solved by changing this in my app.js:

import { createApp } from "vue/dist/vue.esm-bundler.js";

and it solved everything

Please or to participate in this conversation.