Description

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:

Home Blog Page Markup And Formatting About The Tests Lorem Ipsum Level 1 Level 2 Level 2a Level 2b Level 3 Level 3a Level 3b Front Page. Statistically, WordPress runs about a third of the world's websites. If you've created something in Vue you'd like to share, WordPress is a good platform to make it available on. You can customize your own site, or share your code on WordPress' plugin repository. WordPress Programmers: Why Vue?

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 <div> DOM element that
SC-Vue renders; the content of that <div> comes from index.html.

Vue WordPress exists to bring together two of the best things to ever happen to web development, WordPress and Vue. We’re committed to creating the best training materials and open source resources to help developers get the most out of the. Vue.js is the frontend framework that I’ll use to build my application on top of WordPress. Why Use Vue.js with WordPress? Tying it with JS frameworks allows us to use WordPress in applications where it would have given you a hard time in the past. Think multi-device apps, IoT, progressive web apps and other modern practices. Vue Wordpress module comes with set of essential features allowing you to kick-off your new project in matter of seconds.

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.

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

Contributors & Developers

“SC-Vue” is open source software. The following people have contributed to this plugin.

Vue Wordpress Theme

Contributors

Interested in development?

Vue Wordpress Starter

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.