szvest
12/15/2018 - 6:31 AM

Minimal Vue.js integration into Wordpress

Minimal Vue.js integration into Wordpress

<!-- (PHP)
    Getting WP current user 
    using Wordpress function wp_get_current_user()
-->
<?php
    $current_user = wp_get_current_user();
    $current_user_login = $current_user->user_login;
?>
-------------------------------------------------------
<!-- (HTML + Vue.js syntax)
    Rendering data to the DOM  
    Using Vue.js template syntax
-->
<div id="app">
    {{logged_user}}
</div>
<!-- (Javascript (Vue.js))
    Vue instance with the DOM element and data 
    Note how we are using PHP echo inside of JS 
-->
<script type="text/javascript">
    var app = new Vue({
    el: '#app',
    data: {
        logged_user: '<?php echo $current_user_login; ?>'
    }
    });
</script>