Download the PHP package vikseriq/vuelab without Composer
On this page you can find all versions of the php package vikseriq/vuelab. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package vuelab
Vuelab – PHP loader for Vue Single File Components
It's tiny tool that helps to integrate Vue (v.2) with all reactivity benefits to almost every PHP project on any PHP hosting – without need of heavy-weight loaders like webpack/rollup nor gulp/require.js.
Also available as WordPress plugin: just drop in /wp-content/plugins folder.
Vue components composes with vuer utility
and injects with simple html container + new Vue vueLauncher technique.
Additionally it uses lessphp for processing styles written in less.
Note that Vue 3, ES6/module exports, template languages, loading by src and so on not supported
– loader do not process nor evaluate js on server side,
only composing *.vue into valid ES5 scripts and boot instances.
Template compilation relies on Vue built-in template compiler, so you must use full version of vue.js lib, not runtime-only.
Usage
-
Clone this repo – or load via composer:
-
Include
vuelab.php– or use composer autoload. -
Provide path to dir with Vue single file components. Or drop some into
/vuelab/components. -
Register components – just by typing component names.
-
Place somewhere html element with class
js-v-scope– it will indicate vuelab to start Vue instance it this container. - And call
vuelab_inject(). Now your PHP page become a first-class Vue app.
Assume that we have app.vue that loads todo-list.vue with todo.vue inside.
Drop vuelab and create index.php looking like:
That's all.
Usage on WordPress
-
Add plugin to Wordpress: via upload or copy to plugins dir.
-
Enable plugin from
Pluginspage – it will hook automatically. - Just use it: register components and their placeholders on desired page areas.
For example, place foo.vue inside your template folder and add in functions.php:
Then on the very bottom of pages will be foo component with greeting and current page loading time.
Documentation
Vuelab
Vuelab::inject
Returns HTML string with Vue components, styles and launcher.
-
Composes script+template bundle with every component via vuer.
-
Wrap bundle in js function and bind execution on
document.vueReadyevent to prevent evaluation before Vue and vueLauncher is ready. -
Appends vueLauncher code with trimmed space and comments.
-
Process bundle styles.
-
If
\VueLab::$use_lessis set – load less compiler and process styles. - Appends rest of html added via
\VueLab::append.
Vuer – load Vue SFC with PHP
Vuer used to convert *.vue files to browser-executable <script>
Inspired by requirejs-vue technique.
VueLauncher – make a Vue instance anywhere
VueLauncher helps boot Vue instance on any html container,
by default used selector .js-v-scope.
WordPress plugin
Install by uploading archive with this repos or by using awesome GitHub Updater plugin.
When \VueLab::$wp_enqueue_vue flag is set, Vue wp_enqueue_script-ed
as vue from path specified in \VueLab::$wp_vuejs_path.
Obviously, for better loading time and use with cache/packer plugins
provide path to local copy of vue.min.js.
Things to do
[+] Sample project.
[_] Pass variables (like string translations) to Vue component via __v on build time.
[+] Make Vuelab available as Composer package.
License
MIT © 2020 - present, vikseriq