Vuejs - Failed to mount component: template or render function not defined

Question

I am unsure what I am doing wrong. I get the below error:

error message in console:

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <VueChartjs>
       <Chatjsvue> at src\components\vueChartjs\Chatjsvue.vue
         <App> at src\App.vue
           <Root>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      // component: HelloWorld
      component: require('../components/HelloWorld.vue').default
    }
  ]
})

App.vue

<template>
  <div id="app" class="container">
    <img src="./assets/logo.png" class="logo">

    <!-- chartjs -->
    <div class="chartjsvue">
      <Chatjsvue></Chatjsvue>
    </div>
    <div class="clear"></div>
    <!-- chartjs -->

  </div>
</template>

<script>
import Chatjsvue from '@/components/vueChartjs/Chatjsvue'

export default {
  name: 'App',
  components: {
    Chatjsvue
  }
}
</script>

Chatjsvue.vue

<template src="../../views/chartjshtml/chartsjs.html"></template>

<script>
  import Chartjsvue from '@/assets/javascripts/chartjs'

  export default {
    components: {
      'vue-chartjs': Chartjsvue 
    }
  };
</script>

chartsjs.html

<div class="wrapper">
  <vue-chartjs></vue-chartjs>
</div>

chartjs.js

file is rmpty- no code in the file

What is the error referring to and what needs to be done to resolve it?

Answer 1

Thank you to everyone who contributed in answering. The js file should not be empty. This is the complete code to display all the charts for chartjs

main.js [src/main.js]

import Vue from 'vue'
import App from './App'
import router from './router'
import ChartJsPluginDataLabels from 'chartjs-plugin-datalabels'

Vue.config.productionTip = false

require('./assets/stylesheets/application.css')
require('./assets/javascripts/application.js')
require('./assets/javascripts/chartjs.js')


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { 
    App,
    ChartJsPluginDataLabels
  },
  template: '<App/>'
})

App.vue [src/App.vue]

<template>
  <div id="app" class="container">
    <!-- chartjs -->
    <div class="chartjsvue tab-content active" id="tab2">
      <Chatjsvue></Chatjsvue>
    </div>
    <div class="clear"></div>
    <!-- chartjs -->
  </div>
</template>

<script>
import Chatjsvue from '@/components/vueChartjs/Chatjsvue'
export default {
  name: 'App',
  components: {
    Chatjsvue
  }
}
</script>

Chatjsvue.vue [src/components/Chatjsvue.vue]

<template src="../../views/chartjshtml/chartsjs.html"></template>

<script>
  import Chartjsbarvue from '@/assets/javascripts/chartjsbar'
  export default {
    components: {
      'vue-chartbarjs': Chartjsbarvue   
    },
    mounted(){
      console.log('Data is chartjs',this)
    },
    methods: {},
  }
</script>

chartsjs.html [src/views/chartjshtml/chartsjs.html]

<div class="wrapper">
  <div class="chart_header">chartjs bar chart</div>
  <vue-chartbarjs></vue-chartbarjs>
</div>

chartjsbar.js [src/assets/javascripts/chartjsbar.js]

/*===================================================
    File: Chartsjsvue.vue
  ===================================================*/
import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  data () {
    return {
      datacollection: {
        labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
        datasets: [
          {
            label: '1st Dataset hello',
            backgroundColor: 'rgba(52,65,84, 0.3)',
            bordercolor: '#344154"',
            hoverBackgroundColor: "#344154",
            data: [40, 20, 12, 39]
          },
          {
            label: '2nd Dataset',
            backgroundColor: 'rgba(130,191,163, 0.5)',
            bordercolor: '#82BFA3"',
            hoverBackgroundColor: "#82BFA3",
            data: [50, 70, 22, 55]
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          datalabels: {
            display: false
          }
        }
      }
    }
  },
  mounted () {
    this.renderChart(this.datacollection, this.options)
  }
}

Answer 2

Your chartjs.js file shouldn't be empty. It should be a Vue component with a template that can be rendered. Any javascript can be written within the script tags themselves.

The components object should only contain the list of vue components you need to use in the current component. And each component must have a template.

Answer 3

I think the problem is your chartjs.js is empty. You need to do:

import template from './chartjs.html' // in your questions it's chartsjs.html, please help to correct it
export default {
  template: template
}