How to use a single file vue component in blade template laravel?

Question

I have a simple table component.

<template>
<div>
    <table class="table table-bordered table-responsive">
        <thead>
        <tr>
            <th v-for="column in headers">{{column}}</th>
        </tr>
        </thead>
        <tbody>
        <tr  v-for="(row, index) in data">
            <td>{{index + 1}}</td>
            <td v-for="column in row">{{column}}</td>
        </tr>
        </tbody>
    </table>
</div>
</template>
<script>
    export default {
        name: "simple-table",
        props: ['headers', 'data']
    }
</script>

<style scoped>

</style>

I want to use it inside my laravel blade template file. For global registration I tried:

import Vue from 'vue'


window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

window.Vue = require('vue');  

Vue.component('simple-table', require('./components/SimpleTable'));

In my blade template:

<div id="people">
     <simple-table :data="tableData" :headers="columns">
     </simple-table>
</div>
........

 <script>

    const url = "{{url(sprintf("/api/admin/employees/%s/salary-history", $employee->id))}}";


    new Vue({
        el: "#people",            
        data: {
            columns: ['id', 'name', 'age'],
            tableData: [
                { id: 1, name: "John", age: "20" },
                { id: 2, name: "Jane", age: "24" },
                { id: 3, name: "Susan", age: "16" },                 
            ]                
        }
    });




</script>

But this shows the error: [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

For registering the component locally I have used the following method:

//app.js
import SimpleTable from './components/SimpleTable'
window.SimpleTable = SimpleTable

Then in my blade template when I try to use register it

....
components: {
   'simple-table': window.SimpleTable
}

But I still get the same error. If I console log window.SimpleTable it is shown as undefined

I'm using laravel mix with default configuration. What am I doing wrong?

Answer 1

Did you run npm run dev to compile the javascript files?

(anything in blade does it automatically, but not anything in ./resources/assets/js )