vue component not loaded in blade file

Hi, I am using Laravel; 10 and vuejs 3. I have registered vue component in blade file but it is not showing. I have not got any error, just white screen .web.php

Route::view('message','message');

Message.vue

<template>
    <div>
        your message
    </div>
</template>

message.blade.php

@extends('layouts.app')

@section('content')
<div class="message">
   <Message/>
</div>
@endsection

app.js

import './bootstrap';

import Vue from 'vue';
import Message from './Message.vue'
Vue.component('Message', Message);

app.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">

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

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    @vite(['resources/js/app.js'])

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

</head>

<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white ">
         
        </nav>

        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
</html>

piljac1

3 years ago

Level 28

You cannot capitalize and/or self close component in HTML (Blade in that instance). You need to lowercase your component and close it within a closing tag.

<message></message>

P.S. It is also suggested to use multiword component names to avoid collision with actual HTML tags.

david001

3 years ago

Best Answer

Level 5

changed this import {createApp} from 'vue'; to this import {createApp} from 'vue/dist/vue.esm-bundler.js'; fixed the problem

Please or to participate in this conversation.