[Vuejs]-Vue template or render function not defined

1👍

You are getting that error because your App has no render template specified at all, new Vue() is missing render option called Render Function.

This would contain the minimum required HTML for the app to work where most importantly: <div id="app"></div> is required because the el option set to #app is telling Vue what html element it should mount it’s self to when rendering.

The most common way of of providing the instance with a template is to have a dedicated component that would be home to apps top level html layout but the minimum requirement is as follows:

// App.vue

<template>

  <div id="app"></div>

</template>
// app.js

import Vue from 'vue'
import App from './App.vue' // <-- MAIN TEMPLATE
import router from './router'

const app = new Vue({
  el: '#app',
  render: h => h(App), // <-- REGISTER MAIN TEMPLATE
  router
});

However since this source appears to be a Laravel Project, clearly the HTML is in a blade template rendered server side and I always find Laravel rendering Vue components server side to be a wonkey concept, I prefer an SPA with Laravel Acting as an API.

Perhaps this resource will help https://vuejsdevelopers.com/2017/11/06/vue-js-laravel-server-side-rendering/

👤Marc

Leave a comment