Hi @razorg1991
Sorry for late response but had busy day at work
Now about your question. Well it would be definitely easier to lazy load pages of your site and the codebase would be much more maintainable if you’d just use webpack There’s plenty of tutorials out there and ready to use Vue boilerplates,but if you already decided not to use it.there is one solution I can think of that can resolve your problem and it’s actually quite simple. Here’s the example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue test</title>
</head>
<body>
<div id="app">
<router-link to="/">/home</router-link>
<router-link to="/contact">/contact</router-link>
<router-view></router-view>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.min.js"></script>
<script>
function loadComponent(componentName, path) {
// Promise polyfill required!!!
return new Promise(function(resolve, reject) {
var script = document.createElement('script');
script.src = path;
script.async = true;
script.onload = function() {
var component = Vue.component(componentName);
if (component) {
resolve(component);
} else {
reject();
}
};
script.onerror = reject;
document.body.appendChild(script);
});
}
var router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
component: {
template: '<div>Home page</div>'
},
},
{
path: '/contact',
component: function(resolve, reject) {
loadComponent('contact', 'contact.js').then(resolve, reject);
}
}
]
});
var app = new Vue({
el: '#app',
router: router,
});
</script>
</body>
</html>
// contact.js
Vue.component('contact', {
template: '<div>Contact page</div>'
});
You probably already see how it works. I created loadComponent function that takes 2 arguments - component name and path to the script wherein the component is located. And there’s no magic here. We simply create new script, append it to the DOM, listen to onload event and when the script is fully loaded we resolve the promise with given componen. Of course you don’t have to use Promise if you don’t want to, then you change the function and use callbacks:
function loadComponent(opts) {
var script = document.createElement('script');
opts.onLoad = opts.onLoad || function() {};
opts.onError = opts.onError || function() {};
script.src = opts.path;
script.async = true;
script.onload = function() {
var component = Vue.component(opts.name);
if (component) {
opts.onLoad(component);
} else {
opts.onError();
}
};
script.onerror = opts.onError;
document.body.appendChild(script);
}
loadComponent({
name: 'contact',
path: 'contact.js',
onLoad: resolve,
onError: reject
});
I hope I have explained this to you clearly enough but if you have some future questions please ask 