Menu
Recently I moved to Vite for my Laravel 9 project. Before that, I was using some Vue2 components directly in blade files within HTML code but after moving to Vite, since the loader works differently, it is not possible to load only components as directives instead of loading the entire app into #app element.
So I have a Test.vue file and just want to include this component into a blade file, that was working before with Vue2 and webpack (laravel mix) but not now with Vite
<HTML><Body>
<div id="app">
@vite('app.js');
<Test></Test>
</div>
</body></html>
and here is the app.js content:
import {createApp} from 'vue';
import Test from './components/Test.vue';
const app = createApp({
mounted() {
console.log('The app is working')
}
});
app.component('Test', Test);
app.mount('#app');
However it was working before without changing the content of #app but now with/without mounting, it does not.
I can see the console log, but when I go to the blade route, the <Test> component not loading. Here is also vite.config if it helps:
import laravel from 'laravel-vite-plugin';
import { fileURLToPath } from 'url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
server: {
host: 'linkbeen.test'
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
plugins: [
vue(),
laravel([
'resources/sass/app.scss',
'resources/js/app.js',
], ....
516
<HTML><Body>
<div id="root-component-1">
@{{message}}
<example-component-1></example-component-1>
<example-component-2></example-component-2>
</div>
<hr/>
<div id="root-component-2">
@{{message}}
<example-component-2></example-component-2>
</div>
@vite()
</body></html>
ExampleComponent1.vue:
<template>
<div>
I'm an example component 1.
</div>
</template>
ExampleComponent2.vue:
<template>
<div>
I'm an example component 2.
</div>
</template>
app.js
import {createApp} from 'vue/dist/vue.esm-bundler';
import ExampleComponent1 from './components/ExampleComponent1.vue';
import ExampleComponent2 from './components/ExampleComponent2.vue';
const rootComponent1 = createApp({
data() {
return {
message: 'Hello root Component 1'
};
},
components: {
'example-component-1': ExampleComponent1,
'example-component-2': ExampleComponent2,
},
},);
rootComponent1.mount('#root-component-1');
const rootComponent2 = createApp({
data() {
return {
message: 'Hello root Component 2'
};
},
components: {
'example-component-2': ExampleComponent2,
},
},);
rootComponent2.mount('#root-component-2');
import {createApp} from 'vue' doesn't work!!! only with 'vue/dist/vue.esm-bundler'
164
answered Sep 02 '25 13:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With