nathalie/pedi2
3
3
Fork 1
Code Issues Pull requests 1 Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Alejandro Tasistro 2025-07-08 16:18:37 -03:00
parent 44f0d8c66b
commit 502aefd7a8
2 changed files with 17 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
resources/js/app.js vendored
View file

@ -1,45 +1,25 @@
/** import * as bulmaToast from 'bulma-toast';
* First we will load all of this project's JavaScript dependencies which import Vue from '../../node_modules/vue/dist/vue.esm.js';
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
import axios from 'axios'; 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"; import store from "./store";
/** window.Vue = Vue;
* Global methods window.Event = new Vue();
*/ window.axios = axios;
Vue.prototype.$toast = function (mensaje, duration = 2000) { window.bulmaToast = bulmaToast;
return window.bulmaToast.toast({
message: mensaje, const components = import.meta.glob('./components/**/*.vue', { eager: true });
duration: duration, Object.entries(components).forEach(([path, module]) => {
type: 'is-danger', let name = path
position: 'bottom-center', .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({ new Vue({
el: '#root', el: '#root',
store, store,
}); });

25
resources/js/components.js vendored
View file

@ -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
);
});