The Easiest Vulcan Component

It’s a Sunday. It’s raining. There’s a storm blowing through.

You would think I’d have some time for an elaborate and imaginative example of a custom Vulcan component.

Today however, aside from taking two-thirds of my children ice-skating, I thought I’d pick the simplest possible component as an example of how anyone can create something of immense use and value inside the Vulcan eco-system regardless of your technical skills and ability.

Spotify Song and Playlist Embed

Cutting straight to the chase, we’re going to create a custom component that will enable us to embed a song or an entire playlist into our Vulcan charts.

The nice folks in charge of Developer Relations at Spotify have provided a convenient toolkit for us use, so let’s go ahead and use it.

These widgets are just what we want — we won’t have to build any markup to render a fully functional player, with track lists and album artwork.

Spotify also provides a helpful embed code generator tool.

<iframe src=”https://open.spotify.com/embed/track/7Dj2wqPYXfSRFwa6qyOztr" width=”300" height=”380" frameborder=”0" allowtransparency=”true” allow=”encrypted-media”></iframe>

In order to embed a Spotify playlist or track, therefore, we just need this iframe embed code inside our component template. We will need a way to provide a suitable URL on each instance of the component that we use, via the slash command in the Vulcan editor, for example. That will be provided in our props.

Let’s go ahead and open the Component Editor inside Vulcan and click to create a new component. We can complete some of the basic information about our new simple component.

Template

Our component has a very simple template, using just the single iframe element inside the parent div.

Here’s the default, based on the Spotify iframe example.

We now need to tweak this. Let’s go ahead and do it, I’ll explain afterwards.

1. Change the src to :src to denote a dynamic attribute binding. Let’s replace the full url with a variable, which will simply call url.
2. In order to make use of the Editor size, let’s make the player fill the width of editor by making the width="100%".
3. And that’s it. I told you it was simple!

Script

The second part of the standard single page Vue.js component, is the javascript.

True to the spirit of this article, we’re keeping this brain numbingly easy.

All we need is the props that will be used to pass the URL of our song or playlist to the component and in turn will be used in the iframe src.

So we just name the Component and add the url object to props. That’s literally all it takes.

By passing a default value, we can now see the component render in the component preview.

Style

What style? We don’t need it. Move on.

Putting our component to use

Be sure to save your component. Head into your Vulcan project, select a chart and open an object to view the editor.

Type the / command and select your Spotify component.

Conclusion

It may be possible to build very complex and dynamic components inside Vulcan. Whilst I encourage you to really stretch the possibilities and potential of powerful single vue.js components for use in the magic Vulcan editor — I also encourage you to consider the art of simplicity.

As you can see from this example, it is quite possible to add a lot of value to your Vulcan experience, with minimal coding knowledge.