Я новенький в таких технологиях как Vue.js. Вот решил начать изучать и сразу столкнулся с проблемой.
НЕ могу отобразить компонент в Laravel 7 + Vue.js 3.
Вот код из app.js
require('./bootstrap');
window.Vue = require('vue').default
Vue.component('app-example', require('./components/App').default);
const app = new Vue({
el: '#app',
});
Вот код из index.blade.php где я его вывожу
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Trello</title>
<link rel="stylesheet" href="{{mix('css/app.css')}}">
</head>
<body>
<div id="app">
<app-example></app-example>
</div>
<script src="{{mix('js/app.js')}}"></script>
</body>
</html>
Это сам компонент App.vue
<template>
<div class="container"><h1>Hello</h1></div>
</template>
<script>
export default {
}
</script>
А это мой package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"@popperjs/core": "^2.10.2",
"axios": "^0.21",
"bootstrap": "^5.1.3",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.11",
"sass-loader": "^11.0.1",
"vue-loader": "^17.0.0",
"vue-template-compiler": "^2.6.12",
"webpack-cli": "^4.10.0"
},
"dependencies": {
"autoprefixer": "10.4.5",
"bootstrap": "^5.1.3",
"vue": "^3.2.37",
"vue-loader": "^17.0.0"
}
}
Подскажите в чем моя проблема.
При запуске команды npm run watch , всё билдится хорошо. Но страница пустая.
Средний