mirror of
https://github.com/nuxt/nuxt.git
synced 2025-01-30 23:32:38 +00:00
example: add jsx
This commit is contained in:
parent
7d5ecbfd08
commit
4b841c7f2c
@ -1,15 +0,0 @@
|
|||||||
<script>
|
|
||||||
export default {
|
|
||||||
asyncData({ req }) {
|
|
||||||
return {
|
|
||||||
name: req ? 'server' : 'client'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
render(h) {
|
|
||||||
return <div>
|
|
||||||
<p>Hi from {this.name}</p>
|
|
||||||
<nuxt-link to="/">Home page</nuxt-link>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
@ -1,8 +0,0 @@
|
|||||||
export default {
|
|
||||||
render(h) {
|
|
||||||
return <div>
|
|
||||||
<h1>Welcome !</h1>
|
|
||||||
<nuxt-link to="/about">About page</nuxt-link>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
}
|
|
5
examples/jsx/README.md
Normal file
5
examples/jsx/README.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
# Render Functions & JSX Example
|
||||||
|
|
||||||
|
## Documentation
|
||||||
|
|
||||||
|
Vue: https://vuejs.org/v2/guide/render-function.html
|
17
examples/jsx/components/test.vue
Normal file
17
examples/jsx/components/test.vue
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<template>
|
||||||
|
<p v-html="data"></p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
data: String
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
p {
|
||||||
|
padding: 5px 20px;
|
||||||
|
}
|
||||||
|
</style>
|
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "hello-nuxt-jsx",
|
"name": "nuxt-jsx",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"nuxt": "latest"
|
"nuxt": "next"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "nuxt",
|
"dev": "nuxt",
|
21
examples/jsx/pages/about.js
Normal file
21
examples/jsx/pages/about.js
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
|
||||||
|
import Test from '~/components/test.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
head: {
|
||||||
|
title: 'About Page',
|
||||||
|
meta: [
|
||||||
|
{ hid: 'description', name: 'description', content: 'About page description' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Test
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
return <div class='container'>
|
||||||
|
<h1>About page</h1>
|
||||||
|
<test data='I am test component' />
|
||||||
|
<p><nuxt-link to='/'>Home page</nuxt-link></p>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
20
examples/jsx/pages/index.js
Executable file
20
examples/jsx/pages/index.js
Executable file
@ -0,0 +1,20 @@
|
|||||||
|
export default {
|
||||||
|
head: {
|
||||||
|
title: 'Home page 🚀',
|
||||||
|
meta: [
|
||||||
|
{ hid: 'description', name: 'description', content: 'Home page description' }
|
||||||
|
],
|
||||||
|
script: [
|
||||||
|
{ src: '/head.js' },
|
||||||
|
// Supported since 1.0
|
||||||
|
{ src: '/body.js', body: true },
|
||||||
|
{ src: '/defer.js', defer: '' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
return <div class='container'>
|
||||||
|
<h1>Home page 🚀</h1>
|
||||||
|
<nuxt-link to='/about'>About page</nuxt-link>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user