require-extension-hooks-vue
Simple server parser for .vue files
Last updated a year ago by jackmellis .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install require-extension-hooks-vue 
SYNC missed versions from official npm registry.

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 = require('require-extension-hooks');
hooks('vue').plugin('vue');

let component = require('./components/app.vue');

rehv will convert <template> blocks into render functions for you.

You can load external templates and scripts:

<template src="./tpl.html"/>
<script src="./script.js"/>

You can also transpile templates in other languages:

<template lang="pug">...</template>

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:

<script lang="ts">...</script>

You will need to register a hook for that extension name:

hooks('ts').push(function({content}){
/* transpile your script code here */
});

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 } = require('require-extension-hooks-vue');
hooks('vue-block-json').push(({ content }) =>
    `${COMPONENT_OPTIONS}.mixins = (${COMPONENT_OPTIONS}.mixins || []).concat({
        data: () => ({
            json: ${JSON.parse(content)}
        })
    });`
);

Register

You can automatically register the vue hook using the register file:

require('require-extension-hooks-vue/register');

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 = require('require-extension-hooks-vue');
plugin.configure({ transpileTemplates: false });

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.

Current Tags

  • 3.0.0                                ...           latest (a year ago)

15 Versions

  • 3.0.0                                ...           a year ago
  • 2.0.0                                ...           2 years ago
  • 1.1.0                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           3 years ago
  • 0.4.2                                ...           3 years ago
  • 0.4.1                                ...           3 years ago
  • 0.4.0                                ...           3 years ago
  • 0.3.1                                ...           3 years ago
  • 0.3.0                                ...           3 years ago
  • 0.2.2                                ...           3 years ago
  • 0.2.1                                ...           3 years ago
  • 0.2.0                                ...           4 years ago
  • 0.1.1                                ...           4 years ago
  • 0.1.0                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 47
This Month 1
Last Day 1
Last Week 122
Last Month 520
Dependencies (5)
Dev Dependencies (9)

Copyright 2014 - 2016 © taobao.org |