Search code examples
laravelvue.jsassets

Laravel 5.7 cant use assets with Vue in blade template

Hello I have Laravel version 5.7.24. I have problem with import app.js to blade template. I have app.js in resources/js/app.js, this same file is other location: public/js/app.js

In welcome.blade.php I add:

<body>
    <div id="app">
        Hello
        <example-component></example-component>
        <articles></articles>
    </div>
    <script src="{{ asset('js/app.js') }}"></script>
</body>

I created articles component in resources/js/components/articles.vue:

<template>
    <div>
        Hello
    </div>
</template>

<script>
export default {
    name: "Articles"
}
</script>

Now Laravel return me error:

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Because asset refers to the public/js/app.js

I read in this article, taht Laravel removed assets foler. So I added assets folder and my file structure looks like this:

enter image description here

but still Laravel references the file public/js/app.js.

How I can import srcipt (resources/js/app.js) to my welcome.blade.php file ?

Edit:

my resources/js/app.js file:

require('./bootstrap');
window.Vue = require('vue');

Vue.component('articles', require('./components/Articles.vue').default);

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

When I change script from (in welcome.blade.php):

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

to

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

I have error: GET http://127.0.0.1:8000/assets/js/app.js net::ERR_ABORTED 404 (Not Found)

Solution

  • It looks like you have a mistake in this line of your app.js:

    Vue.component('articles', require('./components/Articles.vue').default);

    Try removing .default from here, and see if the component is registered correctly when you build again (npm run dev).

    Side note: <articles> should contain a hyphen like my-articles, v-articles, or something else.

    When using a component directly in the DOM (as opposed to in a string template or single-file component), we strongly recommend following the W3C rules for custom tag names (all-lowercase, must contain a hyphen). This helps you avoid conflicts with current and future HTML elements.

    https://v2.vuejs.org/v2/guide/components-registration.html#Component-Names