Title: SC-Vue Author: Patrick Lai Published: May 16, 2020 Last modified: June 4, 2021 --- Search plugins This plugin **hasn’t been tested with the latest 3 major releases of WordPress**. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress. ![](https://s.w.org/plugins/geopattern-icon/sc-vue.svg) # SC-Vue By [Patrick Lai](https://profiles.wordpress.org/scoop082110/) [Download](https://downloads.wordpress.org/plugin/sc-vue.1.0.1.zip) * [Details](https://test.wordpress.org/plugins/sc-vue/#description) * [Reviews](https://test.wordpress.org/plugins/sc-vue/#reviews) * [Installation](https://test.wordpress.org/plugins/sc-vue/#installation) * [Development](https://test.wordpress.org/plugins/sc-vue/#developers) [Support](https://wordpress.org/support/plugin/sc-vue/) ## Description SC-Vue provides a shortcode to inject [Vue.js](https://vuejs.org/) 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_/sc-vue/apps/demo_posts/index.js * _WP\_PLUGIN\_DIR_/sc-vue/apps/demo_posts/index.html The index.js Javascript file sets up an initialization function for creating a Vue model. That model controls a
DOM element that SC-Vue renders; the content of that
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](https://webpack.js.org/) 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. ## Installation 1. Upload the plugin files to the ‘_WP\_PLUGIN\_DIR_/sc-vue’ directory, or install the plugin through the ‘Plugin’s screen in WordPress. 2. Activate the plugin. 3. Install any additional Vue app in ‘_WP\_PLUGIN\_DIR_/sc-vue/apps’. Note that app name must be simple identifier that begins with a letter followed by any number of digits, letters, and the underscore. 4. Startg using shortcode `[pl2010_vue app="..."/]`! ## FAQ ### Does this work with WordPress version X? This plugin is developed on WordPress 5.4. It has not been tried on any other version. ### Does this work with PHP 5.x? This plugin is developed with PHP 7.x. Backporting to PHP 5.x should not be difficult however. ## Reviews ![](https://secure.gravatar.com/avatar/54811961d3b23e8ab6c0dae58cd00ce1b7eaddb534ab5017dcea4f8577d0052e? s=60&d=retro&r=g) ### 󠀁[Hey thanks, for uploading this plugin.](https://wordpress.org/support/topic/hey-thanks-for-uploading-this-plugin/)󠁿 [apesyntax](https://profiles.wordpress.org/apesyntax/) September 10, 2021 I have a question, how can we reference a file from the js folder into our index. js file? I want to test some things but I am having this small issue, like how should I type the location for the folder, example: import {fullnames} from ‘./importingVarTest. js’; I still haven’t got the hierarchy, it would be great if is possible, if not do I just have to use the index.js file for all the js? [ Read all 1 review ](https://wordpress.org/support/plugin/sc-vue/reviews/) ## Contributors & Developers “SC-Vue” is open source software. The following people have contributed to this plugin. Contributors * [ Patrick Lai ](https://profiles.wordpress.org/scoop082110/) [Translate “SC-Vue” into your language.](https://translate.wordpress.org/projects/wp-plugins/sc-vue) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/sc-vue/), check out the [SVN repository](https://plugins.svn.wordpress.org/sc-vue/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/sc-vue/) by [RSS](https://plugins.trac.wordpress.org/log/sc-vue/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.0 * First version published. ## Meta * Version **1.0** * Last updated **5 years ago** * Active installations **30+** * WordPress version ** 5.4 or higher ** * Tested up to **5.7.15** * PHP version ** 7.0 or higher ** * Language * [English (US)](https://wordpress.org/plugins/sc-vue/) * Tag * [vue](https://test.wordpress.org/plugins/tags/vue/) * [Advanced View](https://test.wordpress.org/plugins/sc-vue/advanced/) ## Ratings 5 out of 5 stars. * [ 1 5-star review ](https://wordpress.org/support/plugin/sc-vue/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/sc-vue/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/sc-vue/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/sc-vue/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/sc-vue/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/sc-vue/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/sc-vue/reviews/) ## Contributors * [ Patrick Lai ](https://profiles.wordpress.org/scoop082110/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/sc-vue/) ## Donate Would you like to support the advancement of this plugin? [ Donate to this plugin ](https://www.paypal.me/scoop082110)