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
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.
Our component has a very simple template, using just the single
iframe element inside the parent
Here’s the default, based on the Spotify
We now need to tweak this. Let’s go ahead and do it, I’ll explain afterwards.
- Change the
:srcto denote a dynamic attribute binding. Let’s replace the full url with a variable, which will simply call
- In order to make use of the Editor size, let’s make the player fill the width of editor by making the
- And that’s it. I told you it was simple!
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
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.
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.
/ command and select your Spotify component.
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.