Wordpress Vue

Wordpress Vue

Wordpress Vue Theme
Wordpress Vue Theme
Wordpress View Html
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:

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:

First, the browser gets the HTML, then Vue makes it do stuff. Since the markup is built by WordPress, rather than by Vue in the browser, components can easily use any information that site administrators can edit. I have a situation where a site is mostly Wordpress, but I'm using Vue + Wordpress REST API for a few features that are more dynamic. These Vue features are on 6 different pages. They use some shared components, but have different base templates. Eg PostsPage.vue and PeoplePage.vue both use RadioFilter.vue and are on different WP pages.
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 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.
InstallationUpload the plugin files to the ‘WP_PLUGIN_DIR/sc-vue'
directory, or install the plugin through the ‘Plugin's screen in
WordPress.
Activate the plugin.
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.
Startg using shortcode [pl2010_vue app='...'/]!
FAQDoes 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.
ReviewsWordpress Vue ThemeContributors & Developers

Wordpress Vue Theme
Wordpress Vue Theme
Wordpress View Html
DescriptionSC-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:
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:
First, the browser gets the HTML, then Vue makes it do stuff. Since the markup is built by WordPress, rather than by Vue in the browser, components can easily use any information that site administrators can edit. I have a situation where a site is mostly Wordpress, but I'm using Vue + Wordpress REST API for a few features that are more dynamic. These Vue features are on 6 different pages. They use some shared components, but have different base templates. Eg PostsPage.vue and PeoplePage.vue both use RadioFilter.vue and are on different WP pages.
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 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.
InstallationUpload the plugin files to the ‘WP_PLUGIN_DIR/sc-vue'
directory, or install the plugin through the ‘Plugin's screen in
WordPress.
Activate the plugin.
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.
Startg using shortcode [pl2010_vue app='...'/]!
FAQDoes 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.
ReviewsWordpress Vue ThemeContributors & Developers'SC-Vue' is open source software. The following people have contributed to this plugin.
ContributorsWordpress Vue ThemeInterested in development?Wordpress View HtmlBrowse the code, check out the SVN repository, or subscribe to the development log by RSS.