I had one page with 6 vue elemens in it, which one had his own separate file and i load on the same page with a render partial, then a div with its name, as we can see on my code. The problem is, on production, its rendering nothing, i simple get a blank HTML div with all the classes, but nothing inside, like they supose to look. I found some tips around that the production parts request another aproach from the VUE to work, using.
import Vue from 'vue'
and
const app = new Vue({
el: domElement,
render: h => h(RootComponent)
})
but i cant find a way on my project to put those things to work.
Heres my home.js where i import the files and use then as VUE components:
import TurbolinksAdapter from 'vue-turbolinks';
import Vue from 'vue/dist/vue.esm';
import VCharts from 'v-charts';
import BootstrapVue from 'bootstrap-vue';
import { Modal, Button } from 'bootstrap-vue/es/components';
import IndicatorsContainer from '../../admin_area/home/indicators-container';
import IndicatorsItem from '../../admin_area/home/indicators-item';
import SalesContainer from '../../admin_area/home/graphic-sales-container';
import TestsContainer from '../../admin_area/home/tests-container';
import TopCoaches from '../../admin_area/home/top-coaches';
import TopRegions from '../../admin_area/home/top-regions';
Vue.config.ignoredElements = [
'trix-toolbar',
'trix-editor',
'action-text-attachment'
]
Vue.use(TurbolinksAdapter);
Vue.use(VCharts);
Vue.use(BootstrapVue);
Vue.use(Modal);
Vue.use(Button);
document.addEventListener('turbolinks:load', () => {
new Vue({
el: '#admin_area_home',
components: {
'indicators-container': IndicatorsContainer,
'indicators-item': IndicatorsItem,
'graphic-sales-container': SalesContainer,
'tests-container': TestsContainer,
'top-coaches': TopCoaches,
'top-regions': TopRegions
}
})
})
Heres my index.html.haml when i mount the render partials order to the page:
.d-block.mt-3
= render partial: 'shared/messages'
.d-block#admin_area_home
= render partial: 'admin_area/home/partials/indicators'
= render partial: 'admin_area/home/partials/sales'
= render partial: 'admin_area/home/partials/tests'
.col-12.my-4
.row
.col-6.pl-0
= render partial: 'admin_area/home/partials/top-coaches'
.col-6.pr-0
= render partial: 'admin_area/home/partials/top-regions'
= javascript_pack_tag 'admin_area/home', 'data-turbolinks-track': 'reload'
Each partial looks like this, where i pass the data through URL props:
%top-coaches{:title => t('.title'), :year => t('.year'), :month => t('.month'), :url_coaches_year => admin_area_home_top_coaches_year_url, :url_coaches_month => admin_area_home_top_coaches_month_url}
And finally each .vue file looks like this (i'm using the fetch on vue data just to check if the data is comming on .json files correctly):
<template>
<fieldset>
<div class="c-indicators__legend d-flex justify-content-between">
<legend>{{ title }}</legend>
<select
id="filter"
name="filter"
class="form-control d-flex align-items-end col-4">
<option value="1" selected>{{ year }}</option>
<option value="2">{{ month }}</option>
</select>
</div>
<div class="c-indicators__card">
<div class="c-indicators__container">
<div id="admin_area" class="container">
<template>
<b-table striped hover :items="items" />
</template>
</div>
</div>
</div>
</fieldset>
</template>
<script>
export default{
props: [
'title',
'year',
'month',
'url_regions_year',
'url_regions_month'
],
data() {
return {
items: [
fetch(this.url_regions_year),
fetch(this.url_regions_month),
]
}
}
}
</script>
The page loads all the divs, select dropdowns and any other HTML element that i put in, but not the charts and tables that vue is supposed to render. Any advise? (warning, possible incorrect grammar arround, fell free to correct me)