PHPackages vikseriq/vuelab - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. vikseriq/vuelab ActiveLibrary[Utility & Helpers](/categories/utility) vikseriq/vuelab =============== PHP loader for Vue Single File Components 1.0.0(4y ago)14MITPHPPHP >=5.4 Since Dec 8Pushed 4y ago1 watchersCompare [ Source](https://github.com/vikseriq/vuelab)[ Packagist](https://packagist.org/packages/vikseriq/vuelab)[ RSS](/packages/vikseriq-vuelab/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependenciesVersions (2)Used By (0) Vuelab – PHP loader for Vue Single File Components ================================================== [](#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](#vuer) utility and injects with simple `html container + new Vue` [vueLauncher](#vuelauncher) technique. Additionally it uses [lessphp](https://leafo.net/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 ===== [](#usage) 1. Clone this repo – or load via composer: ``` composer require vikseriq/vuelab ``` 2. Include `vuelab.php` – or use composer autoload. 3. Provide path to dir with Vue single file components. Or drop some into `/vuelab/components`. 4. Register components – just by typing component names. 5. Place somewhere html element with class `js-v-scope` – it will indicate vuelab to start Vue instance it this container. 6. 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: ``` include '/vuelab/vuelab.php'; vuelab_setup(__DIR__, ['app', 'todo-list', 'todo']); vuelab_append(''); vuelab_inject(); ``` That's all. Usage on WordPress ================== [](#usage-on-wordpress) 1. Add plugin to Wordpress: via upload or copy to plugins dir. 2. Enable plugin from `Plugins` page – it will hook automatically. 3. 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`: ``` // register component located in current path named foo.vue vikseriq\vuelab\vuelab_setup(__DIR__, ['foo']); // register placement for `foo` component - it will placed where `vuelab_inject` executed, in this case - at footer vikseriq\vuelab\vuelab_append(''); // optionally: enable less styles compilation vikseriq\vuelab\VueLab::$use_less = true; ``` ``` Hello from Vue {{ createdAt }} Vue.component('foo', { template: template, // ! it allows to pass template inside component data: function () { return { createdAt: new Date().toLocaleTimeString() } } }) // feel free to use less here @justOrange: #fc0; .foo { display: block; margin: 1rem auto; padding: 1rem; width: fit-content; // sample use of less variables border: 3px outset @justOrange; // ... and nesting span { font-style: italic; } } ``` Then on the very bottom of pages will be `foo` component with greeting and current page loading time. Documentation ============= [](#documentation) Vuelab ------ [](#vuelab) ### Vuelab::inject [](#vuelabinject) Returns HTML string with Vue components, styles and launcher. 1. Composes script+template bundle with every component via vuer. 2. Wrap bundle in js function and bind execution on `document.vueReady` event to prevent evaluation before Vue and vueLauncher is ready. 3. Appends vueLauncher code with trimmed space and comments. 4. Process bundle styles. 5. If `\VueLab::$use_less` is set – load [less compiler](lib/lessc.php) and process styles. 6. Appends rest of html added via `\VueLab::append`. Vuer – load Vue SFC with PHP ---------------------------- [](#vuer--load-vue-sfc-with-php) [Vuer](lib/vuer.php) used to convert `*.vue` files to browser-executable `` Inspired by [requirejs-vue](https://github.com/vikseriq/requirejs-vue/) technique. VueLauncher – make a Vue instance anywhere ------------------------------------------ [](#vuelauncher--make-a-vue-instance-anywhere) [VueLauncher](lib/vue-launcher.js) helps boot Vue instance on any html container, by default used selector `.js-v-scope`. WordPress plugin ---------------- [](#wordpress-plugin) Install by uploading archive with this repos or by using awesome [GitHub Updater](https://github.com/afragen/github-updater/releases/latest) 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 ============ [](#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 ======= [](#license) MIT © 2020 - present, vikseriq ### Health Score 21 — LowBetter than 19% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity5 Limited adoption so far Community7 Small or concentrated contributor base Maturity44 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 1613d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/b8ab4456c853d051329396df376b2105d07e061cceca7c82e368e9f53c499054?d=identicon)[vikseriq](/maintainers/vikseriq) --- Top Contributors [![vikseriq](https://avatars.githubusercontent.com/u/16505509?v=4)](https://github.com/vikseriq "vikseriq (7 commits)") --- Tags loaderlessvue ### Embed Badge ![Health badge](/badges/vikseriq-vuelab/health.svg) ``` [![Health](https://phpackages.com/badges/vikseriq-vuelab/health.svg)](https://phpackages.com/packages/vikseriq-vuelab) ``` ### Alternatives [scssphp/scssphp scssphp is a compiler for SCSS written in PHP. 62827.7M220](/packages/scssphp-scssphp)[wikimedia/less.php PHP port of the LESS processor 12327.4M76](/packages/wikimedia-lessphp)[markstory/asset_compress An asset compression plugin for CakePHP. Provides file concatenation and a flexible filter system for preprocessing and minification. 3761.0M11](/packages/markstory-asset-compress)[m1/env Env is a lightweight library bringing .env file parser compatibility to PHP. In short - it enables you to read .env files with PHP. 6412.0M21](/packages/m1-env)[icecave/parity A customizable deep comparison library. 516.8M10](/packages/icecave-parity)[ijpatricio/mingle Use Vue and React in Laravel Livewire Applications. 43445.4k2](/packages/ijpatricio-mingle) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)