How to add to Nuxt TSX?

Question

Vue.js

Actually the subject, how to add .TSX and render functions to nuxt.js?

Those examples that are on the git hub and . the dock did not help, and is it worth using tsx on a combat project?

Code:
./src/components/top-bar/index.tsx

import Vue, { VNode, CreateElement } from 'vue';
import './TopBar.sass';

export default {
    render(h: CreateElement): VNode {
        return (
            <div>
                Oi!
            </div>
        )
    }
}

Console:

./src/components/top-bar/index.tsx

Module parse failed: Unexpected token (5:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| export default {
>     render(h: CreateElement): VNode {
|         return (
|             <div>

 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/index.vue?vue&type=script&lang=js& 12:0-52 15:12-18
 @ ./src/pages/index.vue?vue&type=script&lang=js&
 @ ./src/pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

Answer 1

It seems this will help you Write class-based Vue component with TypeScript
npm install vue-tsx-helper
examples follow
// TestComponent.tsx ...
I will use ts technology, because Nuxt supports ts via nuxt-ts. Although I write with my hands, and correcting eslint-ts swearing at every comma is very tedious.
As I understand it, most examples on the type are collected in the MS VisualStudio IDE.
I myself use a slightly different technology.

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'
import Logo from '~/components/Logo.vue'

@Component({
  components: {
    Logo
  }
})
export default class Index extends Vue {

good luck with coding