What is the correct implementation of Vue + Laravel?

D

danilr2019-11-04 17:38:04

Vue.js

danilr, 2019-11-04 17:38:04

Multipage project on Vue + Laravel. I want to make my own instance of Vue on each page - tell me if this is normal or not? Or what is the correct and how should the general blade pattern look like?
Here's how I implemented it so far - a single app.blade.php template - A Vue instance will be created (Window.Vue) and connected (new Vue({}) to @yield('footer-script').

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {{--CSRF Token--}}
    <meta name="csrf-token" content="{{ csrf_token() }}">
    {{--Meta--}}
    <title>@yield('title')</title>

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

    <script src="{{ asset('js/app.js') }}"></script>
    <script src="{{ asset('js/bootstrap.js') }}"></script>
    
    {{--Styles--}}

    <link href="{{ asset('css/report-styles.css') }}" rel="stylesheet">
    <link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
    @yield('styles')
</head>
<body>
<div class="container-fluid" id="app">
    @yield('layout')
</div>
@yield('footer-scripts')
</body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

I

Igor Vorotnev, 2019-11-14
@HeadOnFire

No difference. At the time of script execution on a particular page, there will be only one instance. Usually this is #app at the layout level.