CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Feruumomaster
Feruumomaster

Reputation: 73

Vue template or render function not defined

I have problem with Vue rendering on my website. I have downloaded some forum app from github, I had some difficoulties with installing it, because npm is not really updated and app is from 2 years ago. I managed to fix everything about npm with package.json like:

"devDependencies": {
        "axios": "^0.18.1",
        "bootstrap": "^4.4.1",
        "cross-env": "^5.2.1",
        "jquery": "^3.5.0",
        "laravel-mix": "^5.0.4",
        "lodash": "^4.17.15",
        "popper.js": "^1.16.1",
        "resolve-url-loader": "^3.1.1",
        "sass-loader": "^8.0.2",
        "vue": "2.5.21",
        "vue-template-compiler": "2.5.21"
    },
    "dependencies": {
        "laravel-echo": "^1.7.0",
        "node-sass": "^4.13.1",
        "pusher-js": "^4.4.0",
        "vue-loader": "15.5.1",
        "vue-router": "^3.1.6",
        "vue-simplemde": "^1.0.4",
        "vuetify": "^1.5.24"
    }

But now the problem is something with rendering vue:

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

This is how app.js looks like:

require('./bootstrap');

window.Vue = require('vue');
import Vue from 'vue'
import Vuetify from 'vuetify'
import VueSimplemde from 'vue-simplemde'
import 'simplemde/dist/simplemde.min.css'


Vue.use(Vuetify)
Vue.use(VueSimplemde)
import md from 'marked'
window.md = md;

import User from './Helpers/User'
window.User = User

import Exception from './Helpers/Exception'
window.Exception = Exception

window.EventBus = new Vue();

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('AppHome', require('./components/AppHome.vue'));
import router from './Router/router.js'

const app = new Vue({
    el: '#app',
    router
});

Upvotes: 0

Views: 8046

Answers (1)

Marc
Marc

Reputation: 5465

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/

Upvotes: 1

Related Questions