package.json

@@ -11,24 +11,21 @@
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
     },
     "devDependencies": {
-        "@types/axios": "^0.9.36",
         "@vitejs/plugin-vue2": "^2.3.3",
         "axios": "^0.27.2",
         "cross-env": "^7.0.3",
         "laravel-vite-plugin": "^1.3.0",
         "sass": "^1.20.1",
         "sass-loader": "^8.0.0",
-        "typescript": "^5.4.5",
+        "vite": "^6.3.5",
-        "vite": "^5.2.8"
+        "vue": "^2.7.16",
+        "vue-template-compiler": "^2.7.16"
     },
     "dependencies": {
-        "vue": "^2.7.16",
-        "vue-template-compiler": "^2.7.16",
         "animate.css": "^4.1.1",
         "bulma": "^0.9.4",
         "bulma-switch": "^2.0.4",
         "bulma-toast": "^2.4.1",
-        "vue-router": "^3.5.4",
         "vuex": "^3.6.2"
     }
 }

resources/js/app.js

@@ -2,9 +2,12 @@ import * as bulmaToast from 'bulma-toast';
 import Vue from '../../node_modules/vue/dist/vue.esm.js';
 import axios from 'axios';
 import store from "./store";
-import './shims-vue.d.ts';
 
-// Registro de components
+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
@@ -13,14 +16,9 @@ Object.entries(components).forEach(([path, module]) => {
         .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 as any).default);
+    Vue.component(name, module.default);
 });
 
-window.Vue = Vue;
-window.Event = new Vue();
-window.axios = axios;
-window.bulmaToast = bulmaToast;
-
 new Vue({
     el: '#root',
     store,

resources/js/components/comisiones/Body.vue

@@ -27,6 +27,7 @@ import DropdownDescargar from "./DropdownDescargar.vue";
 import InputFileButton from "../comunes/InputFileButton.vue";
 import CanastaSeccion from "./canasta/CanastaSeccion.vue";
 import SaldosSeccion from "./saldos/SaldosSeccion.vue";
+import { mapActions } from "vuex";
 
 export default {
     name: "ComisionesBody",

resources/js/globals.d.ts

@@ -1,10 +0,0 @@
-declare global {
-    interface Window {
-        Vue: typeof Vue;
-        Event: InstanceType<typeof Vue>;
-        axios: typeof axios;
-        bulmaToast: {
-            toast: (options: any) => void;
-        };
-    }
-}

resources/js/shims-vue.d.ts

@@ -1,5 +0,0 @@
-// resources/js/shims-vue.d.ts
-declare module '*.vue' {
-    import Vue from '../../node_modules/vue/dist/vue.esm.js';
-    export default Vue;
-}

resources/js/store/index.js

@@ -1,8 +1,8 @@
 import Vue from '../../../node_modules/vue/dist/vue.esm.js';
 import Vuex from 'vuex';
-import login from "./modules/login";
 import admin from "./modules/admin";
 import comisiones from "./modules/comisiones";
+import login from "./modules/login";
 import pedido from "./modules/pedido";
 import productos from "./modules/productos";
 import ui from "./modules/ui";
@@ -11,9 +11,9 @@ Vue.use(Vuex);
 
 export default new Vuex.Store({
     modules: {
-        login,
         admin,
         comisiones,
+        login,
         pedido,
         productos,
         ui,

resources/js/store/modules/admin.js

@@ -1,25 +1,24 @@
 import axios from "axios";
-import { AdminState } from "./types";
 
-const state: AdminState = {
+const state = {
-    lastFetch: undefined,
+    lastFetch: null,
-    grupo_de_compra_id: undefined,
+    grupo_de_compra_id: null,
-    nombre: undefined,
+    nombre: null,
-    devoluciones_habilitadas: undefined,
+    devoluciones_habilitadas: null,
-    pedidos: [],
+    pedidos: null,
-    total_a_recaudar: undefined,
+    total_a_recaudar: null,
-    total_sin_devoluciones: undefined,
+    total_sin_devoluciones: null,
-    total_barrial: undefined,
+    total_barrial: null,
-    total_devoluciones: undefined,
+    total_devoluciones: null,
-    total_de_pedido: undefined,
+    total_de_pedido: null,
-    total_a_transferir: undefined,
+    total_a_transferir: null,
-    total_transporte: undefined,
+    total_transporte: null,
-    cantidad_transporte: undefined,
+    cantidad_transporte: null,
-    saldo: undefined,
+    saldo: null,
 };
 
 const mutations = {
-    setState(state: AdminState, { grupo_de_compra }) {
+    setState(state, { grupo_de_compra }) {
         state.lastFetch = new Date();
         state.grupo_de_compra_id = grupo_de_compra.id;
         state.nombre = grupo_de_compra.nombre;
@@ -42,8 +41,8 @@ const mutations = {
 
 const actions = {
     async getGrupoDeCompra({ commit }) {
-        const { data } = await axios.get('/user/grupo_de_compra');
+        const response = await axios.get('/user/grupo_de_compra');
-        commit('setState', data);
+        commit('setState', response.data);
     },
     async setAprobacionPedido({ commit, dispatch }, { pedido_id, aprobacion }){
         await axios.post("/api/admin/subpedidos/" + pedido_id + "/aprobacion", { aprobacion: aprobacion });
@@ -60,7 +59,7 @@ const actions = {
 
 const getters = {
     grupoDeCompraDefinido() {
-      return state.lastFetch !== undefined;
+      return state.lastFetch !== null;
     },
     hayPedidos() {
         return state.pedidos?.length > 0;

resources/js/store/modules/admin/types.ts

@@ -1,47 +0,0 @@
-export interface AdminState extends Barrio {
-    lastFetch?: Date
-}
-export interface Barrio {
-    grupo_de_compra_id?: number,
-    nombre?: string,
-    devoluciones_habilitadas?: boolean,
-    pedidos: Pedido[],
-    total_a_recaudar?: number,
-    total_sin_devoluciones?: number,
-    total_barrial?: number,
-    total_devoluciones?: number,
-    total_de_pedido?: number,
-    total_a_transferir?: number,
-    total_transporte?: number,
-    cantidad_transporte?: number,
-    saldo?: number,
-}
-
-export interface Pedido {
-    id: number,
-    nombre: string,
-    productos: Producto[],
-    aprobado: boolean,
-    total: number,
-    total_transporte: number,
-    cantidad_transporte: number,
-    total_sin_devoluciones: number,
-    devoluciones_total: number,
-    devoluciones_notas: string
-}
-
-export interface Producto {
-    id: number,
-    fila: number,
-    nombre: string,
-    precio: number,
-    categoria: string,
-    bono: boolean,
-    created_at: Date,
-    updated_at: Date,
-    requiere_notas: boolean,
-    es_solidario: boolean,
-    notas: string,
-    cantidad: number,
-    total: number,
-}

resources/js/store/modules/comisiones.js

@@ -1,27 +1,26 @@
 import axios from "axios";
-import { ComisionesState } from "./types";
 
-const state: ComisionesState = {
+const state = {
     lastFetch: undefined,
     grupos_de_compra: [],
 };
 
 const mutations = {
-    setGruposDeCompra(state: ComisionesState, { data }) {
+    setGruposDeCompra(state, { data }) {
         state.grupos_de_compra = data;
         state.lastFetch = new Date();
     },
-    setSaldo(state: ComisionesState, { gdc_id, saldo }) {
+    setSaldo(state, { gdc_id, saldo }) {
         const barrio = state.grupos_de_compra.find(gdc => gdc.id === gdc_id);
-        const i = state.grupos_de_compra.indexOf(barrio!);
+        const i = state.grupos_de_compra.indexOf(barrio);
         state.grupos_de_compra[i].saldo = saldo;
     },
 };
 
 const actions = {
     async getGruposDeCompra({ commit }) {
-        const { data } = await axios.get('/api/grupos-de-compra/saldos');
+        const response = await axios.get('/api/grupos-de-compra/saldos');
-        commit('setGruposDeCompra', data);
+        commit('setGruposDeCompra', response.data);
     },
     async setSaldo({ commit, dispatch }, { gdc_id, saldo }) {
         try {

resources/js/store/modules/comisiones/types.ts

@@ -1,10 +0,0 @@
-export interface ComisionesState {
-    lastFetch?: Date,
-    grupos_de_compra: Barrio[],
-}
-
-export interface Barrio {
-    id: number,
-    nombre: string,
-    saldo: number,
-}

resources/js/store/modules/login.js

@@ -1,23 +1,22 @@
 import axios from "axios";
-import { Estilos, LoginState, OpcionLogin, Textos, UrlRol, UserRol } from "./types";
 
-const state: LoginState = {
+const state = {
-    regiones: [],
+    regiones: null,
-    grupos_de_compra: [],
+    grupos_de_compra: null,
-    region_elegida: undefined,
+    region_elegida: null,
-    grupo_de_compra_elegido: undefined,
+    grupo_de_compra_elegido: null,
-    rol: undefined,
+    rol: null,
 };
 
 const mutations = {
-    setRegiones(state, { regiones }): void {
+    setRegiones(state, { regiones }) {
         state.regiones = regiones;
     },
-    setRegionYBarrios(state, { region, grupos_de_compra }): void {
+    setRegionYBarrios(state, { region, grupos_de_compra }) {
         state.region_elegida = region;
         state.grupos_de_compra = grupos_de_compra;
     },
-    selectGrupoDeCompra(state, { grupo_de_compra }): void {
+    selectGrupoDeCompra(state, { grupo_de_compra }) {
         state.grupo_de_compra_elegido = grupo_de_compra;
     },
     setRol(state, { rol }) {
@@ -26,29 +25,29 @@ const mutations = {
 };
 
 const actions = {
-    async getRegiones({ commit }): Promise<void> {
+    async getRegiones({ commit }) {
-        const { data } = await axios.get("/api/regiones");
+        const response = await axios.get("/api/regiones");
-        commit('setRegiones', { regiones: data });
+        commit('setRegiones', { regiones: response.data });
     },
-    async selectRegion({ commit }, { region }): Promise<void> {
+    async selectRegion({ commit }, { region }) {
-        const { data } = await axios.get(`/api/regiones/${region}`);
+        const response = await axios.get(`/api/regiones/${region}`);
-        commit('setRegionYBarrios', { region: region, grupos_de_compra: data });
+        commit('setRegionYBarrios', { region: region, grupos_de_compra: response.data });
     },
-    async getRol({ commit }): Promise<void> {
+    async getRol({ commit }) {
-        const { data }: UserRol = await axios.get("/user/rol");
+        const response = await axios.get("/user/rol");
-        commit('setRol', { rol: data.rol });
+        commit('setRol', { rol: response.data.rol });
     }
 };
 
 const getters = {
-    urlRol(): UrlRol {
+    urlRol() {
         let split = window.location.pathname
             .replace('login', '')
             .split('/')
             .filter(x => x.length);
-        return split[0] as UrlRol ?? 'pedido';
+        return split[0] ?? 'pedido';
     },
-    textos(): Textos {
+    textos() {
         let rol = getters.urlRol();
         switch (rol) {
             case 'admin':
@@ -79,7 +78,7 @@ const getters = {
                 throw new Error("Url inválida");
         }
     },
-    estilos(): Estilos {
+    estilos() {
         let rol = getters.urlRol();
         switch (rol) {
             case 'admin':
@@ -104,7 +103,7 @@ const getters = {
                 throw new Error("Url inválida");
         }
     },
-    opcionesLogin(): OpcionLogin[] {
+    opcionesLogin() {
         let rol = getters.urlRol();
         switch (rol) {
             case 'admin':

resources/js/store/modules/login/types.ts

@@ -1,43 +0,0 @@
-export interface LoginState {
-    regiones: string[],
-    grupos_de_compra: Barrio[],
-    region_elegida?: string,
-    grupo_de_compra_elegido?: Barrio,
-    rol?: Rol,
-}
-
-export interface Textos {
-    titulo: string,
-    subtitlo: string,
-    password: string,
-    ayuda: string,
-    label: string,
-}
-
-export interface Estilos {
-    fondo: string,
-    texto: string,
-    botones: string,
-}
-
-export interface OpcionLogin {
-    nombre: string,
-    href: string,
-}
-
-export interface Barrio {
-    id: number,
-    nombre: string,
-    region: string,
-    created_at: Date,
-    updated_at: Date,
-    devoluciones_habilitadas: boolean,
-    saldo: number,
-}
-
-export interface UserRol {
-    rol: Rol
-}
-
-export type UrlRol = 'pedido' | 'admin' | 'comisiones';
-export type Rol = 'barrio' | 'admin_barrio' | 'comision';

resources/js/store/modules/pedido.js

@@ -1,26 +1,25 @@
 import axios from "axios";
-import { PedidoState } from "./types";
 
-const state: PedidoState = {
+const state = {
-    lastFetch: undefined,
+    lastFetch: null,
-    grupo_de_compra: undefined,
+    grupo_de_compra: null,
-    pedido_id: undefined,
+    pedido_id: null,
-    nombre: undefined,
+    nombre: null,
-    productos: [],
+    productos: null,
-    aprobado: undefined,
+    aprobado: null,
-    total: undefined,
+    total: null,
-    total_transporte: undefined,
+    total_transporte: null,
-    cantidad_transporte: undefined,
+    cantidad_transporte: null,
-    total_sin_devoluciones: undefined,
+    total_sin_devoluciones: null,
-    devoluciones_total: undefined,
+    devoluciones_total: null,
-    devoluciones_notas: undefined,
+    devoluciones_notas: null,
 };
 
 const mutations = {
-    setGrupoDeCompra(state: PedidoState, grupo_de_compra) {
+    setGrupoDeCompra(state, grupo_de_compra) {
         state.grupo_de_compra = grupo_de_compra;
     },
-    setPedido(state: PedidoState, pedido) {
+    setPedido(state, pedido) {
         state.lastFetch = new Date();
         state.pedido_id = pedido.id;
         state.nombre = pedido.nombre;
@@ -33,50 +32,50 @@ const mutations = {
         state.devoluciones_total = pedido.devoluciones_total;
         state.devoluciones_notas = pedido.devoluciones_notas;
     },
-    reset(state: PedidoState) {
+    reset(state) {
-        state.lastFetch = undefined;
+        state.lastFetch = null;
-        state.pedido_id = undefined;
+        state.pedido_id = null;
-        state.nombre = undefined;
+        state.nombre = null;
-        state.productos = [];
+        state.productos = null;
-        state.aprobado = undefined;
+        state.aprobado = null;
-        state.total = undefined;
+        state.total = null;
-        state.total_transporte = undefined;
+        state.total_transporte = null;
-        state.cantidad_transporte = undefined;
+        state.cantidad_transporte = null;
-        state.total_sin_devoluciones = undefined;
+        state.total_sin_devoluciones = null;
-        state.devoluciones_total = undefined;
+        state.devoluciones_total = null;
-        state.devoluciones_notas = undefined;
+        state.devoluciones_notas = null;
     }
 };
 
 const actions = {
     async getGrupoDeCompra({ commit }) {
-        const { data } = await axios.get('/user/grupo_de_compra');
+        const response = await axios.get('/user/grupo_de_compra');
-        commit('setGrupoDeCompra', data.grupo_de_compra);
+        commit('setGrupoDeCompra', response.data.grupo_de_compra);
     },
     async guardarSesion(_, { pedido_id }) {
         await axios.post("/pedido/sesion", { id: pedido_id });
     },
     async crearPedido({ commit, dispatch }, { nombre, grupo_de_compra_id }) {
-        const { data } = await axios.post("/api/subpedidos", {
+        const response = await axios.post("/api/subpedidos", {
             nombre: nombre,
             grupo_de_compra_id: grupo_de_compra_id
         });
-        dispatch("guardarSesion", { pedido_id: data.data.id});
+        dispatch("guardarSesion", { pedido_id: response.data.data.id});
-        commit('setPedido', data.data);
+        commit('setPedido', response.data.data);
     },
     async elegirPedido({ commit, dispatch }, { pedido_id }) {
-        const { data } = await axios.get(`/api/subpedidos/${pedido_id}`);
+        const response = await axios.get(`/api/subpedidos/${pedido_id}`);
         dispatch("guardarSesion", { pedido_id: pedido_id})
-        commit('setPedido', data.data);
+        commit('setPedido', response.data.data);
     },
     async modificarChismosa({ commit, dispatch }, { producto_id, cantidad, notas }) {
         try {
-            const { data } = await axios.post("/api/subpedidos/" + state.pedido_id + "/sync", {
+            const response = await axios.post("/api/subpedidos/" + state.pedido_id + "/sync", {
                 cantidad: cantidad,
                 producto_id: producto_id,
                 notas: notas,
             });
-            commit('setPedido', data.data);
+            commit('setPedido', response.data.data);
             dispatch("ui/toast", { mensaje: 'Pedido modificado con éxito' }, { root: true });
         } catch (error) {
             dispatch("ui/error", { error: error }, { root: true });
@@ -84,11 +83,11 @@ const actions = {
     },
     async modificarDevoluciones({ commit, dispatch }, { monto, notas }) {
         try {
-            const { data } = await axios.post("api/subpedidos/" + state.pedido_id + "/sync_devoluciones", {
+            const response = await axios.post("api/subpedidos/" + state.pedido_id + "/sync_devoluciones", {
                 total: monto,
                 notas: notas,
             });
-            commit('setPedido', data.data);
+            commit('setPedido', response.data.data);
             dispatch("ui/toast", { mensaje: 'Devoluciones modificadas con éxito' }, { root: true });
         } catch (error) {
             dispatch("ui/error", { error: error }, { root: true });
@@ -104,16 +103,16 @@ const actions = {
 
 const getters = {
     pedidoDefinido() {
-        return state.lastFetch !== undefined;
+        return state.lastFetch !== null;
     },
     enChismosa() {
         return ((producto_id) => state.productos.some(p => p.id === producto_id));
     },
     cantidad() {
-        return ((producto_id) => state.productos.find(p => p.id === producto_id)?.cantidad ?? 0);
+        return ((producto_id) => state.productos.find(p => p.id === producto_id)?.pivot.cantidad ?? 0);
     },
     notas() {
-        return ((producto_id) => state.productos.find(p => p.id === producto_id)?.notas ?? "");
+        return ((producto_id) => state.productos.find(p => p.id === producto_id)?.pivot.notas ?? "");
     }
 }
 

resources/js/store/modules/pedido/types.ts

@@ -1,36 +0,0 @@
-export interface PedidoState {
-    lastFetch?: Date,
-    grupo_de_compra?: Barrio,
-    pedido_id?: number,
-    nombre?: string,
-    productos: Producto[],
-    aprobado?: boolean,
-    total?: number,
-    total_transporte?: number,
-    cantidad_transporte?: number,
-    total_sin_devoluciones?: number,
-    devoluciones_total?: number,
-    devoluciones_notas?: string,
-}
-
-export interface Barrio {
-    id: number,
-    nombre: string,
-    devoluciones_habilitadas: boolean,
-}
-
-export interface Producto {
-    id: number,
-    fila: number,
-    nombre: string,
-    precio: number,
-    categoria: string,
-    bono: boolean,
-    created_at: Date,
-    updated_at: Date,
-    requiere_notas: boolean,
-    es_solidario: boolean,
-    cantidad: number,
-    total: number,
-    notas: string,
-}

resources/js/store/modules/productos.js

@@ -1,23 +1,22 @@
 import axios from "axios";
-import { ProductosState } from "./types";
 
-const state: ProductosState = {
+const state = {
-    lastFetch: undefined,
+    lastFetch: null,
     categorias: [],
     productos: [],
-    filtro: undefined,
+    filtro: null,
 };
 
 const mutations = {
-    setCategorias(state: ProductosState, categorias) {
+    setCategorias(state, categorias) {
         state.lastFetch = new Date();
         state.categorias = categorias;
     },
-    setProductos(state: ProductosState, productos) {
+    setProductos(state, productos) {
         state.lastFetch = new Date();
         state.productos = productos;
     },
-    setFiltro(state: ProductosState, filtro) {
+    setFiltro(state, filtro) {
         state.lastFetch = new Date();
         state.filtro = filtro;
     },
@@ -29,23 +28,23 @@ const actions = {
         dispatch('getProductos');
     },
     async getCategorias({ commit }) {
-        const { data } = await axios.get('api/categorias');
+        const response = await axios.get('api/categorias');
-        commit('setCategorias', data);
+        commit('setCategorias', response.data);
     },
     async getProductos({ commit }) {
-        const { data } = await axios.get("/api/productos");
+        const response = await axios.get("/api/productos");
-        commit('setFiltro', undefined);
+        commit('setFiltro', null);
-        commit('setProductos', data.data);
+        commit('setProductos', response.data.data);
     },
     async seleccionarCategoria({ dispatch }, { categoria }) {
         dispatch('filtrarProductos', { filtro: "categoria", valor: categoria });
     },
     async filtrarProductos({ commit }, { filtro, valor }) {
-        const { data } = await axios.get("/api/productos", {
+        const response = await axios.get("/api/productos", {
             params: { [filtro]: valor }
         });
         commit('setFiltro', { clave: filtro, valor: valor });
-        commit('setProductos', data.data);
+        commit('setProductos', response.data.data);
     }
 };
 

resources/js/store/modules/productos/types.ts

@@ -1,21 +0,0 @@
-export interface ProductosState {
-    lastFetch?: Date,
-    categorias: string[],
-    productos: Producto[],
-    filtro?: Filtro,
-}
-
-export interface Producto {
-    id: number,
-    nombre: string,
-    precio: number,
-    categoria: string,
-    economia_solidaria: boolean,
-    nacional: boolean,
-    requiere_notas: boolean,
-}
-
-export interface Filtro {
-    clave: string,
-    valor: string,
-}

resources/js/store/modules/ui.js

@@ -1,12 +1,10 @@
-import { UiState } from "./types";
+const state = {
-
-const state: UiState = {
     show_chismosa: false,
     show_devoluciones: false,
     show_tags: true,
     tags_interactuada: false,
     migas: [{ nombre: 'Pedidos', action: 'pedido/resetear' }],
-    canasta_actual: undefined,
+    canasta_actual: null,
 };
 
 const mutations = {
@@ -28,7 +26,7 @@ const mutations = {
         state.migas.push(miga);
     },
     popUltimaBusqueda(state) {
-        if (!state.migas.at(-1)?.action)
+        if (!state.migas.at(-1).action)
             state.migas.pop();
     },
     reset(state) {
@@ -39,8 +37,8 @@ const mutations = {
 
 const actions = {
     async getCanastaActual({ commit }) {
-        const { data } = await axios.get('/api/canasta-actual');
+        const response = await axios.get('/api/canasta-actual');
-        commit("setCanastaActual", { canasta: data });
+        commit("setCanastaActual", { canasta: response.data });
     },
     clickMiga({ dispatch }, { miga }) {
         let dropWhile = (array, pred) => {

resources/js/store/modules/ui/types.ts

@@ -1,20 +0,0 @@
-
-export interface UiState {
-    show_chismosa: boolean,
-    show_devoluciones: boolean,
-    show_tags: boolean,
-    tags_interactuada: boolean,
-    migas: Miga[],
-    canasta_actual?: DatosCanasta,
-}
-
-export interface Miga {
-    nombre: string,
-    action: string,
-    arguments?: { [key: string]: string },
-}
-
-export interface DatosCanasta {
-    nombre: string,
-    fecha: Date,
-}

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">
-    @vite(['resources/sass/app.scss', 'resources/js/app.ts'])
+    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
     <script src="https://kit.fontawesome.com/9235d1c676.js" crossorigin="anonymous"></script>
 </head>
 <body>

resources/views/layouts/app.blade.php

@@ -12,7 +12,7 @@
 
     <!-- Fonts -->
     <script src="https://kit.fontawesome.com/9235d1c676.js" crossorigin="anonymous"></script>
-    @vite(['resources/sass/app.scss', 'resources/js/app.ts'])
+    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
     @yield('stylesheets')
 </head>
 <body class="has-navbar-fixed-top">

tsconfig.json

@@ -1,17 +0,0 @@
-{
-    "compilerOptions": {
-        "target": "esnext",
-        "module": "esnext",
-        "moduleResolution": "node",
-        "lib": ["esnext", "dom"],
-        "jsx": "preserve",
-        "esModuleInterop": true,
-        "allowSyntheticDefaultImports": true,
-        "strict": true,
-        "forceConsistentCasingInFileNames": true,
-        "noImplicitAny": false,
-        "skipLibCheck": true,
-        "types": ["vite/client"]
-    },
-    "include": ["resources/js/**/*", "resources/**/*.vue"]
-}

vite.config.mjs

@@ -9,7 +9,7 @@ export default defineConfig({
     },
     plugins: [
         laravel({
-            input: ['resources/js/app.ts', 'resources/sass/app.scss'],
+            input: ['resources/js/app.js', 'resources/sass/app.scss'],
             refresh: true,
         }),
         vue(),

webpack.mix.js

@@ -0,0 +1,18 @@
+
+/*
+ |--------------------------------------------------------------------------
+ | Mix Asset Management
+ |--------------------------------------------------------------------------
+ |
+ | Mix provides a clean, fluent API for defining some Webpack build steps
+ | for your Laravel application. By default, we are compiling the Sass
+ | file for the application as well as bundling up all the JS files.
+ |
+ */
+
+const mix = require('laravel-mix');
+
+mix.js('resources/js/app.js', 'public/js')
+    .vue()
+    .sass('resources/sass/app.scss', 'public/css')
+    .version();