chore(examples): add tsx example (#4855)

examples/typescript-tsx/README.md

@@ -0,0 +1 @@
+# TSX example

examples/typescript-tsx/components/HelloWorld/HelloWorld.tsx

@@ -0,0 +1,14 @@
+import Vue from 'vue'
+import styles from './styles.css'
+
+export default Vue.extend({
+  beforeCreate () {
+    // Render Inline CSS on SSR
+    if ((styles as any).__inject__) {
+      (styles as any).__inject__(this.$ssrContext)
+    }
+  },
+  render () {
+    return <h1 class={styles.title}>Hello world!</h1>
+  }
+})

examples/typescript-tsx/components/HelloWorld/index.ts

@@ -0,0 +1,3 @@
+import HelloWorld from './HelloWorld'
+
+export default HelloWorld

examples/typescript-tsx/components/HelloWorld/styles.css

@@ -0,0 +1,4 @@
+.title {
+  font-style: italic;
+  color: green;
+}

examples/typescript-tsx/components/HelloWorld/styles.css.d.ts

@@ -0,0 +1 @@
+export const title: string;

examples/typescript-tsx/nuxt.config.ts

@@ -0,0 +1,14 @@
+export default {
+  build: {
+    loaders: {
+      vueStyle: {
+        manualInject: true
+      },
+      css: {
+        modules: true,
+        importLoaders: 1,
+        localIdentName: '[local]_[hash:base64:5]'
+      }
+    }
+  }
+}

examples/typescript-tsx/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "typescript-tsx",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "nuxt-ts",
+    "build": "nuxt-ts build",
+    "start": "nuxt-ts start",
+    "generate": "nuxt-ts generate",
+    "lint": "tslint --project .",
+    "lint:fix": "tslint --project . --fix",
+    "post-update": "yarn upgrade --latest",
+    "watch:css": "tcm components -w"
+  },
+  "dependencies": {
+    "nuxt-ts": "latest"
+  },
+  "devDependencies": {
+    "tslint-config-standard": "^8.0.1",
+    "typed-css-modules": "^0.3.7"
+  }
+}

examples/typescript-tsx/pages/index.tsx

@@ -0,0 +1,13 @@
+import Vue from 'vue'
+import HelloWorld from '../components/HelloWorld'
+
+export default Vue.extend({
+  name: 'Home',
+  render () {
+    return (
+      <div>
+        <HelloWorld />
+      </div>
+    )
+  }
+})

examples/typescript-tsx/shims-tsx.d.ts

@@ -0,0 +1,11 @@
+import Vue, { VNode } from 'vue'
+
+declare global {
+  namespace JSX {
+    interface Element extends VNode {}
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+  }
+}

examples/typescript-tsx/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@nuxt/typescript",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "noImplicitThis": true,
+    "types": ["@types/node", "@nuxt/vue-app"]
+  }
+}

examples/typescript-tsx/tslint.json

@@ -0,0 +1,7 @@
+{
+  "defaultSeverity": "error",
+  "extends": ["tslint-config-standard"],
+  "rules": {
+    "prefer-const": true
+  }
+}