I have recently started building Vue.js components for my Laravel apps. When I first tried I found it difficult to get Vue.js to work and also allow the use of the excellent Vue Devtools chrome extension. This is how I finally got it working with no errors.
layouts\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>EPS RM | @yield('title')</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/parsley.min.css') }}" rel="stylesheet">
@yield('styles')
</head>
<body>
<div id="app">
@include('partials.nav')
<main class="py-4">
@include('partials.messages')
@yield('content')
</main>
</div>
<script src="{{ asset('js/app.js') }}"></script>
@yield('scripts')
</body>
</html>
Note that the <script src=”{{ asset(‘js/app.js’) }}”></script> line must come after the page content as the <div id=’app’> must be loaded first. This set up can be tested by loading the ExampleComponent in a view.
Comments