{"action":"created","issue":{"url":"https://api.github.com/repos/vue-bulma/nprogress/issues/13","repository_url":"https://api.github.com/repos/vue-bulma/nprogress","labels_url":"https://api.github.com/repos/vue-bulma/nprogress/issues/13/labels{/name}","comments_url":"https://api.github.com/repos/vue-bulma/nprogress/issues/13/comments","events_url":"https://api.github.com/repos/vue-bulma/nprogress/issues/13/events","html_url":"https://github.com/vue-bulma/nprogress/issues/13","id":239144811,"number":13,"title":"axios may not be defined as Vue.axios (e.g. when using with Laravel)","user":{"login":"nitradesign","id":20662079,"avatar_url":"https://avatars1.githubusercontent.com/u/20662079?v=3","gravatar_id":"","url":"https://api.github.com/users/nitradesign","html_url":"https://github.com/nitradesign","followers_url":"https://api.github.com/users/nitradesign/followers","following_url":"https://api.github.com/users/nitradesign/following{/other_user}","gists_url":"https://api.github.com/users/nitradesign/gists{/gist_id}","starred_url":"https://api.github.com/users/nitradesign/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nitradesign/subscriptions","organizations_url":"https://api.github.com/users/nitradesign/orgs","repos_url":"https://api.github.com/users/nitradesign/repos","events_url":"https://api.github.com/users/nitradesign/events{/privacy}","received_events_url":"https://api.github.com/users/nitradesign/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-06-28T12:16:20Z","updated_at":"2017-07-04T04:37:19Z","closed_at":null,"body":"For anyone using nprogress with Laravel + Vue you may have run into the same issue I did where axios is defined by Laravel as window.axios.\r\n\r\nThis means that in vue-nprogress/dist/vue-nprogress.js \r\n\r\n```\r\nif (applyOnHttp) {\r\n     var http = Vue.http;\r\n     var axios = Vue.axios;\r\n....\r\n```\r\nvar axios is undefined. To solve this you can simply copy vue-nprogress/dist/vue-nprogress.js to the laravel resources/js folder or wherever you choose, change it to below and then import this in app.js instead of importing it from node-modules. \r\n```\r\nif (applyOnHttp) {\r\n     var http = Vue.http;\r\n     var axios = window.axios;\r\n....\r\n```\r\nThis got it working perfectly for me.\r\n"},"comment":{"url":"https://api.github.com/repos/vue-bulma/nprogress/issues/comments/312778499","html_url":"https://github.com/vue-bulma/nprogress/issues/13#issuecomment-312778499","issue_url":"https://api.github.com/repos/vue-bulma/nprogress/issues/13","id":312778499,"user":{"login":"zanematthew","id":654712,"avatar_url":"https://avatars1.githubusercontent.com/u/654712?v=3","gravatar_id":"","url":"https://api.github.com/users/zanematthew","html_url":"https://github.com/zanematthew","followers_url":"https://api.github.com/users/zanematthew/followers","following_url":"https://api.github.com/users/zanematthew/following{/other_user}","gists_url":"https://api.github.com/users/zanematthew/gists{/gist_id}","starred_url":"https://api.github.com/users/zanematthew/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zanematthew/subscriptions","organizations_url":"https://api.github.com/users/zanematthew/orgs","repos_url":"https://api.github.com/users/zanematthew/repos","events_url":"https://api.github.com/users/zanematthew/events{/privacy}","received_events_url":"https://api.github.com/users/zanematthew/received_events","type":"User","site_admin":false},"created_at":"2017-07-04T04:37:18Z","updated_at":"2017-07-04T04:37:18Z","body":"Hi, @nitradesign \r\n\r\nThanks for posting. I came across your issue when I noticed a discrepancy between the loading of ajax content and the progress, did a quick search in the repo and say your solution.\r\n\r\nHowever I went with a \"best practices\" approach, using `axios.interceptors`, more below.\r\n\r\nThis is discussed here; #9, and here on the Axios repo; https://github.com/mzabriskie/axios#interceptors\r\n\r\n\r\n```\r\n// Disable the default http, and router option.\r\nVue.use(NProgress, {\r\n    http: false,\r\n    router: false\r\n});\r\n```\r\n\r\n```\r\nconst app = new Vue({\r\n  nprogress,\r\n  created: function () {\r\n    axios.interceptors.request.use(function (config) {\r\n        nprogress.start();\r\n        return config;\r\n    }, function (error) {\r\n        return Promise.reject(error);\r\n    });\r\n    axios.interceptors.response.use(function (response) {\r\n        nprogress.done();\r\n        return response;\r\n    }, function (error) {\r\n        return Promise.reject(error);\r\n    });\r\n  }\r\n}).$mount('#app');\r\n```\r\n"}}
{"actor":{"display_login":"zanematthew"}}