using laravel and vuejs i've deployed a simple application. Since the deployment i keep adding more features to the app. Yesterday i've updated the production server adding the new features, but the vue new vue components doesnt seem to work. I get the following error. ** Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in )
** I've runned npm run dev, npm run production and still cannot make it work. Also checked the files exists on the server. Its weirs cause its work locally but on production it doesnt even find the file.
This is my app.js
require('./bootstrap');
window.Vue = require('vue');
//const files = require.context('./', true, /\.vue$/i)
//files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('planillae', require('./components/PlanillaExtra.vue').default);
Vue.component('hora', require('./components/Hora.vue').default);
Vue.component('stats', require('./components/Stat.vue').default);
Vue.component('vacation', require('./components/Vacation.vue').default);
Vue.component('vacation-detail', require('./components/VacationDetail.vue').default);
Vue.component('cuadro', require('./components/Cuadro.vue').default);
Vue.component('importv', require('./components/Importv.vue').default);
Vue.component('atrasada',require('./components/Atrasada.vue').default);
Vue.component('nueval',require('./components/NuevaLiquidacion.vue').default);
Vue.component('detalle',require('./components/Detalle.vue').default);
const app = new Vue({
el: '#app',
});
My Vue file
<template>
<div>
<div class="container-fluid mt--7">
<div class="row mt-5">
<div class="col-xl-12 mb-5 mb-xl-0">
<div class="card shadow">
<div class="card-header border-0">
<div class="row align-items-center">
<div class="col">
<h2 class="mb-3">Crear liquidación</h2>
</div>
</div>
</div>
<form @submit.prevent="crear_liquidacion" class="padding-form">
<div class="container">
<div class="row">
<div class="col-sm">
<div class="form-group col-auto">
<label for="">Seleccionar empleado</label>
<v-select v-model="data.empleado" :options="empleados" :reduce="empleados => empleados.id" label="fullname" @input="getSucursal()">
<template #search="{attributes, events}">
<input class="vs__search"
:required="!data.empleado"
v-bind="attributes" v-on="events">
</template>
</v-select>
<div v-if="errors && errors.empleado" class="text-danger">{{ errors.empleado[0] }}</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm">
<div class="form-group col-auto">
<label for="">Sucursales</label>
<div v-for="(sucursal, index) in sucursales" :key="index">
<div class="custom-control custom-radio mb-3">
<input type="radio" name="suc" :id="`radio-${sucursal.id}`" v-model="data.sucursal" class="custom-control-input"
:value="sucursal.id_sucursal" @input="buscar_fecha(sucursal.id_sucursal)" required>
<label :for="`radio-${sucursal.id}`" class="custom-control-label">{{sucursal.sucursales.nombre}}</label>
</div>
</div>
<div v-if="errors && errors.sucursal" class="text-danger">{{ errors.sucursal[0] }}</div> <br>
<template v-if="msg">
<small v-if="fecha.contrato_inicio">Tenga en cuenta que la fecha de inicio de contrato de este trabajador en este negocio es: {{fecha.contrato_inicio}}</small>
<small v-else>No hay regístro de inicio de contrato en este negocio</small>
</template>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm">
<div class="form-group col-auto">
<label for="">Tipo de liquidación</label>
<select v-model="data.liquidacion" class="form-control form-control-alternative" required>
<option value="">Seleccine una opción</option>
<option v-for="(tips, index) in tipo" :key="index" :value="tips.id">{{tips.nombre}}</option>
</select>
</div>
</div>
</div>
</div>
<div class="container text-center">
<button class="btn btn-primary">Crear liquidación</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import vSelect from 'vue-select';
import "vue-select/dist/vue-select.css";
export default {
name: "nueval",
data() {
return {
empleados: [],
data: {},
sucursales: [],
errors: {},
msg: null,
fecha: {},
tipo: []
}
},
mounted(){
this.obtener_data();
this.obtener_tipo();
},
methods: {
crear_liquidacion()
{
axios.post("/liquidaciones/generar-liquidacion", this.data).then(resp => {
window.location.href = "/liquidaciones/agregar-detalles/" + resp.data;
}).catch(error => {
console.log(error);
})
},
obtener_tipo(){
axios.get("/liquidaciones/obtener-tipo").then(response => {
this.tipo = response.data;
})
},
obtener_data()
{
axios.get("/vacaciones/create-vue").then(response => {
this.empleados = response.data;
this.empleados.map(function(x){
return x.fullname = x.cedula + ", " + x.nombre + " " + x.apellido;
});
});
},
getSucursal()
{
this.msg = false;
this.sucursales = null;
if(this.data.empleado)
{
axios.get("/vacaciones/getNegocios/" + this.data.empleado)
.then(resp => {
this.sucursales = resp.data;
});
this.sucursales = null;
}
},
buscar_fecha(sucursal)
{
axios.post("/vacaciones/vacaciones-buscar-fecha",{
sucursal: sucursal,
empleado: this.data.empleado
}).then(resp => {
this.msg = true;
this.fecha = resp.data;
}).catch(error => {
console.log(error.response);
})
}
},
components: {
vSelect
}
}
</script>
My package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"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",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"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",
"bootstrap": "^4.0.0",
"cross-env": "^7.0",
"jquery": "^3.2",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"vue": "^2.6.12",
"vue-template-compiler": "^2.6.10",
"vue-js-modal": "^2.0.0-rc.6",
"vue-multiselect": "^2.1.6",
"vue-select": "^3.11.2"
},
"dependencies": {
}
}