SC-Vue

Screenshots

SC-Vue provides a shortcode to inject Vue.js apps into WordPress pages and posts. For example, the following shortcode would inject the ‘demo_posts’ app: [pl2010_vue app="demo_posts"/] 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: WP_PLUGIN_DIR/vue-sc/apps/demo_posts/index.js WP_PLUGIN_DIR/vue-sc/apps/demo_posts/index.html 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 webpack.js 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.