I want to implement Vues on a single page of my Laravel application. I was able to do it via CDN but need to do it via npm

This is my blade page:

<div class="app">
        @{{state }}
    </div>
    
    <script type="module">

        import { createApp } from '/vue';

        createApp({
            data() {
                return {
                    state: true,
                };
            },
            mounted() {
                console.log("life works");
                console.log(window.Echo); // Check if Echo is available
                window.Echo.channel('chats')
                    .listen('TestRevertWorks', (e) => {
                        console.log(e.message);
                    });
            }
        }).mount('#app');

my console has following error:

GET http://localhost:3001/vue 404 (Not Found)

This is how I installed and implement vue.

npm install vue @vitejs/plugin-vue
npm install vue@latest  

Then in my app.js:

import './bootstrap';

import { createApp } from 'vue'

const app = createApp()

app.mount('#app')

Then in vite.config.js

import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/apps.js',
               
            ],
            refresh: true,
        }),
        vue(),
        react(),
    ],
    resolve: {
        alias: {
            '$': 'jQuery',
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});

Then on header of blade page:

@vite(['resources/js/app.js'])

I want to implement Vues on a single page of my Laravel application. I was able to do it via CDN but need to do it via npm

This is my blade page:

<div class="app">
        @{{state }}
    </div>
    
    <script type="module">

        import { createApp } from '/vue';

        createApp({
            data() {
                return {
                    state: true,
                };
            },
            mounted() {
                console.log("life works");
                console.log(window.Echo); // Check if Echo is available
                window.Echo.channel('chats')
                    .listen('TestRevertWorks', (e) => {
                        console.log(e.message);
                    });
            }
        }).mount('#app');

my console has following error:

GET http://localhost:3001/vue 404 (Not Found)

This is how I installed and implement vue.

npm install vue @vitejs/plugin-vue
npm install vue@latest  

Then in my app.js:

import './bootstrap';

import { createApp } from 'vue'

const app = createApp()

app.mount('#app')

Then in vite.config.js

import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/apps.js',
               
            ],
            refresh: true,
        }),
        vue(),
        react(),
    ],
    resolve: {
        alias: {
            '$': 'jQuery',
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});

Then on header of blade page:

@vite(['resources/js/app.js'])

• laravel
• vue.js
• vuejs3
• laravel-blade

Share Improve this question Follow asked Mar 7 at 8:22 paul kendal23paul kendal23 31322 gold badges44 silver badges1515 bronze badges 6

• 1 Do you have a GET 'vue' route in your web.php? – NoOorZ24 Commented Mar 7 at 8:43
• hi @NoOorZ24- no. i did not implement a GET "vue" router. do i need one. if so, how do i implment it. i mean, this is a normal laravel route – paul kendal23 Commented Mar 7 at 10:00
• yes, you have to define the route: Route::get('/vue', function (){ return view('index'); //instead of index, your blade name. }) – János Farkas Commented Mar 7 at 11:09
• hello @JánosFarkas i do not understand why you would use a route get vue. I just want view on certain parts of an existing blade page. – paul kendal23 Commented Mar 7 at 12:54
• so you have an existing page, and you just want to add vue to it? – János Farkas Commented Mar 8 at 14:26

 |  Show 1 more comment

1 Answer 1

Sorted by: Reset to default 1

In your app.js

const app = createApp({});

// Register a component that you're trying to use. So if you have multiple components then you can register it using appponent().
appponent('example-component', ExampleComponent);
app.mount('#app');

In your blade page, considering you already have app.js imported, you can use registered components. You can also pass the props. $message is the Laravel variable here.

<div id="app">
    <!-- OTHER BLADE TEMPLATE HERE -->    
    <example-component :message={{ $message }}></example-component>
</div>