I am a newcomer to Vue and I am trying to create a basic SPA using Vue without vue-router. Following the example of vue-2.0-simple-routing-example, I am attempting to load pages using require(dynamicPathToFile+'.vue'). However, this approach is not functioning properly.
The following code works:
Main.Vue
<template>
<div>
<p>Hello World</p>
</div>
</template>
Main.JS
import Vue from 'vue'
import App from './main.vue'
const app = new Vue({
el: '#app',
render (h) {
return h(App)
}
})
However, the following code does not work:
Main.JS
import Vue from 'vue'
const app = new Vue({
el: '#app',
render (h) {
return h(require('./main.vue'))
}
})
While it compiles without errors, my javascript console displays the following warning:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
<Root>
This results in nothing being displayed on the page
How can I resolve this issue so that I can dynamically require a page instead of importing it at the top of the file?