<commit_before># TwentyTwenty

[![npm](https://img.shields.io/npm/v/vue-twentytwenty.svg)
![npm](https://img.shields.io/npm/dm/vue-twentytwenty.svg)](https://www.npmjs.com/package/vue-twentytwenty)
[![vue2](https://img.shields.io/badge/vue-3.x-brightgreen.svg)](https://vuejs.org/)

A small component to quickly let users see the differences between 2 images. Based on the work I did for ZURB's [TwentyTwenty plugin](http://zurb.com/playground/twentytwenty).

<a href="https://mhayes.github.io/vue-twentytwenty/" target="_blank">Live Demo</a>

## Installation

```
$ npm install vue-twentytwenty --save
```

Or download the latest release using:

  * https://unpkg.com/vue-twentytwenty/dist/vue-twentytwenty.umd.min.js
  * https://unpkg.com/vue-twentytwenty/dist/vue-twentytwenty.css

## Usage

`TwentyTwenty` is a UMD module, which can be used as a module in both CommonJS and AMD modular environments. When in a non-modular environment, `TwentyTwenty` will be registered as a global variable.

### ES6

```js
import 'vue-twentytwenty/dist/vue-twentytwenty.css';
import TwentyTwenty from 'vue-twentytwenty';

export default {
  // ...
  components: {
    TwentyTwenty
  }
  // ...
};
```
<commit_msg>update README with vue2 branch<commit_after># TwentyTwenty

[![npm](https://img.shields.io/npm/v/vue-twentytwenty.svg)
![npm](https://img.shields.io/npm/dm/vue-twentytwenty.svg)](https://www.npmjs.com/package/vue-twentytwenty)
[![vue3](https://img.shields.io/badge/vue-3.x-brightgreen.svg)](https://vuejs.org/)

A small component to quickly let users see the differences between 2 images. Based on the work I did for ZURB's [TwentyTwenty plugin](http://zurb.com/playground/twentytwenty).

<a href="https://mhayes.github.io/vue-twentytwenty/" target="_blank">Live Demo</a>

Looking for Vue 2 support? Use the [v2](https://github.com/mhayes/vue-twentytwenty/tree/v2) branch.

## Installation

```
$ npm install vue-twentytwenty --save
```

Or download the latest release using:

  * https://unpkg.com/vue-twentytwenty/dist/vue-twentytwenty.umd.min.js
  * https://unpkg.com/vue-twentytwenty/dist/vue-twentytwenty.css

## Usage

`TwentyTwenty` is a UMD module, which can be used as a module in both CommonJS and AMD modular environments. When in a non-modular environment, `TwentyTwenty` will be registered as a global variable.

### ES6

```js
import 'vue-twentytwenty/dist/vue-twentytwenty.css';
import TwentyTwenty from 'vue-twentytwenty';

export default {
  // ...
  components: {
    TwentyTwenty
  }
  // ...
};
```

{'fraction_non_alphanumeric': 0.15515873015873016, 'fraction_numerical': 0.004761904761904762, 'mean_word_length': 4.18724279835391, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 17, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5743243', 'n_tokens_mistral': 944, 'n_tokens_neox': 903, 'n_words': 193}