My Vue component is not showing up in Laravel

Question

My vue component is not showing up and I failed to see what's wrong here. I have no errors in my console and I use npm run hot

My app.js

require('./bootstrap');

window.Vue = require('vue').default;

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('follow-button', require('./components/FollowButton.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app',
});

My FollowButon.vue component

<template>
    <div>
        <button class="btn btn-primary ml-4"  v-text="buttonText"></button>
    </div>
</template>

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

        
    }
</script>

Place where vue supposed to show

extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-3 p-5">
            <img src="{{ $user->profile->profileImage() }}"  class="rounded-circle w-100">
        </div>
        <div class="col-9 pt-5">

        <div class="d-flex justify-content-between align-items-baseline">
            <div class="d-flex align-items-center pb-3">
                <div class="h4">{{$user->name}}</div>
                 
                 <follow-button></follow-button>
                
            </div>

            @can('update',$user->profile)
            <a href="/p/create">Add New Post</a>
            @endcan

        </div>
         @can('update',$user->profile)
            <a href="/profile/{{ $user->id }}/edit">Edit profile</a>
        @endcan

        <div class="d-flex">
            <div class="pr-5"><strong>{{ $user->posts->count() }}</strong> posts</div>
            <div class="pr-5"><strong>23k</strong> followers</div>
            <div class="pr-5"><strong>212</strong> following</div>
        </div>
        <div class="pt-4"><strong>{{ $user->profile->title}}</strong></div>
        <div>{{ $user->profile->description}}</div>
        <div><a href="#">{{$user->profile->url}}</a></div>
        </div>
    </div>

    <div class="row pt-5">
        @foreach($user->posts as $post)
        <div class="col-4 pb-5">
            <a href ="/p/ {{ $post->id }}">
            <img src="/storage/{{ $post->image }}"; class="w-100">
            </a>
        </div>
        @endforeach
    </div>


</div>
@endsection

I have this in my <head> section

<script src="{{ asset('js/app.js') }}" defer></script>

And if I change this to

<link rel="stylesheet" href="{{ mix('css/app.css') }}" />
<script defer src="{{ mix('js/app.js') }}"></script>

It still don't work

Also any answer from here don't work for me.

Mohamed Gamal Eldin · Accepted Answer · 2021-10-01 19:11:58Z

1

You must add app Id to element parent of <follow-button></follow-button>

like this

<div id="app">
   <follow-button></follow-button>
</div>

answered Oct 1, 2021 at 19:11

Mohamed Gamal Eldin

7261 gold badge10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Larson Over a year ago

I tried that too, but unfortunately, it's still not working.

Mohamed Gamal Eldin Over a year ago

No npm errors? No console errors while you add the app id?

Larson Over a year ago

Yeah, I've followed this tutorial: youtu.be/ImtZ5yENzgE?t=12313 I know it's a little outdated but I managed to get everything work up to this point, and guy doesn't even add id there.

Mohamed Gamal Eldin Over a year ago

I opened the tutorial's code and find at resources/views/layouts/app.blade.php line: 23 at github.com/coderstape/freecodegram and you will find the id, check you already added it

Larson Over a year ago

Oh, you're right. I've changed id to app2 here on my page: <div id ="app2"> <follow-button></follow-button> </div> and here on app.js: const app2 = new Vue({ el: '#app2', }); And its works now. Thank you, man. I wasted my entire day on that.

|

Collectives™ on Stack Overflow

My Vue component is not showing up in Laravel

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related