Using Prismic's Embed for Soundcloud/ Bringing Soundcloud song player into Vue.js

[lddeitz (Luke Deitz)]

Hello everyone - I'm building a web app in Vue.js and am needing to create a simple way for the user to input a Soundcloud link through a form, and then have Soundcloud's embedded music player show up on my app - kind of how Wordpress does it.

I referenced Prismic's example below:

Currently just trying to figure out what I'm missing.

For my template section, lines 14-16 have the embedded portion of the

(which should display the embedded player).

In the data section, lines 83-85 have the fields variable defined.

In my created section, line 102 has "this.getContent()" like their example. I'm also calling an axios.get request to pull the song.url from my backend. This is from line 109-112.

Finally, in my methods, I have the getContent function. I am passing the song.url through var params and then using another axios call to pull the url and then assign the embed to be the song_url data.

The above is shaky to me, because in Prismic's example they used "document" where I used "song_url" and wasn't sure if "document" should be used or not. I tried to follow the documentation as close as possible. Please feel free to point out where I may be missing something - or even more, if I'm misunderstanding how this code is supposed to work/what it does. Thank you so much for your help.

[Phil (Phil Snow)]

Hello Luke,

Welcome to the community and I’m really sorry for the long delay in the reply.

I think way you implementing this might be slightly over complicated. If I’m correct in thinking that the content coming from soundcloud is just and iframe then you can use a custom embed as described below.

Adding Custom Embed or HTML code

You can also use a key text field and then in your project just pass that content in to a <span> using v-html like so:

<span v-html="document.data.embed_field"></span>

This should execute your code.

Let me know if this helps.

Thanks.