<commit_before>[![npm](https://img.shields.io/npm/l/require-extension-vue.svg)](https://www.npmjs.org/package/require-extension-vue)
[![npm](https://img.shields.io/npm/v/require-extension-vue.svg)](https://www.npmjs.org/package/require-extension-vue)
[![npm](https://img.shields.io/npm/dm/require-extension-vue.svg)](https://www.npmjs.org/package/require-extension-vue)
[![Travis CI](https://img.shields.io/travis/lixinliang/require-extension-vue.svg)](https://travis-ci.org/lixinliang/mrequire-extension-vue)
[![bitHound Code](https://www.bithound.io/github/lixinliang/require-extension-vue/badges/code.svg)](https://www.bithound.io/github/lixinliang/require-extension-vue)
[![Greenkeeper badge](https://badges.greenkeeper.io/lixinliang/require-extension-vue.svg)](https://greenkeeper.io/)
[![Twitter](https://img.shields.io/badge/twitter-@qq393464140-blue.svg)](http://twitter.com/qq393464140)

# require-extension-vue
> A require hook for loading single-file vue component in Node with Browser environment.

## What's it?

#### 1. Your project is running in Node with Browser environment. ([Electron](https://electron.atom.io/) etc.)

#### 2. The expected feature you want, like runtime:

```vue
// app.vue
<script>
export default {
    // ...
};
</script>
<template>
    // ...
</template>
<style>
    // ...
</style>
```

```js
import 'require-extension-vue';
// From now on, you can import or require a single-file vue component.
import app from './app.vue';
// This object is what you export. (include attributes: data, computed, created etc.)
// <template> will be exported in app.template as String.
// <style> will be appended to document.head, if you have Browser environment.
```

#### 3. Do what you like.

```js
new Vue(app).$mount('app');
```

## Getting started

```
$ npm install --save require-extension-vue
```

or, You want a quick start. ([use-vue](https://www.npmjs.com/package/use-vue))

## Usage

### Simple

```js
import 'require-extension-vue';
import app from './app.vue';

new Vue(app).$mount('app');
```

### Config

```js
import loader from 'require-extension-vue';
```

#### #loader.style.register
> Register language to compile style.

```js
loader.style.register('scss', ( content, filePath, index ) => {
    // compile
    return content;
});
```

```vue
<style lang="scss">
    // sass code
</style>
```

#### #loader.style.set
> Set a default language.

```js
loader.style.set('scss');
```

```vue
<style>
    // No need to Declare lang="scss" any more
    // sass code
</style>
```

#### #loader.style.exports
> Append styles to where you like.

```js
loader.style.exports(function ( style, { index, styles, filePath } ) {
    document.head.appendChild(style);
});
```

#### #sync
> Compile handler should return content sync, includes `<template>` and `<script>`.

#### #async
> Only `<style>` compiler supports `async`. [@see](https://github.com/lixinliang/require-extension-vue/blob/master/index.js#L135)

```js
loader.style.register('scss', async ( content, filePath, index ) => {
    return await compile(content);
});
```

## API

#### #Register
> register ( *lang* : `String`, *handler* : `Function` ) => `this`

> handler ( *content* : `String`, *filePath* : `String`, *index* : `Number` ) => *content* : `String`

loader.style.register / loader.script.register / loader.template.register
<commit_msg>update md<commit_after>[![npm](https://img.shields.io/npm/l/require-extension-vue.svg)](https://www.npmjs.org/package/require-extension-vue)
[![npm](https://img.shields.io/npm/v/require-extension-vue.svg)](https://www.npmjs.org/package/require-extension-vue)
[![npm](https://img.shields.io/npm/dm/require-extension-vue.svg)](https://www.npmjs.org/package/require-extension-vue)
[![Travis CI](https://img.shields.io/travis/lixinliang/require-extension-vue.svg)](https://travis-ci.org/lixinliang/mrequire-extension-vue)
[![bitHound Code](https://www.bithound.io/github/lixinliang/require-extension-vue/badges/code.svg)](https://www.bithound.io/github/lixinliang/require-extension-vue)
[![Greenkeeper badge](https://badges.greenkeeper.io/lixinliang/require-extension-vue.svg)](https://greenkeeper.io/)
[![Twitter](https://img.shields.io/badge/twitter-@qq393464140-blue.svg)](http://twitter.com/qq393464140)

# require-extension-vue
> A require hook for loading single-file vue component in Node with Browser environment.

## What's it?

#### 1. Your project is running in Node with Browser environment. ([Electron](https://electron.atom.io/) etc.)

#### 2. The expected feature you want, like runtime:

```vue
// app.vue
<script>
export default {
    // ...
};
</script>
<template>
    // ...
</template>
<style>
    // ...
</style>
```

```js
import 'require-extension-vue';
// From now on, you can import or require a single-file vue component.
import app from './app.vue';
// This object is what you export. (include attributes: data, computed, created etc.)
// <template> will be exported in app.template as String.
// <style> will be appended to document.head, if you have Browser environment.
```

#### 3. Do what you like.

```js
new Vue(app).$mount('app');
```

## Getting started

```
$ npm install --save require-extension-vue
```

or, You want a quick start. ([use-vue](https://www.npmjs.com/package/use-vue))

## Usage

### Simple

```js
import 'require-extension-vue';
import app from './app.vue';

new Vue(app).$mount('app');
```

### Config

```js
import loader from 'require-extension-vue';
```

#### #loader.style.register
> Register language to compile style.

```js
loader.style.register('scss', ( content, filePath, index ) => {
    // compile
    return content;
});
```

```vue
<style lang="scss">
    // sass code
</style>
```

#### #loader.style.set
> Set a default language.

```js
loader.style.set('scss');
```

```vue
<style>
    // No need to Declare lang="scss" any more
    // sass code
</style>
```

#### #loader.style.exports
> Append styles to where you like.

```js
loader.style.exports(function ( style, { index, styles, filePath } ) {
    document.head.appendChild(style);
});
```

#### #sync
> Compile handler should return content sync, includes `<template>`, `<script>` and `<style>`.

#### #<del>async<del>
> Deprecated, [@see](https://github.com/lixinliang/require-extension-vue/issues/4)

## API

#### #Register
> register ( *lang* : `String`, *handler* : `Function` ) => `this`

> handler ( *content* : `String`, *filePath* : `String`, *index* : `Number` ) => *content* : `String`

loader.style.register / loader.script.register / loader.template.register

{'fraction_non_alphanumeric': 0.20223173341485784, 'fraction_numerical': 0.007031488841332926, 'mean_word_length': 4.143867924528302, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 58, 'https://': 32, 'lorem ipsum': 0, 'www.': 12, 'xml': 0}, 'pii_count': 2, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2575898', 'n_tokens_mistral': 2331, 'n_tokens_neox': 2171, 'n_words': 477}