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
});
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.