Problem with mounting app

Hi, it is my first post here, so please give me any feedback if I need to improve something in my posting at this forum;)

Let's go to the problem I've encountered. I want to use vue.js in my laravel project. My issue is that unfortunately vue component is not loading to my webpage and I'm getting the following warning in browser console:

[Vue warn]: Failed to mount app: mount target selector "#app" returned null.
Source map error: Error: request failed with status 404
Resource URL:**********/js/app.js
Source Map URL: bootstrap.esm.js.map

My webpack.mix.js file looks as follows:

const mix = require('laravel-mix');

mix.js('resources/js/bootstrap.js', 'public/js')
    .js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/loginRegister.css', 'public/css')
    .sourceMaps();

My vue component file "ExampleComponent.vue" is inside "/reaources/js/components/" directory and looks as follows:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

My "app.js" is inside "/reaources/js/" and looks as follows:

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

const app = createApp({});

import ExampleComponent from './components/ExampleComponent.vue';
app.component('example-component', ExampleComponent);

app.mount('#app');

File in which I'm using vue component is "post.blade.php" and looks as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Posts</title>
</head>
<body>
    <div id="add">
        <example-component></example-component>
    </div>
</body>
</html>

"example-component" isn't loaded to this file. What I understand from warnings listed at the beginning of this post, Vue doesn't load component, because cannot find "#app" selector, but there is div with id="add". So I'm confused about it. Maybe I don't understand something or I missed something? Please give me feedback.

Btw I compile using the following command:

npm run watch

manelgavalda

2 years ago

Level 50

You have a typo on the post.blade.php. It should be id="app" as indicated in app.js, instead of id="add"

3 likes

Michal_N

2 years ago

Level 1

@manelgavalda Thank you really much!!! I wasn't able to see it!

1 like

Please or to participate in this conversation.