T
T
Terroris3372020-09-28 18:36:59
Vue.js
Terroris337, 2020-09-28 18:36:59

Why doesn't Vue components (Laravel Mix + Vue js) work?

Good people help, for the second day I can not solve the problem!

Laravel 7.28.3

Templates for vue components are not displayed, just a tag with the name of the component and that's it.
laravel.mix.js

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

mix.js('resources/js/app.js', 'public/js')
    .extract(['vue'])
    .sass('resources/sass/app.scss', 'public/css')
    .styles([
        'resources/css/account.css',
        'resources/css/admin_panel.css',
        'resources/css/admin_panel_orders.css',
        'resources/css/amimation.css',
        'resources/css/buscket.css',
        'resources/css/header_footer.css',
        'resources/css/layot.css',
        'resources/css/lefter.css',
        'resources/css/main.css',
        'resources/css/popups.css',
        'resources/css/radio.css',
        'resources/css/slick.css',
        'resources/css/stylesheet.css',
    ], 'public/css/all.css');

app.js
require('./bootstrap');

window.Vue = require('vue');

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('view-products-component', require('./components/ViewProductsComponent.vue').default);

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

ExampleComponents.vue
<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    mounted() {
        console.log('Component mounted.')
    }
}
</script>

I call the component through the tag, div c id=app is.
Already a million articles re-read everywhere the same thing and nothing helps.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question