Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support Vue 3 with VueAxios via CDN #82

Closed
msg7086 opened this issue Dec 21, 2020 · 9 comments · Fixed by #91
Closed

Support Vue 3 with VueAxios via CDN #82

msg7086 opened this issue Dec 21, 2020 · 9 comments · Fixed by #91
Labels
bug help wanted

Comments

@msg7086
Copy link

msg7086 commented Dec 21, 2020 •
edited
Loading

How to reproduce:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test Page</title>
</head>
<body>
  <div id="app"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.global.prod.js" integrity="sha512-M8VjsuCj1iBzrwKloFNjvQBmFXT2oF0MWExoLGpQT2nEx5tq7CP+BhWGJdczT1LoWAhyqHh+LJ6ihHSVGyclHw==" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js" integrity="sha512-DZqqY3PiOvTP9HkjIWgjO6ouCbq+dxqWoJZ/Q+zPYNHmlnI2dQnbJ5bxAHpAMw+LXRm4D72EIRXzvcHQtE8/VQ==" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-axios@3.2.0/dist/vue-axios.es5.js"></script>
</body>
</html>

Error message:

vue-axios.es5.js:1 Uncaught TypeError: Vue.use is not a function
    at vue-axios.es5.js:1
    at vue-axios.es5.js:1

Vue.use has been removed in Vue 3.
@msg7086 msg7086 changed the title Unable to use VueAxios via CDN Support Vue 3 with VueAxios via CDN Jan 23, 2021
@djom202
Copy link

djom202 commented Mar 29, 2021

Hi, happen the same with npm.

image

@imcvampire
Copy link
Owner

@djom202 seems like it isn't vue-axios bug. Could you provide a simple reproduction?

@djom202
Copy link

djom202 commented Apr 13, 2021

Hi @imcvampire, Also I'm trying to use in vue v2 and it's happing the same, I'm just importing the dependencies and trying to use it.

// main.js
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
// helper file
import Vue from 'vue'

exports.urlShorter = async (url, alias) => {
  const request = `https://api.php?key=${process.env.VUE_APP_APIKEY}&short=${encodeURI(url)}&name=${alias}`

  console.log('this.axios', this.axios)
  console.log('this.$http', this.$http)
  console.log('Vue.axios', Vue.axios)

  const resp = await this.$http.get(request).then(response => {
    console.log(response.data)
  })

  console.log('resp', resp)
}

image

@gregbaker
Copy link

I am having the same problem as @msg7086. The provided HTML causes the given exception. Same with vue-axios 3.2.4 and when the files are linked with a <script> directly from a local copy.

@imcvampire
Copy link
Owner

Is this what are you using? https://jsfiddle.net/imcvampire/t8a0yjbp/3/

@gregbaker
Copy link

gregbaker commented May 22, 2021 •
edited
Loading

The error message with that test is "Uncaught ReferenceError: exports is not defined". I was using vue.global.js (instead of vue.cjs.js) and getting an error: "Uncaught TypeError: Vue.use is not a function".

@imcvampire
Copy link
Owner

Maybe, Vue doesn't export Vue as a global var anymore.

@gregbaker
Copy link

It does: Vue.createApp is still the way to create the application object.

The instructions for using a plugin have changed between version 2 instructions and version 3 instructions. Instead of Vue.use(MyPlugin), the instruction is app.use(MyPlugin, optionalArguments).

I think the right solution is to check for window.Vue.use:

if (typeof exports == "object") {
  module.exports = plugin;
} else if (typeof define == "function" && define.amd) {
  define([], function(){ return plugin });
} else if (window.Vue && window.axios && window.Vue.use) {
  Vue.use(plugin, window.axios);
}

@imcvampire
Copy link
Owner

@gregbaker Nice, thank you! If you're okay, feel free to create a merge request.

@imcvampire imcvampire mentioned this issue May 23, 2021
Merged
@Alanscut Alanscut mentioned this issue Jul 28, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug help wanted
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Check window.Vue.use for vue 2 imcvampire/vue-axios
4 participants
@msg7086 @gregbaker @djom202 @imcvampire