[Vuejs]-Laravel View – Import Vue component

by

0👍

you need to use laravel mix for vue js
Laravel Mix

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

to <script src="{{ mix('js/app.js') }}" defer></script>

0👍

Place check Laravel Mix docs

My personal config using Laravel mix is:

app.js

require('./bootstrap');
import Vue from 'vue';

window.Vue = Vue;

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

// Other things
// ....

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

albums.blade.php

Place this script tag at the bottom of the page.

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

Then you could use the component like this:

<div>
  <hello-world></hello-world>
</div>

Recommendation

Consider learning Laravel 9 instead of Laravel 6. This because 9 is the newest version and also the actual LTS release.

Leave a comment