https://github.com/dotneet/nuxtend
This library extends the Nuxt.js features.
https://github.com/dotneet/nuxtend
javascript nuxtjs vuejs
Last synced: 11 months ago
JSON representation
This library extends the Nuxt.js features.
- Host: GitHub
- URL: https://github.com/dotneet/nuxtend
- Owner: dotneet
- Created: 2017-09-27T05:13:16.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T13:44:33.000Z (over 3 years ago)
- Last Synced: 2025-07-31T02:45:49.411Z (11 months ago)
- Topics: javascript, nuxtjs, vuejs
- Language: JavaScript
- Homepage:
- Size: 488 KB
- Stars: 27
- Watchers: 1
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
This library makes Nuxt.js possible to use mixin for asyncData()/fetch() and provide some helpful features.
## Install
```bash
npm i nuxtend
```
## Mixin
```js
import nuxtend from 'nuxtend'
const m = {
async asyncData (context) {
// works!
return {commonData: 'data'}
}
}
export default nuxtend({
mixins: [m],
async asyncData (context) {
return {}
}
})
```
## methods can be used on asyncData/fetch via `this`.
This feature enables you to call a vuex action in same syntax anywhere.
Of course you can call non vuex action methods also.
```js
import nuxtend from 'nuxtend'
import {mapActions} from 'vuex'
const mixinA = {
methods: {
...mapActions({'findBooks': 'books/find'})
}
}
export default nuxtend({
mixins: [mixinA],
async asyncData (context) {
const books = await this.findBooks()
const audios = await this.findAudios()
return {
books,
audios
}
},
mounted () {
this.findBooks()
},
methods: {
...mapActions({
'findAudios': 'audios/find'
})
}
})
```
## Abstraction of calling api and actions. (since 0.2.0)
```js
export default nuxnted({
nuxtend: {
actions: ['apple', 'me/banana']
},
async asyncData () {
// if 'apples/get' action is defined call it, if not call $axios.get('/apples/10')
const res = await this.getApple(10)
// and also below functions can be used as well.
// - action: 'apples/getList' api: this.$axios.get('/apples', {params: {status: 'dropped'}})
// this.getAppleList({status: 'dropped'})
// - action: 'apples/create' api: this.$axios.post('/apples', {status: 'dropped'})
// this.postApple({status: 'dropped'})
// - action: 'apples/update' api: this.$axios.put('/apples/10', {status: 'dropped'})
// this.putApple({id: 10, params: {status: 'dropped'}})
// - action: 'apples/delete' api: this.$axios.delete('/apples/10')
// this.deleteApple(10)
// - action: 'me/bananas/get' api: this.$axios.get('/me/bananas/10')
// this.getBanaa(1)
return {
apple: res.data
}
}
})
```