Realice unas modificaciones en mio componente vue (categoria.vue) que lo tengo en la ruta /resources/js/components/Categoria.vue) para validar que los datos de categoria no estén vacíos pero al compilar el proyecto con npm run watch, y luego al correr el proyecto con php artisan serve no se visualiza el componente categoria.vue; adjunto mi componente Categoria.vue que muestra el código: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> <template> <main class="main"> <!-- Breadcrumb --> <ol class="breadcrumb"> <li class="breadcrumb-item active"><a href="/">BACKEND - SISTEMA DE COMPRAS - VENTAS</a></li> </ol> <div class="container-fluid"> <!-- Ejemplo de tabla Listado --> <div class="card"> <div class="card-header"> <h2>Listado de Categorías</h2><br/> <button class="btn btn-primary btn-lg" type="button" @click="abrirModal('categoria','registrar')"> <i class="fa fa-plus fa-2x"></i> Agregar Categoría </button> </div> <div class="card-body"> <div class="form-group row"> <div class="col-md-6"> <div class="input-group"> <select class="form-control col-md-3"> <option value="nombre">Categoría</option> <option value="descripcion">Descripción</option> </select> <input type="text" class="form-control" placeholder="Buscar texto"> <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i> Buscar</button> </div> </div> </div> <table class="table table-bordered table-striped table-sm"> <thead> <tr class="bg-primary"> <th>Categoría</th> <th>Descripción</th> <th>Estado</th> <th>Editar</th> <th>Cambiar Estado</th> </tr> </thead> <tbody> <tr v-for="categoria in arrayCategoria" :key="categoria.id"> <td v-text="categoria.nombre"></td> <td v-text="categoria.descripcion"></td> <td> <button type="button" class="btn btn-success btn-md" v-if="categoria.condicion"> <i class="fa fa-check fa-2x"></i> Activo </button> <button type="button" class="btn btn-danger btn-md" v-else> <i class="fa fa-check fa-2x"></i> Desactivado </button> </td> <td> <button type="button" class="btn btn-info btn-md" @click="abrirModal('categoria','actualizar',categoria)"> <i class="fa fa-edit fa-2x"></i> Editar </button> </td> <td> <button type="button" class="btn btn-danger btn-sm"> <i class="fa fa-lock fa-2x"></i> Desactivar </button> </td> </tr> </tbody> </table> <nav> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#">Anterior</a> </li> <li class="page-item active"> <a class="page-link" href="#">1</a> </li> <li class="page-item"> <a class="page-link" href="#">2</a> </li> <li class="page-item"> <a class="page-link" href="#">3</a> </li> <li class="page-item"> <a class="page-link" href="#">4</a> </li> <li class="page-item"> <a class="page-link" href="#">Siguiente</a> </li> </ul> </nav> </div> </div> <!-- Fin ejemplo de tabla Listado --> </div> <!--Inicio del modal agregar/actualizar--> <div class="modal fade" :class="{'mostrar':modal}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true"> <div class="modal-dialog modal-primary modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" v-text="tituloModal"></h4> <button type="button" @click="cerrarModal()" class="close" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div v-show="errorCategoria()" class="form-group row div-error"> <div class="text-center text-error"> <div v-for="error in errorMostrarMsjCategoria" :key="error" v-text="error"></div> </div> </div> <form action="" method="post" enctype="multipart/form-data" class="form-horizontal"> <div class="form-group row"> <label class="col-md-3 form-control-label" for="text-input">Categoría</label> <div class="col-md-9"> <input type="text" v-model="nombre" class="form-control" placeholder="Nombre de categoría"> </div> </div> <div class="form-group row"> <label class="col-md-3 form-control-label" for="email-input">Descripción</label> <div class="col-md-9"> <input type="email" v-model="descripcion" class="form-control" placeholder="Ingrese descripcion"> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" @click="cerrarModal()" class="btn btn-danger"><i class="fa fa-times fa-2x"></i> Cerrar</button> <button type="button" @click="registrarCategoria()" v-if="tipoAccion==1" class="btn btn-success"><i class="fa fa-save fa-2x"></i> Guardar</button> <button type="button" v-if="tipoAccion==2" class="btn btn-success"><i class="fa fa-save fa-2x"></i> Actualizar</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!--Fin del modal--> </main> </template> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> export default { data(){ return { nombre:'', descripcion:'', arrayCategoria:[], modal:0, tituloModal:'', tipoAccion:0, errorCategoria:0, errorMostarMsjCategoria:[] } }, methods:{ listarCategoria(){ let me=this; const axios = require('axios'); axios.get('http://localhost/proyectolaravel/public/categoria').then(function (response) { // handle success //console.log(response); me.arrayCategoria=response.data; }) .catch(function (error) { // handle error console.log(error); }); }, registrarCategoria(){ if(this.validarCategoria()){ return; } let me=this; const axios = require('axios'); axios.post('http://localhost/proyectolaravel/public/categoria/registrar',{ nombre:this.nombre, descripcion:this.descripcion //'nombre':this.nombre, //'descripcion':this.descripcion }).then(function (response){ //handle success //console.log(response); me.cerrarModal(); me.listarCategoria(); }) .catch(function (error){ // handle error console.log(error); }) }, validarCategoria(){ this.errorCategoria=0; this.errorMostarMsjCategoria=[]; if(!this.nombre) this.errorMostarMsjCategoria.push("(*) el nombre de la categoria no puede estar vacio"); if(this.errorMostarMsjCategoria.length) this.errorCategoria=1; return this.errorCategoria; }, cerrarModal(){ this.modal=0; this.tituloModal=""; this.nombre=""; this.descripcion=""; }, abrirModal(modelo,accion,data=[]){ switch(modelo){ case "categoria": { switch(accion){ case "registrar": { this.modal=1; this.tituloModal="Registrar Categoria"; this.nombre=""; this.descripcion=""; this.tipoAccion=1; } case "actualizar": { } } } } } }, mounted() { //console.log('Component mounted.') this.listarCategoria(); } } </script> <style> .modal-content{ width:100% !important; position:absolute !important; } .mostrar{ display:list-item !important; opacity:1 !important; position:absolute !important; background-color:#3c29297a !important; } .text-error{ color:red !important; font-weight:bold; font-size:20px; } </style> <!-- end snippet --> Esta es la pantalla que había antes de mi proyecto cuando se ejecuta mi proyecto y llama al componente vue (categoria.vue) [![introducir la descripción de la imagen aquí][1]][1] [![introducir la descripción de la imagen aquí][2]][2] Mi pregunta es la siguiente ¿hay que hacer algo para confirmar en el archivo app.js de la carpeta /resource de mi proyecto de laravel para que se visualice los cambios que he realizado en mi componente vue categoria.vue?; que adjunto pantalla como sale ahora: [![introducir la descripción de la imagen aquí][3]][3] Adjunto el archivo que llama a mi componente vue (categoria ve) el archivo que se llama "contenido.blade.php" que esta en la ruta /views/contenido/contenido.blade.php" en este caso de mi proyecto <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> @extends('principal') @section('contenido') <template v-if="menu==0"> <h1>contenido 0</h1> </template> <template v-if="menu==1"> <categoria></categoria> </template> <template v-if="menu==2"> <h1>contenido 2</h1> </template> <template v-if="menu==3"> <h1>contenido 3</h1> </template> <template v-if="menu==4"> <h1>contenido 4</h1> </template> <template v-if="menu==5"> <h1>contenido 5</h1> </template> <template v-if="menu==6"> <h1>contenido 6</h1> </template> <template v-if="menu==7"> <h1>contenido 7</h1> </template> <template v-if="menu==8"> <h1>contenido 8</h1> </template> @endsection <!-- end snippet --> Estimado @Geimy Puse adjunto print de pantalla de que esta referenciado en el directorio de mi visual studioen el directorio que indicas c:\xampp\htdocs\proyectolaravel [![introducir la descripción de la imagen aquí][4]][4] y Así es como me sale ahora que no me carga mi componente vue (Categoría.vue) que esta en la ruta /resources/js/components/Categoria.vue [![introducir la descripción de la imagen aquí][5]][5] [1]: https://i.sstatic.net/DmSce.jpg [2]: https://i.sstatic.net/41PjN.jpg [3]: https://i.sstatic.net/tcVmP.jpg [4]: https://i.sstatic.net/05Wb9.jpg [5]: https://i.sstatic.net/cTEae.jpg El código de mi archivo /resources/app.js es el siguiente: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> /** * First we will load all of this project's JavaScript dependencies which * includes Vue and other libraries. It is a great starting point when * building robust, powerful web applications using Vue and Laravel. */ require('./bootstrap'); window.Vue = require('vue'); /** * 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))) Vue.component('categoria', require('./components/Categoria.vue').default); /** * Next, we will create a fresh Vue application instance and attach it to * the page. Then, you may begin adding components to this application * or customize the JavaScript scaffolding to fit your unique needs. */ const app = new Vue({ el: '#app', data:{ menu:0 }, }); <!-- end snippet -->