docs(examples): add jsx example (#6870)

Co-authored-by: Pooya Parsa <[email protected]>

Author: HomWang

docs/content/2.guide/3.directory-structure/10.pages.md

@@ -34,6 +34,7 @@ export default defineComponent({
 ```
 
 ```ts [pages/index.tsx]
+// https://v3.nuxtjs.org/examples/advanced/jsx
 // https://vuejs.org/guide/extras/render-function.html#jsx-tsx
 export default defineComponent({
   render () {

docs/content/4.examples/6.advanced/jsx.md

@@ -0,0 +1,12 @@
+---
+template: Example
+---
+
+# JSX / TSX
+
+This example shows how to use [jsx syntax](https://vuejs.org/guide/extras/render-function.html#jsx-tsx) with typescript in Nuxt pages and components.
+
+::ReadMore{link="https://vuejs.org/guide/extras/render-function.html#jsx-tsx"}
+::
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/advanced/jsx" file="nuxt.config.ts"}

examples/advanced/jsx/app.vue

@@ -0,0 +1,26 @@
+<script lang="tsx" setup>
+// Component could be a simple function with JSX syntax
+const Welcome = () => <span>Welcome </span>
+
+// Or using defineComponent setup that returns render function with JSX syntax
+const Nuxt3 = defineComponent(() => {
+  return () => <span>nuxt3</span>
+})
+
+// We can combine components with JSX syntax too
+const InlineComponent = () => (
+    <div>
+      <Welcome />
+      <span>to </span>
+      <Nuxt3 />
+    </div>
+)
+</script>
+
+<template>
+  <NuxtExampleLayout example="advanced/jsx">
+    <InlineComponent />
+    <!-- Defined in components/jsx-component.ts -->
+    <MyComponent message="This is an external JSX component" />
+  </NuxtExampleLayout>
+</template>

examples/advanced/jsx/components/MyComponent.tsx

@@ -0,0 +1,12 @@
+export default defineComponent({
+  props: {
+    message: String
+  },
+  render: (props) => {
+    return (
+    <div>
+      { props.message }
+    </div>
+    )
+  }
+})

examples/advanced/jsx/nuxt.config.ts

@@ -0,0 +1,7 @@
+import { defineNuxtConfig } from 'nuxt'
+
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui'
+  ]
+})

examples/advanced/jsx/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "example-jsx",
+  "private": true,
+  "scripts": {
+    "build": "nuxi build",
+    "dev": "nuxi dev",
+    "start": "nuxi preview"
+  },
+  "devDependencies": {
+    "@nuxt/ui": "^0.2.0",
+    "nuxt": "npm:nuxt3@latest"
+  }
+}

examples/advanced/jsx/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

yarn.lock

@@ -6759,6 +6759,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"example-jsx@workspace:examples/advanced/jsx":
+  version: 0.0.0-use.local
+  resolution: "example-jsx@workspace:examples/advanced/jsx"
+  dependencies:
+    "@nuxt/ui": ^0.2.0
+    nuxt: "npm:nuxt3@latest"
+  languageName: unknown
+  linkType: soft
+
 "example-layouts@workspace:examples/routing/layouts":
   version: 0.0.0-use.local
   resolution: "example-layouts@workspace:examples/routing/layouts"