Vue.js の 使用する Component の追加
解決したいこと
勉強の為に、Laravel と Vue.js を使って SPA を作成しようとしてます。
resources/app.js に自作の Component を追加して view ファイルでの利用を試みたのですが上手くいきません。
解決方法やヒント(参考URL)などを教えて頂きたいです。
開発環境のバージョン情報
Vue : 2.6.12
Laravel Framework : 8.44.0
作成したソースコード
resources/app.js
/**
* 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.
*/
import HeaderComponent from "./components/HeaderComponent";
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(
"example-component",
require("./components/ExampleComponent.vue").default
);
// 追加した行
Vue.component("header-component", HeaderComponent);
/**
* 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",
});
resources/components/HeaderComponent.vue
<template>
<div class="container-fluid bg-dark mb-3">
<div class="container">
<nav class="navbar navbar-dark">
<span class="navbar-brand mb-0 h1">Vue Laravel SPA</span>
<div>
<button class="btn btn-success">List</button>
<button class="btn btn-success">ADD</button>
</div>
</nav>
</div>
</div>
</template>
<script>
export default {};
</script>
resources/views/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', 'Vue Laravel SPA') }}</title>
<!-- Styles -->
<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<header-component></header-component>
</div>
<!-- Scripts -->
<script src="{{ mix('/js/app.js') }}" defer></script>
</body>
</html>
自分で試したこと
- resources/app.js の default のコンポーネントを新規作成したものに変更して確認
- 画面の描写に変化はありませんでした。
- 下記コマンドを実行しているので、ビルドをし忘れている事はないはずです。
npm run watch
0
