What is vue2any?
vue2any is a Node.js build tool that converts Vue single-file components (.vue) into server-side template code in another language, with PHP as the default target. It takes a .vue file as input, uses vue-template-compiler to produce an ssrRender function, then transforms that function through an AST pipeline (esprima, estraverse, escodegen) and finally renders it into target-language code via a modified vue-server-renderer. The package is published on npm as vue-to-any.
Key Features
- AST-based conversion — Instead of fragile regex substitution, vue2any parses the compiled ssrRender code into a JavaScript AST with esprima, traverses and rewrites nodes with estraverse, and regenerates code with escodegen to produce the target language.
- Pluggable language transfer — The default target is PHP (under src/transfers/php.js), and you can register additional languages (like EJS) via
addTransfer({ ejs: ejsTransfer }) and switch with setTransfer('ejs').
- Before/after middleware —
useMiddleware('before', fn) lets you transform the ssrRender string before conversion, and useMiddleware('after', fn) processes the final target code; you can remove them with delMiddleware.
- Directive support — Handles v-if, v-else-if, v-else, v-for (including nested loops), v-model, v-show, v-html, v-text, dynamic
:class/:style in object and array forms, and dynamic components via <component :is="...">.
- Dependency handling — Local components imported with .vue relative paths are converted into vnode helpers, global components are declared through a JSON config block, and slots and nested component compositions are resolved recursively.
- Configurable output — Options include language, variable (the server-data variable name, default PHPDATA), minify, debug, and progress;
updateOptions() changes them at runtime.
- Programmatic API — Use
new VueToAny(options) then call generate(); the README also exposes the instance so you can inspect its properties.
Who is it for?
- PHP back-end developers who want to reuse existing Vue component markup as server-rendered PHP templates without handwriting PHP.
- Teams building multi-language template engines that need to compile .vue components to languages like EJS or PHP through a pluggable transfer layer.
- Developers working on SSR pipelines who want to convert the output of vue-server-renderer into another server language, given the tool's recursion for unresolved component vnodes.
What can you do with vue2any?
- Convert a Vue component to PHP: Point entryFile to a .vue file and outFile to a .php file, then run
generate(); the output is a PHP template reading server data from the configured variable (e.g., PHPDATA).
- Integrate custom transformations: Use the before middleware to inspect or modify the compiled ssrRender and the after middleware to adjust the final PHP code before writing it to disk.
- Add a new target language: Implement a transfer object in the style of src/transfers/php.js and register it with
addTransfer; switch the active language with setTransfer.
- Render server-side data in templates: Using the SERVERDATA convention, output, bind, and conditionally render server data with directives like v-if, v-for, v-model, and dynamic
:class/:style, while keeping local component data separate.
How does vue2any work?
The conversion runs in six steps documented in the README:
- Compile the .vue file into an ssrRender function using vue-template-compiler.
- Parse the ssrRender code into a JavaScript AST with esprima.
- Walk and rewrite the AST with estraverse, applying replacements and dependency resolution.
- Generate the transformed ssrRender source using escodegen.
- Run the result through a modified vue-server-renderer to produce an HTML/PHP hybrid code string.
- Recursively process any remaining component vnodes in that output until all components are resolved.
Pros and cons
- Pros: Uses a proper AST pipeline instead of regex; supports a wide set of Vue directives and component nesting; offers middleware and pluggable language transfers.
- Cons: JS method calls cannot be converted to PHP methods; server-data expressions must be plain references (no calculations); components depending on window are unsupported; global components must be declared manually in a config block.
Alternatives
- js2php — a related project referenced in the README that converts JavaScript to PHP, which vue2any cites as prior art.
FAQ
How do I install vue2any?
Run npm i vue-to-any --save, then require it with const VueToAny = require('vue-to-any'). You add your options when constructing the instance, then call generate().
Does vue2any support languages other than PHP?
Yes. PHP is the default, but you can implement and register a transfer object with vueToAny.addTransfer({ 'ejs': ejsTransfer }) and activate it with vueToAny.setTransfer('ejs').
Can I use JavaScript expressions in server data?
No. The usage limits state that server-data references (e.g., SERVERDATA.xxx) cannot contain any JS calculation, method calls, or filters such as parseMethod(SERVERDATA.xxx) or SERVERDATA.arr.filter(...).
How do I handle global components?
Global components cannot be identified automatically, so you must add a JSON config block inside the .vue file that maps component names to their paths.
What are the output options?
The constructor accepts language, variable, minify, debug, progress, entryFile, and outFile. You can also change them later with updateOptions(newOptions).
