example: add jsx

This commit is contained in:
Clark Du 2017-12-08 22:58:05 +08:00
parent 7d5ecbfd08
commit 4b841c7f2c
7 changed files with 65 additions and 25 deletions

View File

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

View File

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

@ -0,0 +1,5 @@
# Render Functions & JSX Example
## Documentation
Vue: https://vuejs.org/v2/guide/render-function.html

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

View File

@ -1,7 +1,7 @@
{
"name": "hello-nuxt-jsx",
"name": "nuxt-jsx",
"dependencies": {
"nuxt": "latest"
"nuxt": "next"
},
"scripts": {
"dev": "nuxt",

View 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
View 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>
}
}