I am facing an issue in my Vue.js components where the plain HTML gets rendered but all instances of Vue components appear blank. It seems like the hardcoded URL is causing this problem.
Can Phantom.js work properly with Vue.js?
var webPage = require('webpage');
var page = webPage.create();
page.viewportSize = { width: 1920, height: 1080 };
page.open("-----------", function start(status) {
page.render('test.jpeg', {format: 'jpeg', quality: '100'});
phantom.exit();
});
For anyone willing to help and run a test, here's a quick Vue code snippet:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js" charset="utf-8"></script>
<style media="screen"> body { background-color: grey; } </style>
</head>
<body>
plain text before vue
<div id="app" v-text="title" />
plain text after vue
<script type="text/javascript">
const app = new Vue({ el : '#app', data () { return { title : 'Vue Title' } } });
</script>
</body>
</html>