Laravel View - Import Vue component

Question

Getting to know laravel (using version 6) and i was wondering how i can make sure that my view is using my Vue component? In this case its the HelloWorld.vue component i want rendered in the albums.blade.php view file.

In my app.js i have made sure to register the component like this:

Vue.component('hello-world', require('vue\src\components\HelloWorld.vue').default);

And then im using it like this inside the albums.blade.php: <hello-world></hello-world> and i have also made sure to include the script tag referring to app.js like this: <script src="{{ asset('js/app.js') }}" defer></script>

• With no success... any inputs?

See my folder structure here

Answer 1

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>

Answer 2

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.