{"id":19656195,"url":"https://github.com/daggerok/tsx-vue-composition-api-example","last_synced_at":"2025-04-30T20:47:49.807Z","repository":{"id":151042154,"uuid":"232674268","full_name":"daggerok/tsx-vue-composition-api-example","owner":"daggerok","description":"Awesome typed functional Vue components! https://daggerok.github.io/tsx-vue-composition-api-example/","archived":false,"fork":false,"pushed_at":"2023-11-10T07:34:32.000Z","size":1007,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-30T19:51:10.937Z","etag":null,"topics":["composition-api","tsx","typescript","vue","vue-composition-api","vuejs","vuejs2","vuejs3"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/daggerok.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2020-01-08T22:39:57.000Z","updated_at":"2020-05-23T17:29:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"ae80523d-ddf4-4012-853a-f9a71ee17dd7","html_url":"https://github.com/daggerok/tsx-vue-composition-api-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daggerok%2Ftsx-vue-composition-api-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daggerok%2Ftsx-vue-composition-api-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daggerok%2Ftsx-vue-composition-api-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daggerok%2Ftsx-vue-composition-api-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daggerok","download_url":"https://codeload.github.com/daggerok/tsx-vue-composition-api-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251780921,"owners_count":21642861,"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":["composition-api","tsx","typescript","vue","vue-composition-api","vuejs","vuejs2","vuejs3"],"created_at":"2024-11-11T15:26:57.787Z","updated_at":"2025-04-30T20:47:49.786Z","avatar_url":"https://github.com/daggerok.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TSX @vue/composition-api example [![Build Status](https://travis-ci.org/daggerok/tsx-vue-composition-api-example.svg?branch=master)](https://travis-ci.org/daggerok/tsx-vue-composition-api-example)\nAwesome typed functional Vue components!\n\n## TSX\n\n1. install software:\n   ```bash\n   npm i -E core-js @vue/composition-api\n   npm i -ED babel-preset-vca-jsx\n   ```\n1. update `babel.config.js` file:\n   ```js\n   module.exports = {\n     presets: [\n       // '@vue/cli-plugin-babel/preset',\n       'vca-jsx',\n       '@vue/app',\n     ],\n   };\n   ```\n1. remove all `src/shims-*.d.ts` files...\n1. create `src/shims-tsx.d.ts` file with next content:\n   ```typescript\n   import Vue, { VNode } from 'vue'\n   import { ComponentRenderProxy } from '@vue/composition-api'\n   declare global {\n     namespace JSX {\n       // tslint:disable no-empty-interface\n       interface Element extends VNode {}\n       // tslint:disable no-empty-interface\n       interface ElementClass extends ComponentRenderProxy {}\n       interface ElementAttributesProperty {\n         $props: any; // specify the property name to use\n       }\n       interface IntrinsicElements {\n         [elem: string]: any;\n       }\n     }\n   }\n   declare module '*.vue' {\n     import Vue from 'vue';\n     export default Vue;\n   }\n   ```\n1. migrate `src/components/HelloWorld.vue` component to -\u003e `src/components/HelloWorld.tsx` component:\n   ```typescript jsx\n   import { createComponent } from '@vue/composition-api';\n   export default createComponent({\n     name: 'HelloWorld',\n     props: {\n       msg: {\n         type: String,\n         required: true,\n       },\n     },\n     setup(props) {\n       return () =\u003e (\n         \u003cdiv\u003e\n           \u003ch1\u003e{props.msg}\u003c/h1\u003e\n         \u003c/div\u003e\n       );\n     },\n   })\n   ```\n1. migrate `src/App.vue` component to -\u003e `src/App.tsx` component:\n   ```typescript jsx\n   import { createComponent } from '@vue/composition-api';\n   import HelloWorld from '@/components/HelloWorld';\n   export default createComponent({\n     name: 'App',\n     setup() {\n       return () =\u003e (\n         \u003cdiv\u003e\n           \u003cHelloWorld msg='yay!' /\u003e\n         \u003c/div\u003e\n       );\n     },\n   });\n   ```\n\n## TSX VueRouter integration fixes...\n\n1. transform views uses in routes:\n   * `src/views/Home.tsx` -\u003e typescript `src/views/Home.vue`:\n     ```vue\n     \u003ctemplate\u003e\n       \u003cdiv\u003e\n         \u003ch1\u003eHelloWorld\u003c/h1\u003e\n         \u003cHelloWorld msg=\"nonono\" /\u003e\n       \u003c/div\u003e\n     \u003c/template\u003e\n     \u003cscript lang=\"ts\"\u003e\n       import { createComponent } from '@vue/composition-api';\n       import HelloWorld from '@/components/HelloWorld';\n       export default createComponent({\n         name: 'Home',\n         components: {\n           HelloWorld,\n         },\n       });\n     \u003c/script\u003e\n     ```\n   * `src/views/About.tsx` -\u003e typescript `src/views/About.vue`:\n     ```vue\n     \u003ctemplate\u003e\n       \u003cdiv\u003e\n         \u003ch1\u003eThis is an about page\u003c/h1\u003e\n         \u003cHelloWorld msg='yay!'/\u003e\n       \u003c/div\u003e\n     \u003c/template\u003e\n     \u003cscript lang=\"ts\"\u003e\n       import { createComponent } from '@vue/composition-api';\n       import HelloWorld from '@/components/HelloWorld';\n       export default createComponent({\n         name: 'About',\n         components: {\n           HelloWorld,\n         },\n       });\n     \u003c/script\u003e\n     ```\n1. fix typed router setup `src/router/index.ts`:\n   ```typescript\n   import Vue from 'vue';\n   import VueRouter, { RouterOptions } from 'vue-router';\n   import { RouteConfig } from 'vue-router/types/router';\n   Vue.use(VueRouter);\n   function loadView(view: string) {\n     return () =\u003e import(/* webpackChunkName: \"view-[request]\" */ `@/views/${view}.vue`)\n   }\n   const routes: RouteConfig[] = [\n     {\n       path: '/',\n       name: 'home',\n       component: loadView('Home'),\n     },\n     {\n       path: '/about',\n       name: 'about',\n       component: loadView('About'),\n     },\n   ];\n   const options: RouterOptions = {\n     base: process.env.BASE_URL,\n     mode: 'history',\n     routes,\n   };\n   export default new VueRouter(options);\n   ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaggerok%2Ftsx-vue-composition-api-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaggerok%2Ftsx-vue-composition-api-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaggerok%2Ftsx-vue-composition-api-example/lists"}