# require-extension-hooks-vue

> Simple server parser for .vue files

Latest version **3.0.0** (published 2019-04-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install require-extension-hooks-vue
pnpm add require-extension-hooks-vue
yarn add require-extension-hooks-vue
bun add require-extension-hooks-vue
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2019-04-05 |
| First published | 2017-01-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 12.2 KB |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 27 |
| Author | Jack Ellis |
| Maintainers | jackmellis |

## Links

- npm: https://www.npmjs.com/package/require-extension-hooks-vue
- Repository: https://github.com/jackmellis/require-extension-hooks-vue
- Homepage: https://github.com/jackmellis/require-extension-hooks-vue#readme
- Issues: https://github.com/jackmellis/require-extension-hooks-vue/issues
- npm.io page: https://npm.io/package/require-extension-hooks-vue

## Dependencies (5)

- [postcss](https://npm.io/package/postcss.md) ^7.0.14
- [consolidate](https://npm.io/package/consolidate.md) ^0.15.1
- [source-map-support](https://npm.io/package/source-map-support.md) ^0.5.10
- [postcss-modules-sync](https://npm.io/package/postcss-modules-sync.md) ^1.0.0
- [@vue/component-compiler-utils](https://npm.io/package/@vue/component-compiler-utils.md) ^2.3.1

## Recent versions

- 3.0.0 (latest) — 2019-04-05
- 2.0.0 — 2018-12-19
- 1.1.0 — 2018-08-10
- 1.0.1 — 2018-06-21
- 1.0.0 — 2018-02-27
- 0.4.2 — 2018-02-27
- 0.4.1 — 2017-09-20
- 0.4.0 — 2017-07-11
- 0.3.1 — 2017-05-18
- 0.3.0 — 2017-05-18
- 0.2.2 — 2017-05-08
- 0.2.1 — 2017-04-16
- 0.2.0 — 2017-03-28
- 0.1.1 — 2017-02-13
- 0.1.0 — 2017-01-19

## README

# 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  
```javascript
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:
```html
<template src="./tpl.html"/>
<script src="./script.js"/>
```

You can also transpile templates in other languages:
```html
<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:
```html
<script lang="ts">...</script>
```
You will need to register a hook for that extension name:
```javascript
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](https://vuejs.org/v2/guide/mixins.html):

```javascript
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:
```js
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:
```js
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.

---
_Source: https://npm.io/package/require-extension-hooks-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._