Is the other way to use Vue component in Laravel?

I have a Laravel project and I would like to integrate Vue. I’m not getting any error bu the Vue components just not loading up. I guess I’m making somekind of logical mistake if I’m not getting an error.

index.blade.php:

@extends('layouts.main')

@section('content')

    <div id="app">
        <productinfo-index></productinfo-index>
        <audit-index></audit-index>
    </div>
    
@endsection

App.js:

require('./bootstrap');

window.Vue = require('vue').default;

import Vue from 'vue';
import VueRouter from 'vue-router';
import { routes } from './routes';

Vue.use(VueRouter);

Vue.component('productinfo-index', require('./components/productInfo/index.vue').default);
Vue.component('audit-index', require('./components/audit/index.vue').default);


const router = new VueRouter({
    mode: 'history',
    routes: routes
});

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

routes.js:

import ProductInfoIndex from './components/productInfo/index';
import Audit from './components/audit/index';

export const routes = [

    {
        path: '/productInfo',
        name: 'ProductInfoIndex',
        component: ProductInfoIndex
    },
    {
        path: '/audit',
        name: 'Audit',
        component: Audit
    }
];

audit/index.vue:

<template>
 
<div>Test</div> 
</template>

<script>
export default {

}
</script>

<style>

</style>

Answer

Have you added configuration in the webpack file for Vue components? Refer Laravel Mix Vue

The laravel team has a laravel/ui package which comes with scaffolding using Vue: laravel/ui package. Add the package and scaffold it for Vue.

composer require laravel/ui
php artisan ui vue

This approach is better than trying to set everything up yourself as it also comes with a script which allows you to automatically register Vue components

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

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