5

In this simple example with hardcoded url my Vue.js components not rendering, plain html get rendered but all places i have a component appear blank.

Phantom.js should work normally 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();
});

Quick vue code for who want to help and do the test.

<!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>
Marcelo H. Carneiro
  • 129
  • 2
  • 10

1 Answers1

0

Check your phantomjs version. Phantomjs Version 2.x would work just fine with vuejs.

It's possible that phantomjs is running too quick that the element is not yet available when it reach that part of the code. Use waitForElement or wait to induce a delay before trying to access the element.

Shahjahan Jewel
  • 2,301
  • 24
  • 23
  • Hi @Jewel thanks. But tried with few approach's, [link](http://stackoverflow.com/questions/16807212/how-to-wait-for-element-visibility-in-phantomjs#19070446). But no luck, same result. – Marcelo H. Carneiro Apr 04 '17 at 10:14