Awesome typed functional Vue components!

1. install software:

   npm i -E core-js @vue/composition-api npm i -ED babel-preset-vca-jsx

2. update babel.config.js file:

   module.exports = { presets: [ // '@vue/cli-plugin-babel/preset', 'vca-jsx', '@vue/app', ], };

3. remove all src/shims-*.d.ts files...
4. create src/shims-tsx.d.ts file with next content:

   import Vue, { VNode } from 'vue' import { ComponentRenderProxy } from '@vue/composition-api' declare global { namespace JSX { // tslint:disable no-empty-interface interface Element extends VNode {} // tslint:disable no-empty-interface interface ElementClass extends ComponentRenderProxy {} interface ElementAttributesProperty { $props: any; // specify the property name to use } interface IntrinsicElements { [elem: string]: any; } } } declare module '*.vue' { import Vue from 'vue'; export default Vue; }

5. migrate src/components/HelloWorld.vue component to -> src/components/HelloWorld.tsx component:

   import { createComponent } from '@vue/composition-api'; export default createComponent({ name: 'HelloWorld', props: { msg: { type: String, required: true, }, }, setup(props) { return () => ( <div> <h1>{props.msg}</h1>  </div> ); }, })

6. migrate src/App.vue component to -> src/App.tsx component:

   import { createComponent } from '@vue/composition-api'; import HelloWorld from '@/components/HelloWorld'; export default createComponent({ name: 'App', setup() { return () => ( <div> <HelloWorld msg='yay!' /> </div> ); }, });

1. transform views uses in routes:
   • src/views/Home.tsx -> typescript src/views/Home.vue:

     <template> <div> <h1>HelloWorld</h1> <HelloWorld msg="nonono" /> </div> </template> <script lang="ts">  import { createComponent } from '@vue/composition-api';  import HelloWorld from '@/components/HelloWorld';  export default createComponent({  name: 'Home',  components: {  HelloWorld,  },  }); </script>

   • src/views/About.tsx -> typescript src/views/About.vue:

     <template> <div> <h1>This is an about page</h1> <HelloWorld msg='yay!'/> </div> </template> <script lang="ts">  import { createComponent } from '@vue/composition-api';  import HelloWorld from '@/components/HelloWorld';  export default createComponent({  name: 'About',  components: {  HelloWorld,  },  }); </script>

2. fix typed router setup src/router/index.ts:

   import Vue from 'vue'; import VueRouter, { RouterOptions } from 'vue-router'; import { RouteConfig } from 'vue-router/types/router'; Vue.use(VueRouter); function loadView(view: string) { return () => import(/* webpackChunkName: "view-[request]" */ `@/views/${view}.vue`) } const routes: RouteConfig[] = [ { path: '/', name: 'home', component: loadView('Home'), }, { path: '/about', name: 'about', component: loadView('About'), }, ]; const options: RouterOptions = { base: process.env.BASE_URL, mode: 'history', routes, }; export default new VueRouter(options);