Vue.js componet does not appear on a web page-CodePudding

I have a Laravel project using vue js. I made a toggle component with Vue.js to display and hide an element. But the toggle button does not appear in my page. What's wrong with my code ? I can find only Hello component appear on the page.

app.js

require('./bootstrap');
import { createApp } from 'vue';
import Hello from './components/Hello.vue';
import Toggle from './components/Toggle.vue';

createApp({
    components: {
        Hello,
        Toggle,
    }
}).mount('#app');

Toggle.vue

<template>
    <div>
        <button @click="toggleVisibility">Toggle</button>
        <div v-if="visible">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Toggle',
    data() {
        return {
            visible: true
        };
    },
    methods: {
        toggleVisibility() {
            this.visible = !this.visible;
        }
    }
};
</script>

Hello.vue

<template>
    <h1>{{message}}</h1>
</template>

<script>
export default {
    name: 'Hello',
    data() {
        return {
            message: 'Hello world'
        };
    }
};
</script>

welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>
</head>
<body >
<div id="app">
    <Hello/>
    <Toggle>
        <p>This will be appeared</p>
    </Toggle>
</div>
</body>
<script src="{{ mix('/js/app.js') }}"></script>
</html>

CodePudding user response：

It's hard to tell without more information. Here are some common causes of this issue:

Verify that you have correctly imported the Toggle component in the app.js file.
Make sure that the element with the id "app" exists in your HTML file.
Verify that the script tag linking to your app.js file is properly placed in your HTML file.
Check your browser's console for any errors or warnings related to Vue.js or the component.
Make sure that the component name in the Toggle.vue file matches the component name you are using in your app.js file.

Try these steps to troubleshoot the issue and let me know if that helps.

CodePudding user response：

Thanks for all the advice. I found that if I put the component below the component like below, the button displays correctly. But I don't understand why. Does anyone know why?

welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>
</head>
<body>
<div id="app">
    <Toggle>
        <template v-slot:default>
            <p>This will be appeared</p>
        </template>
    </Toggle>
    <Hello/>
</div>
</body>
<script src="{{ mix('/js/app.js') }}"></script>
</html>