<commit_before># Vue GWT

Vue GWT integrates [Vue.JS](https://vuejs.org/) with [GWT](http://www.gwtproject.org/) 2.8 using [JsInterop](https://docs.google.com/document/d/10fmlEYIHcyead_4R1S5wKGs1t2I7Fnp_PaNaa7XTEk0/view).
It let you write Vue.JS components in Java.

<p align="center">
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT License"/>
<a href="https://gitter.im/Axellience/vue-gwt"><img src="https://img.shields.io/gitter/room/nwjs/nw.js.svg" alt="Chat"/></a>
</p>

Checkout our **[Vue GWT Demo page](https://axellience.github.io/vue-gwt-demo/)** to see it in action.

It's recommended to read [Vue.JS introduction guide](https://vuejs.org/v2/guide/) if you are not familiar with it.

:warning: Vue GWT is in an **experimental** state.
The syntax is not final and might change between versions.
It may also contain bugs.

## Setup on your project

### :white_check_mark: Get Vue GWT

Vue GWT uses Maven.
For now there is no Maven repository.

You must clone the source on your computer and mvn install them:

```bash
git clone https://github.com/Axellience/vue-gwt.git
cd vue-gwt
mvn clean install
```

### :white_check_mark: Add the Maven dependency
Add Vue GWT to your project `pom.xml`:

```xml
<properties>
    <vue-gwt.version>1.1-SNAPSHOT</vue-gwt.version>
</properties>
<dependency>
    <groupId>com.axellience</groupId>
    <artifactId>vue-gwt</artifactId>
    <version>${vue-gwt.version}</version>
</dependency>
```

### Configure JsInterop
Vue GWT relies heavily on JsInterop.
You must enable it in SuperDevMode and Maven.

#### :white_check_mark: SuperDevMode
For SuperDevMode, simply add this flag to your devMode parameters:

`-generateJsInteropExports`

#### :white_check_mark: Maven
For Maven, if you use [GWT Maven Plugin](https://gwt-maven-plugin.github.io/gwt-maven-plugin/), add the following in your `pom.xml`:

```xml
<plugins>
    <!-- Mojo's Maven Plugin for GWT -->
    <plugin>
        ...
        <configuration>
            ...
            <generateJsInteropExports>true</generateJsInteropExports>
        </configuration>
    </plugin>
</plugins>
```

### :white_check_mark: Add Vue.JS library to your index.html

In your GWT app index.html add the following tag in the &lt;head&gt; section:

```html
<!-- Vue JS Framework -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
```

You are good to go!

### Simple App

If you already know GWT then you should be familiar with the concept of Widgets.
In Vue.JS the equivalent of Widgets are Components.

Vue Components are like GWT Widgets, they are reusable and isolated pieces of your application.

Let's create our first Component and use it in a real app.
We will call it RootComponent.

***GwtIndex.html***

In our GWT index page we add a div with our root component template.

```html<commit_msg>Fix a title level in the README<commit_after># Vue GWT

Vue GWT integrates [Vue.JS](https://vuejs.org/) with [GWT](http://www.gwtproject.org/) 2.8 using [JsInterop](https://docs.google.com/document/d/10fmlEYIHcyead_4R1S5wKGs1t2I7Fnp_PaNaa7XTEk0/view).
It let you write Vue.JS components in Java.

<p align="center">
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT License"/>
<a href="https://gitter.im/Axellience/vue-gwt"><img src="https://img.shields.io/gitter/room/nwjs/nw.js.svg" alt="Chat"/></a>
</p>

Checkout our **[Vue GWT Demo page](https://axellience.github.io/vue-gwt-demo/)** to see it in action.

It's recommended to read [Vue.JS introduction guide](https://vuejs.org/v2/guide/) if you are not familiar with it.

:warning: Vue GWT is in an **experimental** state.
The syntax is not final and might change between versions.
It may also contain bugs.

## Setup on your project

### :white_check_mark: Get Vue GWT

Vue GWT uses Maven.
For now there is no Maven repository.

You must clone the source on your computer and mvn install them:

```bash
git clone https://github.com/Axellience/vue-gwt.git
cd vue-gwt
mvn clean install
```

### :white_check_mark: Add the Maven dependency
Add Vue GWT to your project `pom.xml`:

```xml
<properties>
    <vue-gwt.version>1.1-SNAPSHOT</vue-gwt.version>
</properties>
<dependency>
    <groupId>com.axellience</groupId>
    <artifactId>vue-gwt</artifactId>
    <version>${vue-gwt.version}</version>
</dependency>
```

### Configure JsInterop
Vue GWT relies heavily on JsInterop.
You must enable it in SuperDevMode and Maven.

#### :white_check_mark: SuperDevMode
For SuperDevMode, simply add this flag to your devMode parameters:

`-generateJsInteropExports`

#### :white_check_mark: Maven
For Maven, if you use [GWT Maven Plugin](https://gwt-maven-plugin.github.io/gwt-maven-plugin/), add the following in your `pom.xml`:

```xml
<plugins>
    <!-- Mojo's Maven Plugin for GWT -->
    <plugin>
        ...
        <configuration>
            ...
            <generateJsInteropExports>true</generateJsInteropExports>
        </configuration>
    </plugin>
</plugins>
```

### :white_check_mark: Add Vue.JS library to your index.html

In your GWT app index.html add the following tag in the &lt;head&gt; section:

```html
<!-- Vue JS Framework -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
```

You are good to go!

## Simple App

If you already know GWT then you should be familiar with the concept of Widgets.
In Vue.JS the equivalent of Widgets are Components.

Vue Components are like GWT Widgets, they are reusable and isolated pieces of your application.

Let's create our first Component and use it in a real app.
We will call it RootComponent.

***GwtIndex.html***

In our GWT index page we add a div with our root component template.

```html
{'fraction_non_alphanumeric': 0.13244916003536694, 'fraction_numerical': 0.005305039787798408, 'mean_word_length': 3.913987836663771, 'pattern_counts': {'":': 0, '<': 63, '<?xml version=': 0, '>': 63, 'https://': 20, 'lorem ipsum': 0, 'www.': 2, 'xml': 8}, 'pii_count': 0, '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': '1608755', 'n_tokens_mistral': 1998, 'n_tokens_neox': 1915, 'n_words': 609}