Here is the Laravel layout template that I am currently working with:
<html lang="en">
<head>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="{{ URL::asset('css/libs.css') }}" rel="stylesheet">
<link href="{{ URL::asset('css/app.css') }}" rel="stylesheet">
@yield('styles')
@yield('scripts.header')
</head>
<body>
<div id="app">
<div class="main-container">
<div class="ad ad-leaderboard hidden-xs">
<script>
function onSubmit(token) {
$("#register-form").submit();
}
</script>
</div>
@include('layouts.partials.header')
<div id="main">
@yield('content')
</div>
@include('layouts.partials.footer')
</div>
</div>
<!-- Jquery, Bootstrap, Moment, DatetimePicker, Sweetalert, Select2 -->
<script src="{{ URL::asset('js/libs.js')}}"></script>
<!-- Custom -->
<script src="{{ URL::asset('js/app.js')}}"></script>
@yield('scripts.footer')
</body>
</html>
The section
<script src="{{ URL::asset('js/app.js')}}"></script>const app = new Vue({
el: '#app'
});
I am looking to include Google Ad scripts in my content but encounter a
[Vue warn]: Error compiling template:Since I only use Vue components on specific pages, I am considering moving the Vue declaration out of app.js and onto those individual pages. However, I am curious if there is a more efficient way to organize this to avoid repeating the declaration on every separate page while still being able to inline JavaScript within the main layout page. Any suggestions?