Когда я использую '/js/app.js' в моем представлении Laravel, мой Bootstrap не загружается

Я использую это представление Laravel, чтобы показать компонент Vue, но когда я использую его в своем представлении, то Bootstrap не работает. Как я могу решить эту проблему.

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

Это моя точка зрения.

Вид

@extends('layouts.app')

@section('title')
Brand
@endsection

@section('content')
<div class = "row">
    <div class = "col-md-6 product-img mt-3">
        <div id = "carouselExampleIndicators" class = "carousel slide" data-ride = "carousel" data-interval = "false">
            <div class = "carousel-inner">
                <div class = "carousel-item active">
                <img class = "d-block mx-auto" src = "{{ $product->imageUrl }}" alt = "First slide">
                </div>
                <div class = "carousel-item">
                <img class = "d-block mx-auto" src = "{{ $product->image1 }}" alt = "Second slide">
                </div>
            </div>
            <div class = "text-center pt-2">
                <img style = "cursor: pointer" data-target = "#carouselExampleIndicators" data-slide-to = "0" class = "active img-thumbnail product-image" src = "{{ $product->imageUrl }}" alt = "">
                <img style = "cursor: pointer" data-target = "#carouselExampleIndicators" data-slide-to = "1" class = "img-thumbnail product-image" src = "{{ $product->image1 }}" alt = "">
            </div>
        </div>
    </div>
    <div class = "col-md-5 product-info product mt-5 mb-2">
        <h2 class = "pt-2">{{ $product->title }}</h2>
        <h6 class = "pt-2">Stars - Numbers of reviews | Microsoft</h6>
        <h1 style = "font-weight:bold; font-size:30px" class = "pt-2">${{ $product->price }}</h1>
        <h6 style = "font-weight:bold" class = "pt-2">Free 2-day shipping </h6>
        <hr>
        <div class = "product-sell product">
            <h6 class = "text-muted">Qty :</h6>
            <select name = "quantity" id = "qty" class = "mr-2">
                <option value = "1">1</option>
                <option value = "2">2</option>
                <option value = "3">3</option>
                <option value = "4">4</option>
                <option value = "5">5</option>
                <option value = "6">6</option>
                <option value = "7">7</option>
                <option value = "8">8</option>
                <option value = "9">9</option>
                <option value = "10">10</option>
                <option value = "11">11</option>
                <option value = "12">12</option>
            </select>
            <button class = "rounded btn btn-primary" type = "submit" form = "NoForm" value = "Submit">Add to <i class = "fas fa-shopping-cart"></i></button>
        </div>
        <hr>
        <div class = "product-shipping">
            <h5 style = "font-size:17px; font-weight:bold"><i class = "fas fa-paper-plane mr-2"></i>Sale & shipping by Some-Brand</h5>
        </div>
        <hr>
        <div class = "wish-list">
            <h6 style = "font-weight:bold">Save it too...</h6><button class = "rounded btn btn-primary" type = "submit" form = "NoForm" value = "Submit">Add to <i class = "fas fa-heart"></i></button>
        </div>
        <hr>
        <div class = "form error-form">
            <h6 class = "" style = "font-weight:bold">Contact us</h6>
            <a class = "text-dark" href = ""><i class = "fas fa-comment mr-2"></i><u>Let us know if something went wrong</u></a>
        </div>
    </div>
</div>
<hr class = "mt-5">
<div class = "text-center pt-5">
    <div class = "container">
        <h3 class = "text-left">Other customers looked for</h3>
    </div>
    <div id = "recipeCarousel" class = "carousel slide w-100" data-ride = "carousel">
        <div class = "carousel-inner w-100" role = "listbox">
            <div class = "carousel-item row no-gutters active offset-md-1">
                <div class = "card col-3 float-left mr-5" style = "width: 200px;"><a href = "{{ route('welcome.show', ['product' => $product]) }}"><img class = "card-img-top img-fluid" src = "{{ $product->imageUrl }}" alt = "Card image cap"></a><div class = "card-body"><h5 class = "card-title">{{ $product->title}}</h5><h2 class = "card-text">${{ $product->price }}</h2></div></div>
                <div class = "card col-3 float-left mr-5" style = "width: 200px;"><a href = "{{ route('welcome.show', ['product' => $product]) }}"><img class = "card-img-top img-fluid" src = "{{ $product->imageUrl }}" alt = "Card image cap"></a><div class = "card-body"><h5 class = "card-title">{{ $product->title}}</h5><h2 class = "card-text">${{ $product->price }}</h2></div></div>
                <div class = "card col-3 float-left mr-5" style = "width: 200px;"><a href = "{{ route('welcome.show', ['product' => $product]) }}"><img class = "card-img-top img-fluid" src = "{{ $product->imageUrl }}" alt = "Card image cap"></a><div class = "card-body"><h5 class = "card-title">{{ $product->title}}</h5><h2 class = "card-text">${{ $product->price }}</h2></div></div>
                <div class = "card col-3 float-left mr-5" style = "width: 200px;"><a href = "{{ route('welcome.show', ['product' => $product]) }}"><img class = "card-img-top img-fluid" src = "{{ $product->imageUrl }}" alt = "Card image cap"></a><div class = "card-body"><h5 class = "card-title">{{ $product->title}}</h5><h2 class = "card-text">${{ $product->price }}</h2></div></div>
                <div class = "card col-3 float-left mr-5" style = "width: 200px;"><a href = "{{ route('welcome.show', ['product' => $product]) }}"><img class = "card-img-top img-fluid" src = "{{ $product->imageUrl }}" alt = "Card image cap"></a><div class = "card-body"><h5 class = "card-title">{{ $product->title}}</h5><h2 class = "card-text">${{ $product->price }}</h2></div></div>
            </div>
            <div class = "carousel-item row no-gutters offset-md-1">
                <div class = "card col-3 float-left mr-5" style = "width: 200px;"><a href = "{{ route('welcome.show', ['product' => $product]) }}"><img class = "card-img-top img-fluid" src = "{{ $product->imageUrl }}" alt = "Card image cap"></a><div class = "card-body"><h5 class = "card-title">{{ $product->title}}</h5><h2 class = "card-text">${{ $product->price }}</h2></div></div>
                <div class = "card col-3 float-left mr-5" style = "width: 200px;"><a href = "{{ route('welcome.show', ['product' => $product]) }}"><img class = "card-img-top img-fluid" src = "{{ $product->imageUrl }}" alt = "Card image cap"></a><div class = "card-body"><h5 class = "card-title">{{ $product->title}}</h5><h2 class = "card-text">${{ $product->price }}</h2></div></div>
                <div class = "card col-3 float-left mr-5" style = "width: 200px;"><a href = "{{ route('welcome.show', ['product' => $product]) }}"><img class = "card-img-top img-fluid" src = "{{ $product->imageUrl }}" alt = "Card image cap"></a><div class = "card-body"><h5 class = "card-title">{{ $product->title}}</h5><h2 class = "card-text">${{ $product->price }}</h2></div></div>
                <div class = "card col-3 float-left mr-5" style = "width: 200px;"><a href = "{{ route('welcome.show', ['product' => $product]) }}"><img class = "card-img-top img-fluid" src = "{{ $product->imageUrl }}" alt = "Card image cap"></a><div class = "card-body"><h5 class = "card-title">{{ $product->title}}</h5><h2 class = "card-text">${{ $product->price }}</h2></div></div>
                <div class = "card col-3 float-left mr-5" style = "width: 200px;"><a href = "{{ route('welcome.show', ['product' => $product]) }}"><img class = "card-img-top img-fluid" src = "{{ $product->imageUrl }}" alt = "Card image cap"></a><div class = "card-body"><h5 class = "card-title">{{ $product->title}}</h5><h2 class = "card-text">${{ $product->price }}</h2></div></div>
            </div>
        </div>
        <a class = "carousel-control-prev" href = "#recipeCarousel" role = "button" data-slide = "prev">
            <span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
            <span class = "sr-only">Previous</span>
        </a>
        <a class = "carousel-control-next" href = "#recipeCarousel" role = "button" data-slide = "next">
            <span class = "carousel-control-next-icon" aria-hidden = "true"></span>
            <span class = "sr-only">Next</span>
        </a>
    </div>
</div>
<hr>
<div class = "pt-5">
    <div class = "container">
        <h3>Product description</h3>
    </div>
    <div class = "container">
        <h6 class = "text-left" style = "font-size:20px">{{ $product->description }}</h6>
    </div>
</div>
<hr class = "mt-5">
<div class = "text-center pt-5">
    <div class = "container">
        <h3 class = "text-left">Other customers bought</h3>
    </div>
    <div id = "recipeCarousel" class = "carousel slide w-100" data-ride = "carousel">
        <div class = "carousel-inner w-100" role = "listbox">
            <div class = "carousel-item row no-gutters active offset-md-1">
                <div class = "card col-3 float-left mr-5" style = "width: 200px;"><a href = "{{ route('welcome.show', ['product' => $product]) }}"><img class = "card-img-top img-fluid" src = "{{ $product->imageUrl }}" alt = "Card image cap"></a><div class = "card-body"><h5 class = "card-title">{{ $product->title}}</h5><h2 class = "card-text">${{ $product->price }}</h2></div></div>
                <div class = "card col-3 float-left mr-5" style = "width: 200px;"><a href = "{{ route('welcome.show', ['product' => $product]) }}"><img class = "card-img-top img-fluid" src = "{{ $product->imageUrl }}" alt = "Card image cap"></a><div class = "card-body"><h5 class = "card-title">{{ $product->title}}</h5><h2 class = "card-text">${{ $product->price }}</h2></div></div>
                <div class = "card col-3 float-left mr-5" style = "width: 200px;"><a href = "{{ route('welcome.show', ['product' => $product]) }}"><img class = "card-img-top img-fluid" src = "{{ $product->imageUrl }}" alt = "Card image cap"></a><div class = "card-body"><h5 class = "card-title">{{ $product->title}}</h5><h2 class = "card-text">${{ $product->price }}</h2></div></div>
                <div class = "card col-3 float-left mr-5" style = "width: 200px;"><a href = "{{ route('welcome.show', ['product' => $product]) }}"><img class = "card-img-top img-fluid" src = "{{ $product->imageUrl }}" alt = "Card image cap"></a><div class = "card-body"><h5 class = "card-title">{{ $product->title}}</h5><h2 class = "card-text">${{ $product->price }}</h2></div></div>
                <div class = "card col-3 float-left mr-5" style = "width: 200px;"><a href = "{{ route('welcome.show', ['product' => $product]) }}"><img class = "card-img-top img-fluid" src = "{{ $product->imageUrl }}" alt = "Card image cap"></a><div class = "card-body"><h5 class = "card-title">{{ $product->title}}</h5><h2 class = "card-text">${{ $product->price }}</h2></div></div>
            </div>
        </div>
    </div>
</div>
<hr class = "mt-5">
<div class = "container">
    <div class = "comments">
        <h3>Reviews and comments</h3>
    </div>
</div>
<div class = "container">
    <div class = "row">
        <div class = "col-md-4" id = "app">
            <star-rating></star-rating>
        </div>
        <div class = "col-md-4 text-center">
            Rating - statistics
        </div>
        <div class = "col-md-4">
            @if (auth()->check())
                <div class = "create-review text-right">
                    <a href = "{{ route('create.review', [$product] ) }}" class = "btn btn-primary" role = "button" style = "border-radius:20px">Write a review</a>
                </div>
            @else
                <div class = "write-review text-right">
                    <a href = "/login" class = "btn btn-primary" role = "button" style = "border-radius:20px">Write a review</a>
                </div>
            @endif
        </div>
    </div>
</div>
<hr>
<div class = "container">
    <div class = "row">
        <div class = "col-md-6">
        <h3>Recent comments</h3>
            @forelse($product->reviews as $review)
            <div class = "comment mt-5 border border-dark pl-3 pt-3 pb-3 mb-3 rounded">
                <div class = "title">
                    <h4>{{ $review->headline }}</h4>
                </div>
                <div class = "body-text pt-3 pr-5">
                    <p style = "text-align:justify"><strong>{{ $review->description }}</strong></p>
                </div>
                <div class = "author pt-2">
                    <h6 class = "text-muted">{{ $review->user_name }},  {{ date('d-m-Y', strtotime( $review->created_at )) }}</h6>
                </div>
                <div class = "votes row">

                </div>
            </div>
            @empty
            <h6>There are not reviews for this product</h6>
            @endforelse
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src = "{{ asset('/js/app.js') }}"></script>
@endsection

Это мои «ресурсы / активы / js / app.js», где у меня есть компонент Vue.

App.js

import VueStarRating from 'vue-star-rating'

require('./bootstrap');

window.Vue = require('vue');



Vue.component('example-component', require('./components/ExampleComponent.vue'));

Vue.component('star-rating', VueStarRating);

const app = new Vue({
    el: '#app'
});

Это мой webpack.mix.js

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

И, наконец, это мой файл макета.

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
    <meta name = "csrf-token" content = "{{ csrf_token() }}">
    <title>@yield('title')</title>

    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">
    <link href = "https://fonts.googleapis.com/css?family=Roboto:400,700" rel = "stylesheet">
    <link rel = "stylesheet" href = "{{ URL::to('src/css/app.css') }}">
    @yield('styles')
</head>
<body>
@include('partials.header')
@yield('content')
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E = " crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity = "sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin = "anonymous"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"></script>
<script defer src = "https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity = "sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin = "anonymous"></script>
@yield('scripts')
</body>
</html>

Что я делаю неправильно? Приветствуется всяческая помощь. Спасибо.