Vue component not rendering in the blade template

Hello I'm trying to show a vue component inside the blade view file but does not work whatever i did , i'll be glad to get help with that

App.js

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

const app = createApp({});

import Time from './components/Time.vue';

app.component('Time', Time);

app.mount('#app');

Time.ve

<template>
    <div>
        <div class="text-danger">hi time</div>
    </div>
</template>

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

app.blade.php

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

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ $settings->site_name }}</title>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">

    <!-- Scripts -->
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body class="d-flex flex-column h-100">
    <main class="flex-shrink-0" id="app">
		<Time></Time>
    </main>
</body>
</html>

LaryAI

3 years ago

Level 58

The issue might be that the Vue app is not properly initialized. Try adding the following code to the app.js file before mounting the app:

import { createApp } from 'vue';
import Time from './components/Time.vue';

const app = createApp({});
app.component('Time', Time);

document.addEventListener('DOMContentLoaded', () => {
    app.mount('#app');
});

This ensures that the Vue app is only mounted after the DOM has been fully loaded. Also, make sure that the app.js file is properly included in the app.blade.php file.

HarbzAli

3 years ago

Level 1

@LaryAI This did not work Mr AI :)

Please or to participate in this conversation.