README.md

kotlin-vue

Kotlin wrapper for Vue library.

Installation

All artifacts are published on Bintray

Gradle example

Add repository:

maven {
    url "https://dl.bintray.com/vkhikhlov/kotlin-vue-wrappers"
}

Add dependency:

compile "com.github.vkhikhlov:kotlin-vue:0.0.6"

Create Vue component

In most cases Vue recommends using templates to build your HTML. But also Vue has render functions, a closer-to-the-compiler alternative to templates.

Let's give examples. Suppose we have next Vue component located in Hello.vue file:

<template>
    <h1>
        Hello, {{ props.name }}!
    </h1>
</template>

<script>
    export default {
        props: {
            name: {
                type: String,
                default: "kotlin-vue"
            }
        }
    };
</script>

then in the same directory we can use this component like that:

<template>
    <div>
        <Hello></Hello>
    </div>
</template>

<script>
    import Hello from './Hello'
    export default {
        components: {
            Hello
        }
    };
</script>

If we rewrite this example to use render functions, it will look like that:

<script>
    export default {
        props: {
            name: {
                type: String,
                default: "kotlin-vue"
            }
        },
        render(h) {
            return h('h1', [`Hello ${this.name}!`]);
        }
    };
</script>

and then:

<script>
    import Hello from './Hello'
    export default {
        render(h) {
            return h('div', [h(Hello)]);
        }
    };
</script>

But refer to official Vue documentation, if you’re writing a lot of render functions, it might feel painful to use them. That’s why there’s a Babel plugin to use JSX with Vue, getting us back to a syntax that’s closer to templates. So, using JSX we can rewrite it like that:

<script>
    export default {
        props: {
            name: {
                type: String,
                default: "kotlin-vue"
            }
        },
        render(h) {
            return (
                <h1>
                    { this.name }
                </h1>
            );
        }
    };
</script>

and then:

<script>
    import Hello from './Hello'
    export default {
        render(h) {
            return (
                <div>
                    <Hello/>
                </div>
            );
        }
    };
</script>

Here's the equivalent Kotlin code looks like:

package welcome

import vue.*
import vue.vdom.*
import vue.ext.*

interface WelcomeProps : VProps {
    var name: String
}

interface WelcomeComponent : VueComponent<VData, WelcomeProps, VRefs>

object WelcomeOptions : VueOptions<VData, WelcomeProps, VRefs, VComputed, WelcomeComponent>(WelcomeComponent::class) {
    init {
        props {
            name = jsObject { }
        }
    }
    
    override fun VBuilder.render() = h1 { +"Hello ${props.name}!" }
}


fun VBuilder.welcome(block: VBuilder.() -> Unit = { v.props = jsObject<WelcomeProps> { name = "kotlin-vue" } }) = 
    child(WelcomeOptions, block)

VBuilder lets you construct your component's template using type-safe builders, similarly to JSX.

And here's how we can use this component in another component:

import vue.*
import welcome.*

interface AppComponent : VueComponent<VData, VProps, VRefs>

object AppOptions : VueOptions<VData, VProps, VRefs, VComputed, AppComponent>(AppComponent::class) {
    override fun VBuilder.render() = welcome()
}

Although templates are enough convenient, they are don't allow you to use full programmatic power of a programming language. JSX may be a good alternative, but Kotlin with his type-safe builders, static type checking, modern language constructions may significantly facilitate development of complex ui systems. In addition, may be you don't know, but Vue's templates actually are compiled into render functions.

The example given above can be found in the examples section.