i try to mount a component in a component vue - laravel

Question

i i try to mount a component in a component, this component its a partial, in especifict its a paginator, which i need to integrate, i use props in the paginate component.
but i have a problem, in the console appears the next messagge "Failed to mount component: template or render function not defined." i am new in vue js, i using router-view i don´t know if this
it is affecting en the problem the code its the next :
Pedido.vue
<template>
<div id="pedido" style="margin-top:50px">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Pedidos</h4>
<div class="card-tools" style="position: absolute;right: 1rem;top: .5rem;">
<button type="button" class="btn btn-info" >
Nuevo
<i class="fas fa-plus"></i>
</button>
<button type="button" class="btn btn-primary" >
Recargar
<i class="fas fa-sync"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="mb-3">
<div class="row">
<div class="col-md-2">
<strong>Buscar por :</strong>
</div>
<div class="col-md-3">
<select class="form-control" id="fileds">
<option value="total">Codigo</option>
<option value="name">Nombre</option>
<option value="email">Apellido</option>
<option value="phone">Telefono</option>
<option value="address">Direccion</option>
</select>
</div>
<div class="col-md-7">
<input type="text" class="form-control" placeholder="Buscar">
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th scope="col">Codigo</th>
<th scope="col">Nombre</th>
<th scope="col">Apellido</th>
<th scope="col">Telefono</th>
<th scope="col">Rut</th>
<th scope="col" class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(pedido, index) in pedidos" :key="pedido.codigo">
<th scope="row">{{ index + 1}}</th>
<td>{{ pedido.nombre_cliente}}</td>
<td>{{ pedido.apellido_cliente }}</td>
<td>{{ pedido.telefono_cliente}}</td>
<td>{{ pedido.rut_cliente }}</td>
<td class="text-center">
<button type="button" class="btn btn-info btn-sm">
<i class="fas fa-eye"></i>
</button>
<button type="button" class="btn btn-primary btn-sm">
<i class="fas fa-edit"></i>
</button>
<button
type="button"
class="btn btn-danger btn-sm"
>
<i class="fas fa-trash-alt"></i>
</button>
</td>
</tr>
<tr >
<td colspan="6">
<div class="alert alert-danger" role="alert">No se ah encontrado resultados :(</div>
</td>
</tr>
</tbody>
</table>
<div class="card-footer">
<pagination
v-if="pagination.last_page > 1"
:pagination="pagination"
:offset="5"
#paginate="getData()"
></pagination>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
pedidos:[],
pagination: {
current_page: 1,
},
}
},
mounted() {
console.log('Component mounted.')
this.getData();
},
methods:{
getData(){
this.$Progress.start();
axios.get("api/pedidos?page=" + this.pagination.current_page)
.then(response =>{
this.pedidos = response.data.data;
this.pagination = response.data.meta;
this.$Progress.finish();
})
.catch(e =>{
console.log(e)
this.$Progress.fail();
})
//.then(({ data }) => (this.pedidos = data));
}
},
}
</script>
this its PaginationComponent.vue:
<template>
<nav aria-label="...">
<ul class="pagination justify-content-center">
<li class="page-item" :class="{ disabled: pagination.current_page <= 1 }">
<a class="page-link" #click.prevent="changePage(1)" >First page</a>
</li>
<li class="page-item" :class="{ disabled: pagination.current_page <= 1 }">
<a class="page-link" #click.prevent="changePage(pagination.current_page - 1)">Previous</a>
</li>
<li class="page-item" v-for="page in pages" :key="page" :class="isCurrentPage(page) ? 'active' : ''">
<a class="page-link" #click.prevent="changePage(page)">{{ page }}
<span v-if="isCurrentPage(page)" class="sr-only">(current)</span>
</a>
</li>
<li class="page-item" :class="{ disabled: pagination.current_page >= pagination.last_page }">
<a class="page-link" #click.prevent="changePage(pagination.current_page + 1)">Next</a>
</li>
<li class="page-item" :class="{ disabled: pagination.current_page >= pagination.last_page }">
<a class="page-link" #click.prevent="changePage(pagination.last_page)">Last page</a>
</li>
</ul>
</nav>
</template>
<script>
export default {
props:['pagination', 'offset'],
methods: {
isCurrentPage(page){
return this.pagination.current_page === page
},
changePage(page) {
if (page > this.pagination.last_page) {
page = this.pagination.last_page;
}
this.pagination.current_page = page;
this.$emit('paginate');
}
},
computed: {
pages() {
let pages = []
let from = this.pagination.current_page - Math.floor(this.offset / 2)
if (from < 1) {
from = 1
}
let to = from + this.offset -1
if (to > this.pagination.last_page) {
to = this.pagination.last_page
}
while (from <= to) {
pages.push(from)
from++
}
return pages
}
}
}
</script>
app.js
Vue.component('pagination', require('./components/partial/PaginationComponent.vue'));
const app = new Vue({
el: '#app',
router
});
this its the error
but in the extension of vue in the console i see the
properties of the object, this is fine,
but I do not know what I'm doing wrong, like I said I'm new to this.
extension of vue
I hope they understand me,
I would greatly appreciate your help.

Answer 1

Pedido.vue
export default {
components: { pagination },
data(){ ....
maybe is this problem

Answer 2

On the file app.js you apart from especify where you are mounting your component (in this case on the div with id "app"), you also need to tell Vue what to render.
Your component on the app.js file should include a template or a render function, that's why you are getting the error "Failed to mount component: template or render function not defined.
You can add it like this:
const app = new Vue({
el: '#app',
router,
template: '<pagination/>'
});
Or using the render function like this:
import Pagination from './components/partial/PaginationComponent.vue'
const app = new Vue({
el: '#app',
router,
render: (h) => h(Pagination)
});

Answer 3

well, i tried with their answer, but dont worked ,
I managed to solve it by adding:
Vue.component('pagination', require('./components/partial/PaginationComponent.vue').default);