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

Co-authored-by: Pooya Parsa <pooya@pi0.io>
This commit is contained in:
HomWang 2022-08-24 03:08:35 +08:00 committed by GitHub
parent 91b4e6c4ef
commit 1bce4df00a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 83 additions and 0 deletions

View File

@ -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 () {

View File

@ -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"}

View File

@ -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>

View File

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

View File

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

View File

@ -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"
}
}

View File

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

View File

@ -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"