Movida lógica para registrar componentes a app.js y cambios para vite

resources/js/app.js

@@ -1,45 +1,25 @@
-/**
- * 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.
- */
+import * as bulmaToast from 'bulma-toast';
+import Vue from '../../node_modules/vue/dist/vue.esm.js';
 import axios from 'axios';
-import Vue from 'vue';
-
-window.Vue = require('vue');
-window.Event = new Vue();
-window.axios = axios;
-window.bulmaToast = require('bulma-toast');
-
-/**
- * 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>
- */
-import './components';
 import store from "./store";
 
-/**
- * Global methods
- */
-Vue.prototype.$toast = function (mensaje, duration = 2000) {
-    return window.bulmaToast.toast({
-        message: mensaje,
-        duration: duration,
-        type: 'is-danger',
-        position: 'bottom-center',
-    });
-}
+window.Vue = Vue;
+window.Event = new Vue();
+window.axios = axios;
+window.bulmaToast = bulmaToast;
+
+const components = import.meta.glob('./components/**/*.vue', { eager: true });
+Object.entries(components).forEach(([path, module]) => {
+    let name = path
+        .replace(/^\.\/components\//, '') // Remove leading folder
+        .replace(/\.vue$/, '')            // Remove file extension
+        .replace(/\//g, '-')              // Replace subfolders with hyphens
+        .replace(/([a-z])([A-Z])/g, '$1-$2') // camelCase to kebab-case
+        .toLowerCase();                   // Enforce kebab-case for HTML
+    Vue.component(name, module.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.
- */
 new Vue({
     el: '#root',
     store,
 });
-

resources/js/components.js

@@ -1,25 +0,0 @@
-import Vue from 'vue';
-
-const requireComponent = require.context('./components', true, /\.vue$/);
-
-// Registro automático de componentes:
-//  e.g. components/foo/bar/UnComponente.vue
-//       se registra como 'foo-bar-un-componente'
-requireComponent.keys().forEach(fileName => {
-    // Get the component config
-    const componentConfig = requireComponent(fileName);
-    // Get the PascalCase name of the component
-    const componentName = fileName
-        .replace(/^\.\/(.*)\.\w+$/, '$1')    // Remove "./" from the beginning and the file extension from the end
-        .replace(/\//g, '-')                 // Replace directories with hyphens
-        .replace(/([a-z])([A-Z])/g, '$1-$2') // Insert hyphen between camelCase words
-        .toLowerCase()                       // Convert to lowercase
-    // Globally register the component
-    Vue.component(
-        componentName,
-        // Look for the component options on `.default`, which will
-        // exist if the component was exported with `export default`,
-        // otherwise fall back to module's root.
-        componentConfig.default || componentConfig
-    );
-});