Permalink
Browse files

feat: upgrade for nuxt rc8

BREAKING CHANGE: app.axios is not available anymore (without $) should always use app.$axios
  • Loading branch information...
pi0 committed Aug 30, 2017
1 parent a75097d commit a341185f5bd951d6112e11dfd49724d032cb1668
Showing with 619 additions and 142 deletions.
  1. +10 −19 README.md
  2. +1 −11 lib/index.js
  3. +3 −26 lib/plugin.template.js
  4. +2 −2 package.json
  5. +1 −1 test/fixture/pages/asyncData.vue
  6. +1 −1 test/fixture/pages/ssr.vue
  7. +601 −82 yarn.lock
@@ -8,7 +8,7 @@
[![js-standard-style](https://cdn.rawgit.com/standard/standard/master/badge.svg)](http://standardjs.com)
> 🔒 Secure and easy [axios](https://github.com/mzabriskie/axios) integration with Nuxt.js.
> Secure and Easy [Axios](https://github.com/mzabriskie/axios) integration with Nuxt.js.
[📖 **Release Notes**](./CHANGELOG.md)
@@ -49,37 +49,28 @@
```js
async asyncData({ app }) {
const ip = await app.axios.$get('http://icanhazip.com')
const ip = await app.$axios.$get('http://icanhazip.com')
return { ip }
}
```
### Store `nuxtServerInit`
```js
async nuxtServerInit ({ commit }, { app }) {
const ip = await app.axios.$get('http://icanhazip.com')
const ip = await app.$axios.$get('http://icanhazip.com')
commit('SET_IP', ip)
}
```
### Store actions
If you need axios instance in store actions, you may have to pass it when dispatching.
(Needs Nuxt >= 1.0.0-RC8)
```js
// In components
export default {
methods: {
updateIP() {
this.$store.dispatch('getIP', { axios: this.$axios })
}
}
}
// In store
{
actions: {
async getIP ({ commit }, { axios }) {
const ip = await axios.$get('http://icanhazip.com')
async getIP ({ commit }) {
const ip = await this.$axios.$get('http://icanhazip.com')
commit('SET_IP', ip)
}
}
@@ -159,10 +150,10 @@ requestInterceptor: (config, { store }) => {
Axios plugin also supports fetch style requests with `$` prefixed methods:
```js
// Normal usage with axios
let data = (await axios.get('...')).data
let data = (await $axios.get('...')).data
// Fetch Style
let data = await axios.$get('...')
let data = await $axios.$get('...')
```
### `setHeader(name, value, scopes='common')`
@@ -245,9 +236,9 @@ Start Nuxt
Now you can make requests to backend: (Works fine in both SSR and Browser)
```js
async asyncData({app}) {
async asyncData({ app }) {
// Magically makes request to http://www.mocky.io/v2/59388bb4120000dc00a672e2
const nuxt = await app.axios.$get('59388bb4120000dc00a672e2')
const nuxt = await app.$axios.$get('59388bb4120000dc00a672e2')
return {
nuxt // -> { nuxt: 'Works!' }
@@ -43,7 +43,7 @@ module.exports = function nuxtAxios (moduleOptions) {
}
// Register plugin
addPlugin.call(this, {
this.addPlugin({
src: path.resolve(__dirname, 'plugin.template.js'),
fileName: 'axios.js',
options
@@ -53,14 +53,4 @@ module.exports = function nuxtAxios (moduleOptions) {
console.log(`[AXIOS] Base URL: ${chalk.green(options.baseURL)} , Browser: ${chalk.green(options.browserBaseURL)}`)
}
// Temporary fix for nuxt/nuxt.js#1127
function addPlugin (template) {
const { dst } = this.addTemplate(template)
// Add to nuxt plugins
this.options.plugins.unshift({
src: path.join(this.options.buildDir, dst),
ssr: template.ssr
})
}
module.exports.meta = require('../package.json')
@@ -1,25 +1,6 @@
import Axios from 'axios'
import Vue from 'vue'
const axiosPlugin = {
install() {
if(Vue.__nuxt_axios_installed__) {
return
}
Vue.__nuxt_axios_installed__ = true
if (!Vue.prototype.hasOwnProperty('$axios')) {
Object.defineProperty(Vue.prototype, '$axios', {
get () {
return this.$root.$options.$axios
}
})
}
}
}
Vue.use(axiosPlugin)
// We cannot extend Axios.prototype
const axiosExtraProto = {}
@@ -111,7 +92,7 @@ const baseURL = process.browser
? (process.env.API_URL_BROWSER || '<%= options.browserBaseURL %>')
: (process.env.API_URL || '<%= options.baseURL %>')
export default (ctx) => {
export default (ctx, inject) => {
const { app, store, req } = ctx
// Create a fresh objects for all default header scopes
@@ -182,12 +163,8 @@ export default (ctx) => {
// Error handler
axios.interceptors.response.use(undefined, errorHandler.bind(ctx));
// Make accessible using context
app.axios = app.$axios = axios
ctx.axios = ctx.$axios = axios
if (store) {
store.axios = store.$axios = axios
}
// Publish axios to the context
inject('axios', axios)
// Setup axios helpers
setupHelpers(axios)
@@ -30,12 +30,12 @@
"dependencies": {
"axios": "^0.16.2",
"chalk": "^2.1.0",
"nuxt": "^1.0.0-rc4",
"nuxt": "^1.0.0-rc8",
"whatwg-url": "^6.1.0"
},
"devDependencies": {
"codecov": "^2.3.0",
"eslint": "^4.4.1",
"eslint": "^4.5.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jest": "^20.0.3",
@@ -7,7 +7,7 @@
<script>
export default {
async asyncData ({ app }) {
let res = await app.axios.$get('foo/bar')
let res = await app.$axios.$get('foo/bar')
return {
res
}
@@ -10,7 +10,7 @@ export default {
async fetch ({ app, route }) {
let doLogin = route.query.login !== undefined
if (doLogin) {
app.axios.setHeader('sessionId', reqCtr++)
app.$axios.setHeader('sessionId', reqCtr++)
}
},
computed: {
Oops, something went wrong.

0 comments on commit a341185

Please sign in to comment.