require-extension-hooks-vue
Simple parser for vue files
Using require-extension-hooks you can load .vue files in node, extremely helpful for browserless unit testing.
Installation
npm install require-extension-hooks require-extension-hooks-vue --save-dev
Usage
const hooks = ;; let component = ;
rehv will convert <template>
blocks into render functions for you.
You can load external templates and scripts:
You can also transpile templates in other languages:
...
Just install the relevant library as you would for vue-loader
:
npm install pug --save-dev
and rehv will pick it up.
For scripts in other languages:
You will need to register a hook for that extension name:
;
There will likely be additional hook libraries for script languages available soon
Custom Blocks
If you have custom blocks in your .vue
files, you can parse then using require-extension-hooks
.
Blocks are available by hooking to the file type vue-block-(block name)
. The hook should return
JavaScript code, in a string, which will be appended to the compiled .vue
file.
A helper named COMPONENT_OPTIONS
is available in on the plugin export to allow you to modify
the exported component options object from the .vue
file.
For example, for a <json></json>
block to have its data available via this.json
in the
component, you could use a mixin:
const COMPONENT_OPTIONS = ;;
Register
You can automatically register the vue hook using the register file:
;
Which means you can register the module from cli tools:
mocha --require require-extension-hooks-vue/register
Configuration
Set configuration options using the configure
method:
const plugin = ;plugin;
transpileTemplates
true
whether or not to automatically transpile templates that have a lang
attribute
sourceMaps
true
whether or not to set up source map support. This utilises the source-map-support
library.