Why are Vue components not showing (Vue + Laravel)?

V

Vladislav2019-06-24 17:15:48

Vue.js

Vladislav, 2019-06-24 17:15:48

Hello everyone, after moving the code to the server, the Vue components are not displayed. Locally everything is ok.
Also, if you write, Vue -Vit swears that there is no such team.
Composer installand npm iworked without errors, just to be sure, I installed vue separately with the command npm i vue, everything was installed without problems, but after npm run prod it's still empty.
Below, just in case, the
App.js code

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
import TextHighlight from 'vue-text-highlight'

Vue.component('search-component', require('./components/Search.vue'));
Vue.component('financial-component', require('./components/financialUl/Financial.vue'));
Vue.component('sidebar-component', require('./components/financialUl/Sidebar.vue'));
Vue.component('search-modal-component', require('./components/SearchModal.vue'));
Vue.component('search-modal-region-component', require('./components/SearchModalRegion.vue'));
Vue.component('text-highlight', TextHighlight);

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

index.blade.php

<!DOCTYPE html>
<html lang="ru">
<head>
    @include('blocks.head')
    <script src="{{ asset ('js/app.js')}}" defer></script>
    @stack('styles')
    <title>@yield('title')</title>
</head>
<body>
<div id="app" style="padding-bottom: 0">

    @include('blocks.left-mnu')
    @yield('content')

</div>

The file with the component

@extends('layouts.index')


@section('content')
    <!-- Место для вставки контента страницы -->
   
    <section class="search-index">
        <div class="wrap no-hidden">
            <search-component route={{route('get.search')}} url={{ route('le.render')}} :button="true"></search-component>
        </div>
    </section>
       <!-- Место для вставки контента страницы -->
@endsection

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

V

Vladislav, 2019-06-24
@vos_50

I figured it out, I had to add .default in the app.js file
Tyk