Vue.jsでの機能追加について

前提・実現したいこと

laravelにVue.jsでいいね機能を追加しようとしているのですが，上手く表示されません。
特にエラーもありません。

調べたのですが，解決できないので質問させて頂きました。

また，app.jsにimportを追記する意味はあるのでしょうか？
Vue.component部分のみの記載だけではダメなのでしょうか。

宜しくお願い致します。

該当のソースコード

center.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Home</title>

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">


    <style>

        .card-deck {
            padding: 30px 0px 30px 0px;
        }

        .app {
          padding: 30px 30px 30px 30px;
        }

    </style>

</head>
<body>
    <div>
        <div class="card-deck">
            <div class="card">
              <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              </div>
              <div class="card-footer">

                  <div class="app">
                    <ArticleLike-component></ArticleLike-component>
                  </div>

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

              </div>
            </div>
            <div class="card">
              <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
              </div>
              <div class="card-footer">
                <small class="text-muted">Last updated 3 mins ago</small>
              </div>
            </div>

ArticleLike.vue

<template>
    <div class="container">
        <div class="row justify-content-center mt-1">
            <div class="col-md-12">
                <div>
                    <button>
                        いいね
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['post'],
        mounted () {
            console.log(this.post);
        }
     }
</script>

app.js

import './bootstrap'
import Vue from 'vue'
import ArticleLike from './components/ArticleLike'

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * 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('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('ArticleLike-component', require('./components/ArticleLike.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',
    components: {
        ArticleLike,
      }
    });

webpack.mix.js

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

試したこと

app.jsにimport等の追加など

補足情報（FW/ツールのバージョンなど）

Laravel 6.20
Vue.js 2.6.12
php 7.4.15
windows 10

行動規範の内容に同意します

回答3件

ベストアンサー

足りないのは#appの部分。

<body>
    <div id="app">

app.jsの#appと対応している。

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

Vue.jsで覚えることなのでLaravel側では全く説明はない。
「Laravelの普通の使い方」をすればここで躓くことはない。
Laravel6とui:1.xならこれがレイアウトとして使われるので#appは最初から用意されている。
https://github.com/laravel/ui/blob/1.x/src/Auth/bootstrap-stubs/layouts/app.stub
レイアウトに#appがある=全ページのどこでもVueコンポーネントが使える。

でもこれLaravel7までの話で8では忘れていい知識。

投稿2021/02/20 13:34

kawax

総合スコア10377

退会済みユーザー

2021/02/20 14:13

詳しく教えて下さりありがとうございます。 divをclassからidに変更したのですが，変化はありませんでした。すみません。

行動規範の内容に同意します

diff
1
2- Vue.component('ArticleLike-component', require('./components/ArticleLike.vue').default);
3+ Vue.component('ArticleLike', require('./components/ArticleLike.vue').default);
4
5

投稿2021/02/21 13:42

kai0310

総合スコア2070

デフォルトであるExampleComponent.vueにArticleLike.vueの内容を全てコピーし貼り付けて， <example-component></example-component>のようにコンポネートを記述したら表示されました。
なぜArticleLike.vueの内容のみ反映されなかったのかはまだ不明です。

投稿2021/02/20 14:49

退会済みユーザー

総合スコア0