CODEWITHSUNDEEP
laravelvue.jsvite
Mohammad H.
Mohammad H.

Reputation: 1046

Using Vue3 Components in Laravel Blade + Vite

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',
        ], ....

Upvotes: 4

Views: 6589

Answers (2)

Roland Kov&#225;cs
Roland Kov&#225;cs

Reputation: 1

Hi I have same problem and this comment help to me :

import {createApp} from 'vue' doesn't work!!! only with 'vue/dist/vue.esm-bundler'

  1. import { createApp } from 'vue':

This import statement is commonly used when working with Vue 3 in a development environment where module bundlers like Webpack are used. It provides access to the "full" build of Vue 3.

2.import { createApp } from 'vue/dist/vue.esm-bundler':

This import statement explicitly selects the "bundler" build of Vue 3, which is optimized for use with bundlers like Vite. It's a smaller and more efficient version of Vue 3, suitable for modern frontend development workflows.

When using Vite as your build tool, it's recommended to use the vue/dist/vue.esm-bundler import for Vue 3, as it's designed to work efficiently with Vite's module system. This is why switching to the second import statement resolved your issue.

Upvotes: 0

current
current

Reputation: 186

<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'

Upvotes: 12

Related Questions