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.

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

Possible to use this from CDN? #123

Closed
dsottimano opened this issue Jul 26, 2021 · 5 comments
Closed

Possible to use this from CDN? #123

dsottimano opened this issue Jul 26, 2021 · 5 comments
Labels

Comments

@dsottimano
Copy link

I'm using CDN implementation for Vue 3 and would like to include your component also using CDN (https://www.jsdelivr.com/package/npm/vue-json-pretty?version=2.0.2).

How might I do this?

@leezng
Copy link
Owner

leezng commented Jul 26, 2021

Do you mean #2 ?

@dsottimano
Copy link
Author

dsottimano commented Jul 26, 2021

That worked, thank you - but I'd like to use Vue 3. Please forgive me if I'm missing something obvious but this is just one implementation I've tried:

<!DOCTYPE html>

<head>
	<script src="https://unpkg.com/vue@3.0.2"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue-json-pretty@2.0.2/lib/vue-json-pretty.min.js"></script>

</head>

<body>
	<div id="app">

		<vue-json-pretty :data="jsonData"></vue-json-pretty>

	</div>

	<script>
		const app = Vue.createApp({
			data() {
				return {
					jsonData: { "country": "Germany", "capital": "Berlin", "currency": "Euro" }
				}
			}
		})

		app.component('VueJsonPretty', VueJsonPretty.default)
		app.mount('#app')
	</script>

</body>

</html>

Errors:

vue-json-pretty.min.js:5 Uncaught TypeError: Cannot read property 'defineComponent' of undefined
    at Object.719 (vue-json-pretty.min.js:5)
    at o (vue-json-pretty.min.js:5)
    at vue-json-pretty.min.js:5
    at vue-json-pretty.min.js:5
    at vue-json-pretty.min.js:5
    at vue-json-pretty.min.js:5
719 @ vue-json-pretty.min.js:5
o @ vue-json-pretty.min.js:5
(anonymous) @ vue-json-pretty.min.js:5
(anonymous) @ vue-json-pretty.min.js:5
(anonymous) @ vue-json-pretty.min.js:5
(anonymous) @ vue-json-pretty.min.js:5
vuejson.html:25 Uncaught ReferenceError: VueJsonPretty is not defined
    at vuejson.html:25
(anonymous) @ vuejson.html:25

@leezng
Copy link
Owner

leezng commented Jul 27, 2021

@dsottimano
I found a bug here, the component reads the global vue, but vue3 is mounted with window.Vue, I will solve it in the next version, currently you can skip it by the following method:

<script src="https://unpkg.com/vue@3.0.2"></script>
<script>window.vue = Vue</script>
<script src="https://cdn.jsdelivr.net/npm/vue-json-pretty@2.0.2/lib/vue-json-pretty.min.js"></script>

@leezng leezng added the bug label Jul 27, 2021
@dsottimano
Copy link
Author

I would have never figured that out, thank you very much. Would you like me to make a PR to update the readme with these 2 code snippets and a link to your demo ? I bet it would help quite a few people.

Also, where can I add in feature requests?

@leezng
Copy link
Owner

leezng commented Jul 27, 2021

Yeah, You can add a description in REDME, such as Use CDN.

@leezng leezng mentioned this issue Aug 5, 2021
@leezng leezng closed this as completed Aug 5, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants