0

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)

1 Answer 1

2

Changing import Vue from 'vue/dist/vue.esm'; to import Vue from 'vue/dist/vue.js'; and putting

var homeElement = document.getElementById("admin_area_home")
  if (homeElement != null) {

before new Vue method, make things load now.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.