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
Plugins
page – 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.vueReady
event to prevent evaluation before Vue and vueLauncher is ready. -
Appends vueLauncher code with trimmed space and comments.
-
Process bundle styles.
-
If
\VueLab::$use_less
is 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