mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
Example with vue-class-component
This commit is contained in:
parent
b5330a063d
commit
f89722e7c8
10
examples/vue-class-component/nuxt.config.js
Normal file
10
examples/vue-class-component/nuxt.config.js
Normal file
@ -0,0 +1,10 @@
|
||||
module.exports = {
|
||||
build: {
|
||||
babel: {
|
||||
plugins: ['transform-decorators-legacy']
|
||||
},
|
||||
extend (config) {
|
||||
config.resolve.alias['nuxt-class-component'] = '~plugins/nuxt-class-component'
|
||||
}
|
||||
}
|
||||
}
|
13
examples/vue-class-component/package.json
Normal file
13
examples/vue-class-component/package.json
Normal file
@ -0,0 +1,13 @@
|
||||
{
|
||||
"name": "nuxt-class-component",
|
||||
"dependencies": {
|
||||
"babel-plugin-transform-decorators-legacy": "^1.3.4",
|
||||
"nuxt": "latest",
|
||||
"vue-class-component": "^5.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "nuxt",
|
||||
"build": "nuxt build",
|
||||
"start": "nuxt start"
|
||||
}
|
||||
}
|
3
examples/vue-class-component/pages/about.vue
Normal file
3
examples/vue-class-component/pages/about.vue
Normal file
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<h1>About</h1>
|
||||
</template>
|
49
examples/vue-class-component/pages/index.vue
Normal file
49
examples/vue-class-component/pages/index.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div>
|
||||
<input v-model="msg">
|
||||
<p>prop: {{propMessage}}</p>
|
||||
<p>msg: {{msg}}</p>
|
||||
<p>env: {{env}}</p>
|
||||
<p>helloMsg: {{helloMsg}}</p>
|
||||
<p>computed msg: {{computedMsg}}</p>
|
||||
<button @click="greet">Greet</button>
|
||||
<nuxt-link to="/about">About page</nuxt-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import Component from 'nuxt-class-component'
|
||||
|
||||
@Component({
|
||||
props: {
|
||||
propMessage: String
|
||||
}
|
||||
})
|
||||
export default class App extends Vue {
|
||||
// initial data
|
||||
msg = 123
|
||||
|
||||
// use prop values for initial data
|
||||
helloMsg = 'Hello, ' + this.propMessage
|
||||
|
||||
asyncData ({ req }) {
|
||||
return { env: req ? 'server' : 'client' }
|
||||
}
|
||||
|
||||
// lifecycle hook
|
||||
mounted () {
|
||||
this.greet()
|
||||
}
|
||||
|
||||
// computed
|
||||
get computedMsg () {
|
||||
return 'computed ' + this.msg
|
||||
}
|
||||
|
||||
// method
|
||||
greet () {
|
||||
alert('greeting: ' + this.msg)
|
||||
}
|
||||
}
|
||||
</script>
|
14
examples/vue-class-component/plugins/nuxt-class-component.js
Normal file
14
examples/vue-class-component/plugins/nuxt-class-component.js
Normal file
@ -0,0 +1,14 @@
|
||||
import Component from 'vue-class-component'
|
||||
|
||||
Component.registerHooks([
|
||||
'beforeRouteEnter',
|
||||
'beforeRouteLeave',
|
||||
'asyncData',
|
||||
'fetch',
|
||||
'middleware',
|
||||
'layout',
|
||||
'transition',
|
||||
'scrollToTop'
|
||||
])
|
||||
|
||||
export default Component
|
Loading…
Reference in New Issue
Block a user