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

app/Filtros/Filtro.php

@@ -12,7 +12,6 @@ use TypeError;
 class Filtro extends Model
 {
     protected Request $request;
-    protected $builder;
     protected array $MENSAJES_ERROR = [
     	'ARGUMENTO' => 'Argumento inválido para el parámetro %s. Revise la documentación.'
     ];

docker-compose.yml

@@ -18,6 +18,22 @@ services:
     networks:
       - app-network
 
+  vite:
+    build:
+      args:
+        user: www
+        uid: ${USERID}
+      context: ./
+    container_name: vite
+    working_dir: /var/www
+    command: npm run dev
+    volumes:
+      - ./:/var/www
+    ports:
+      - "5173:5173"
+    networks:
+      - app-network
+
   db:
     image: mysql:5.7
     container_name: pedi2-db

nginx/conf.d/app.conf

@@ -13,6 +13,22 @@ server {
         fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
         fastcgi_param PATH_INFO $fastcgi_path_info;
     }
+    location ^~ /@vite/ {
+        proxy_pass http://vite:5173;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+    location ^~ /resources/ {
+        proxy_pass http://vite:5173;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
     location / {
         try_files $uri $uri/ /index.php?$query_string;
         gzip_static on;

package.json

@@ -1,7 +1,8 @@
 {
     "private": true,
     "scripts": {
-        "dev": "npm run development",
+        "dev": "vite",
+        "build": "vite build",
         "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
         "watch": "npm run development -- --watch",
         "watch-poll": "npm run watch -- --watch-poll",
@@ -10,14 +11,15 @@
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
     },
     "devDependencies": {
-        "axios": "^0.19.2",
+        "@vitejs/plugin-vue2": "^2.3.3",
+        "axios": "^0.27.2",
         "cross-env": "^7.0.3",
-        "laravel-mix": "^5.0.1",
+        "laravel-vite-plugin": "^1.3.0",
-        "resolve-url-loader": "^2.3.1",
         "sass": "^1.20.1",
         "sass-loader": "^8.0.0",
-        "vue": "^2.5.17",
+        "vite": "^6.3.5",
-        "vue-template-compiler": "^2.6.10"
+        "vue": "^2.7.16",
+        "vue-template-compiler": "^2.7.16"
     },
     "dependencies": {
         "animate.css": "^4.1.1",

resources/js/app.js

@@ -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 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";
 
-/**
+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({
     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
-    );
-});

resources/js/components/AppLogin.vue

@@ -1,12 +1,12 @@
 <script>
 import LoginInput from "./login/LoginInput.vue";
-import LoginLoginTitulos from "./login/LoginTitulos.vue";
+import LoginTitulos from "./login/LoginTitulos.vue";
 import { mapGetters } from "vuex";
 import LoginDropdown from "./login/LoginDropdown.vue";
 
 export default {
-    name: 'LoginForm',
+    name: 'AppLogin',
-    components: { LoginDropdown, LoginTitulos: LoginLoginTitulos, LoginInput },
+    components: { LoginDropdown, LoginTitulos, LoginInput },
     computed: {
         ...mapGetters("login", ["estilos"])
     }
@@ -17,7 +17,7 @@ export default {
 <div id="login-form" :class="estilos.fondo">
     <section class="section">
         <div class="columns is-centered">
-            <div class="column is-half">
+            <div class="column is-three-quarters">
                 <login-dropdown class="is-hidden-tablet"/>
                 <login-titulos/>
                 <login-input/>

resources/js/components/comunes/TabsSecciones.vue

@@ -38,7 +38,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../../node_modules/bulma';
   hr {
     border: none;
     height: 1px;

resources/js/store/index.js

@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue from '../../../node_modules/vue/dist/vue.esm.js';
 import Vuex from 'vuex';
 import admin from "./modules/admin";
 import comisiones from "./modules/comisiones";

resources/sass/app.scss

@@ -4,8 +4,8 @@
 // Variables
 @import 'variables';
 
-@import 'bulma';
+@import '../../node_modules/bulma/bulma.sass';
-@import '~bulma-switch';
+@import '../../node_modules/bulma-switch/src/sass/index.sass';
 
 html, body {
     overflow-x: hidden;

resources/views/auth/login.blade.php

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{ config('app.name', 'Pedidos del MPS') }}</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
-    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
+    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
     <script src="https://kit.fontawesome.com/9235d1c676.js" crossorigin="anonymous"></script>
 </head>
 <body>
@@ -15,6 +15,5 @@
             <app-login></app-login>
         </form>
     </div>
-    <script src="{{ mix('js/app.js') }}" defer></script>
 </body>
 </html>

resources/views/layouts/app.blade.php

@@ -12,7 +12,7 @@
 
     <!-- Fonts -->
     <script src="https://kit.fontawesome.com/9235d1c676.js" crossorigin="anonymous"></script>
-    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
+    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
     @yield('stylesheets')
 </head>
 <body class="has-navbar-fixed-top">
@@ -28,8 +28,6 @@
             @yield('content')
         </main>
     </div>
-    <!-- Scripts -->
-    <script src="{{ mix('js/app.js') }}" defer></script>
     @yield('scripts')
 </body>
 </html>

routes/web.php

@@ -50,7 +50,7 @@ Route::get('/comisiones/login', 'ComisionesController@show')->name('comisiones.l
 Route::middleware(['auth', 'role:comision'])->group( function() {
     Route::get('/comisiones', 'RouteController@main')->name('comisiones');
     Route::get('/comisiones/pedidos/descargar', 'ComisionesController@descargarPedidos')->name('comisiones.pedidos.descargar');
-    Route::get('/comisiones/pedidos/notas', 'ComisionesController@descargarNotas')->name('comisiones.pedidos.descargar');
+    Route::get('/comisiones/pedidos/notas', 'ComisionesController@descargarNotas')->name('comisiones.pedidos.notas');
     Route::get('/comisiones/pedidos/pdf', 'ComisionesController@pdf')->name('comisiones.pedidos.pdf');
     Route::get('/comisiones/canasta/ejemplo', 'ComisionesController@descargarCanastaEjemplo')->name('comisiones.canasta.ejemplo');
     Route::post('/comisiones/canasta', 'ComisionesController@cargarCanasta')->name('comisiones.canasta');

vite.config.mjs

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue2';
+import laravel from 'laravel-vite-plugin';
+
+export default defineConfig({
+    server: {
+        host: '0.0.0.0',
+        port: 5173,
+    },
+    plugins: [
+        laravel({
+            input: ['resources/js/app.js', 'resources/sass/app.scss'],
+            refresh: true,
+        }),
+        vue(),
+    ],
+    resolve: {
+        alias: {
+            '@': '/resources/js',
+            'vue$': 'vue/dist/vue.esm.js',
+        },
+    },
+});

webpack.mix.js

@@ -1,4 +1,3 @@
-const mix = require('laravel-mix');
 
 /*
  |--------------------------------------------------------------------------
@@ -11,6 +10,9 @@ const mix = require('laravel-mix');
  |
  */
 
+const mix = require('laravel-mix');
+
 mix.js('resources/js/app.js', 'public/js')
+    .vue()
     .sass('resources/sass/app.scss', 'public/css')
     .version();