{"id":19053947,"url":"https://github.com/nosix/vue-kotlin","last_synced_at":"2025-04-15T03:54:46.851Z","repository":{"id":134901211,"uuid":"98655395","full_name":"nosix/vue-kotlin","owner":"nosix","description":"Libraries and tools supporting the use of Vue.js in Kotlin. (This project is finished. There are no plans to update in the future. )","archived":false,"fork":false,"pushed_at":"2019-02-23T12:05:12.000Z","size":338,"stargazers_count":196,"open_issues_count":1,"forks_count":20,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-04-15T03:54:41.426Z","etag":null,"topics":["gradle-plugin","kotlin-js","libraries","vuejs2"],"latest_commit_sha":null,"homepage":"https://nosix.github.io/vue-kotlin/","language":"Kotlin","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nosix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-28T14:05:49.000Z","updated_at":"2025-03-23T01:46:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"9cc4b525-093b-4f3f-88d4-8e821f960adc","html_url":"https://github.com/nosix/vue-kotlin","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nosix%2Fvue-kotlin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nosix%2Fvue-kotlin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nosix%2Fvue-kotlin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nosix%2Fvue-kotlin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nosix","download_url":"https://codeload.github.com/nosix/vue-kotlin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249003954,"owners_count":21196794,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gradle-plugin","kotlin-js","libraries","vuejs2"],"created_at":"2024-11-08T23:36:01.037Z","updated_at":"2025-04-15T03:54:46.835Z","avatar_url":"https://github.com/nosix.png","language":"Kotlin","funding_links":[],"categories":["Kotlin Tools and Frameworks","Tools","Kotlin Tools, Libraries, and Frameworks"],"sub_categories":["VS Code Extensions for Developer Productivity","Mesh networks","JavaScript Libraries for Machine Learning"],"readme":"English | [日本語/Japanese](./README_ja.md)\n\n# vue-kotlin\nLibraries and tools supporting the use of Vue.js in Kotlin.\n\n- vuekt\n    - Type definition of Vue.js for Kotlin/JS\n- vuekt-js2vue\n    - A library for creating Kotlin files that replace vue files\n    - Use Kotlin DSL for CSS\n- vuekt-plugin\n    - Gradle plugin to support development using vuekt\n        - Generate vue files from code written with vuekt-js2vue\n        - Extend kotlin-frontend-plugin \n\n## Usage\n\n### Gradle setting\n\n```groovy\nbuildscript {\n    repositories {\n        jcenter()\n        maven {\n            // kotlin-frontend-plugin (vuekt-plugin depends)\n            url \"https://dl.bintray.com/kotlin/kotlin-eap\"\n        }\n        maven {\n            // vuekt-plugin\n            url \"https://nosix.github.io/vue-kotlin/release\"\n        }\n    }\n\n    dependencies {\n        classpath \"org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version\"\n        classpath \"org.jetbrains.kotlin:kotlin-frontend-plugin:$kotlin_frontend_version\"\n        classpath \"org.musyozoku:vuekt-plugin:$vuekt_plugin_version\"\n    }\n}\n\nrepositories {\n    jcenter()\n    maven {\n        // vuekt, vuekt-js2vue\n        url \"https://nosix.github.io/vue-kotlin/release\"\n    }\n}\n\napply plugin: 'kotlin2js'\napply plugin: 'org.jetbrains.kotlin.frontend' // kotlin-frontend-plugin\napply plugin: 'org.musyozoku.vuekt' // vuekt-plugin\n\ndependencies {\n    // sub projects\n    compile project(':greeting') // application that use vue component\n    compile project(':greeting-component') // single file vue component\n}\n\nkotlinFrontend {\n    downloadNodeJsVersion = node_version\n\n    npm {\n        dependency('vue', vue_version)\n\n        devDependency('vue-loader', '*')\n        devDependency('vue-template-compiler', vue_version)\n        devDependency('css-loader', '*')\n        devDependency('html-webpack-plugin', '*')\n    }\n\n    webpackBundle {\n        contentPath = file(\"$projectDir/webContent\")\n        publicPath = \"/\"\n        port = 8088\n    }\n}\n\nsubprojects {\n\n    apply plugin: 'kotlin2js'\n    \n    dependencies {\n        compile \"org.musyozoku:vuekt:$vuekt_version\"\n        compile \"org.musyozoku:vuekt-js2vue:$vuekt_js2vue_version\"\n    }\n    \n    sourceSets {\n        main.kotlin.srcDirs += \"main\"\n        test.kotlin.srcDirs += \"test\"\n    }\n\n    compileKotlin2Js {\n        kotlinOptions {\n            moduleKind = \"commonjs\" // webpack use CommonJS\n        }\n    }\n}\n```\n\noptional vuekt-plugin settings:\n\n```groovy\nvue {\n    targetPattern = \".*-component\\\\.js\"\n    configFile = \"01_js2vue.js\"\n}\n```\n\n- targetPattern\n    - vuekt-plugin searches targetPattern for JavaScript files generated from ComponentVue\n    - JavaScript files generate vue files\n- configFile\n    - vuekt-plugin generate additional webpack config in webpack.config.d directory\n    - This config is required when bundling\n\n### Project structure\n\nFor example:\n\n```\nproject_root\n    greeting\n        main\n            [application: Kotlin]\n    greeting-component\n        main\n            [component: Kotlin]\n    src\n        main\n            kotlin\n                dummy.kt (*1)\n    webContent\n      [web resources: HTML, etc.]\n    webpack.config.d\n      [webpack config: JavaScript]\n```\n\nYou need to set webpack config.\nSee `single-file` project in GitHub repository.\n\n(*1): It is necessary if you have multiple entries in webpack config.\nkotlin-frontend-plugin assumes one entry.\nBy default it does not create sub projects.\n\n### Application\n\nFor example:\n\n```kotlin\n// GreetingComponent = require('greeting-component.vue')\n@JsModule(\"greeting-component.vue\")\nexternal val GreetingComponent: Component = definedExternally\n\n@JsModule(\"vue\") // module name in node_modules\n@JsName(\"Vue\") // `AppVue` is converted to the name `Vue` in JavaScript code\nexternal class AppVue(options: ComponentOptions\u003cAppVue\u003e) : Vue {\n    var message: String\n}\n\nval vm = AppVue(ComponentOptions {\n    el = ElementConfig(\"#app\") // ElementConfig is union type\n    data = Data(json\u003cAppVue\u003e { // json function create JSON instance\n        message = \"Vue \u0026 Kotlin\" // accessible property of AppVue\n    })\n    components = json {\n        this[\"greeting\"] = ComponentConfig(GreetingComponent)\n    }\n})\n```\n\n### Component\n\nFor example:\n\n```kotlin\nexternal class GreetingComponent : Vue {\n    var greeting: String\n}\n\n// class name is used for file name (can be overridden)\nclass GreetingComponentVue : ComponentVue\u003cGreetingComponent\u003e {\n\n    // vue template (Note: in IntelliJ, editing with inject language will result in syntax highlighting)\n    override val template: String = \"\"\"\u003cp\u003e{{ greeting }} World!\u003c/p\u003e\"\"\"\n\n    // CSS (it becomes scoped if scopedStyle property is overridden with true)\n    override val style: StyleBuilder = {\n        p {\n            fontSize = 2.em\n            textAlign = center\n        }\n    }\n\n    override val script: ComponentOptionsBuilder\u003cGreetingComponent\u003e = {\n        data = Data {\n            json\u003cGreetingComponent\u003e {\n                greeting = \"Hello\"\n            }\n        }\n    }\n}\n\n@Suppress(\"unused\")\nval options = translate(GreetingComponentVue()) // required, used by bundling\n```\n\nCSS library: [null-dev/Aza-Kotlin-CSS-JS](https://github.com/null-dev/Aza-Kotlin-CSS-JS)\n(MIT License)\n\nTwo files are generated:\n\n- greeting-component.js (kotlin2js generated)\n- greeting-component.vue (js2vue generated)\n\nGenerated vue file (greeting-component.vue):\n\n```html\n\u003ctemplate\u003e\n\u003cp\u003e{{ greeting }} World!\u003c/p\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\np{font-size:2em;text-align:center}\n\u003c/style\u003e\n\n\u003cscript\u003e\nmodule.exports = require('greeting-component.js').options\n\u003c/script\u003e\n```\n\n`options` in the component is used in the vue file.\n\n### Data flow\n\n\u003cimg src=\"https://docs.google.com/drawings/d/e/2PACX-1vQIrWUsJ0aY3VlbUkyvkIdA6Z4yikCmfxxPr_nYKUKZsbmiG0WV8qR_tEY4SFgA8LMwZoKh2QMuU90Z/pub?w=960\u0026amp;h=720\"\u003e\n\n- `greeting-component.js` and `greeting-component.vue` are named from `GreetingComponentVue`\n    - `Vue` of prefix/suffix is removed\n    - Camel case is converted to kebab case\n    - You can change the name by overriding ComponentVue::name property\n        - default is `this::class.js.name.replace(\"^Vue|Vue$\".toRegex(), \"\").replace(\"([A-Z])\".toRegex(), \"-$1\").toLowerCase().trim('-')`\n- vuekt-js2vue finds `*-component.js`\n    - You can change the pattern by setting targetPattern in build.gradle\n\n## Trial\n\n1. Clone this repository.\n\n1. Publish plugin to local repository.\n\n    ```\n    $ ./gradlew --project-dir=vuekt-plugin publishToMavenLocal\n    ```\n\nTry production build (minify is still)\n\n1. Generate bundle files.\n\n    ```\n    $ ./gradlew bundle\n    ```\n\n1. Open the following in a browser.\n\n    - `guide/index.html`\n    - `guide/instance.html`\n    - `guide/syntax.html`\n    - `guide/computed.html`\n    - `guide/class-and-style.html`\n    - `guide/list.html`\n    - `guide/events_.html`\n    - `guide/forms.html`\n    - `guide/components.html`\n    - `guide/filters.html`\n    - `single-file/build/bundle/greeting.html`\n\nTry development build\n\n1. Run webpack-dev-server.\n(`-t` is option for [continuous build](https://docs.gradle.org/current/userguide/continuous_build.html))\n\n    ```\n    $ ./gradlew -t single-file:run\n    ```\n\n1. Open `http://localhost:8088/` on the browser.\n\n    HMR (Hot Module Replacement) is enabled.\n    (Edit `greeting/main/greeting.kt` and/or `greeting-component/main/GreetingComponent.kt`)\n\n1. Stop webpack-dev-server.\n\n    ```\n    $ ./gradlew single-file:stop\n    ```\n\n## Troubleshooting\n\n1. Execution failed for task webpack-bundle: `node webpack.js failed`\n\n    Please try the following script:\n    ```\n    $ bin/webpack.sh\n    ```\n\n1. Changing `vuekt` and/or `vuekt-js2vue` don't update `guide` and `single-file` project.\n\n    kotlin-frontend-plugin does not update node_modules.\n    \n    Please try the following command:\n    ```\n    $ ./gradlew clean\n    ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnosix%2Fvue-kotlin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnosix%2Fvue-kotlin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnosix%2Fvue-kotlin/lists"}