Patrick Lai

SC-Vue provides a shortcode to inject <a href="https://vuejs.org/" rel="nofollow ugc">Vue.js</a> apps 
into WordPress pages and posts. For example, the following shortcode 
would inject the ‘demo_posts’ app:
<pre><code> [pl2010_vue app="demo_posts"/]
</code></pre>
An app is made up of two files, index.js and index.html. They reside 
in a subdirectory bearing the app’s name under the ‘apps’ directory 
in the plugin. For the ‘demo_posts’ app, that means:
<ul>
<li>WP_PLUGIN_DIR/sc-vue/apps/demo_posts/index.js</li>
<li>WP_PLUGIN_DIR/sc-vue/apps/demo_posts/index.html</li>
</ul>
The index.js Javascript file sets up an initialization function for 
creating a Vue model. That model controls a <div> DOM element that 
SC-Vue renders; the content of that <div> comes from index.html.
See apps/demo_01 and apps/demo_02 for simple examples of index.js 
and index.html. For a more complex and realistic example that uses 
<a href="https://webpack.js.org/" rel="nofollow ugc">webpack.js</a> to packs Javascript and styles 
into a single index.js, see apps/demo_posts. Additional details may 
be found in the documentation of the shortcode function in init.php.

SC-Vue

Easily inject Vue.js app into WordPress via shortcode.

tristup

WP Vue plugin will provide you the shortcode to show the Posts using the VUE JS. Page will shows as Single Page Application.
<h3>Major features in WP Vue include:</h3>
<ol>
<li>
Shows the Posts using Vue-JS
</li>
<li>
Can limit the posts [ Else will take default value from Site Settings ]
</li>
<li>
Shows the Pagination
</li>
<li>
Single Page Appplication
</li>
<li>
Do Not reload the page.
</li>
</ol>
<h3>Shortcode & Attributes</h3>
With all default values
[wp-vue-posts]
With Post Per Page Option
[wp-vue-posts posts_per_page=”20″]
With Offset Option
[wp-vue-posts posts_per_page=”20″ offset=”10″]
With Order Option
[wp-vue-posts posts_per_page=”20″ offset=”10″ order=”desc”] 
Order Options : “desc” for descending, “asc” for ascending
With Order By Option
[wp-vue-posts posts_per_page=”20″ offset=”10″ order=”desc” orderby=”date”] 
Order By Options : “id” is deafult value, other valid values are “date”, “relevance”, “include”, “title”, and “slug”
<h3>Files</h3>
<ol>
<li>wp-vue.php : File to start working on</li>
<li>wp-vue-template.php : Template file showing the value fetched using Vue</li>
<li>main.js : Main JavaScript file to create a fetch request to the Post API endpoint to get the posts.</li>
</ol>

Wp Vue

WP Vue plugin will provide you the shortcode to show the Posts using the VUE JS. Page will shows as Single Page Application.

SC-Vue vs Wp Vue