Creating a sidebar with dynamic content using Vue and Vuex

In this tutorial, we’ll use Vuex to store dynamic content which can be read by a Sidebar component.

Note: This is a follow up from a previous tutorial in which we created an animated Sidebar component using Vuex and GSAP. We’ll be re-using a lot of code and setup from that tutorial, so you might want to start there.

If you want to just dive right into the code, here is the repo for this tutorial.

You can also see a live example here.

The Store

In the previous tutorial, we had a Vuex store with a UI module that only had one action and one mutation. We’ll build on that by adding another mutation that will set the sidebarComponent in our application state.

Now, the toggleSidebar action is responsible for triggering two mutations — it sets sidebarOpen as it previously did, but now it also sets sidebarComponent in application state. That is the only thing that changed in our Vuex store.

The Components

Our application will now have two different toggles — one toggle for showing a search form, and one toggle for showing a create form. Previously, there was just one toggle. Below is the main App.vue file:

Because we are using two different toggles that share a lot of functionality, it makes sense to make the sidebarToggle component a bit more extensible. Instead of creating two different toggle components, why not create one toggle that accepts a component and icon as props?

Below is the sidebarToggle component:

The sidebarToggle component has gotten a significant face-lift. In Vue, there is a reserved element called <component> which allows you to use dynamic components. In the main App.vue file, we pass a component to each toggle as a prop, as well as an icon. Here, we’re using the icon as a separate component. Each icon file is just an SVG element.

When the the toggle is clicked, we dispatch the toggleSidebar action just like before, but note that we are now passing a component object to the Vuex action on line 18. This action triggers the SET_SIDEBAR_COMPONENT mutation and writes the component to application state.

Now, we just need to modify the Sidebar component to render the applicable component from the Vuex store.

Below is the Sidebar component:

Sidebar now has a new computed property called component which it gets by reading the sidebarComponent from the Vuex store. On line 3, the component is rendered as a <component>! Now, we’ve got an animated sidebar with dynamic content!

The Conclusion

By leveraging Vue’s ability to render dynamic content through the reserved <component> element, we have saved ourselves a lot of time and code. Instead of creating two sidebar components and two toggles, we can reuse the existing Sidebar and SidebarToggle components. Imagine you had 5 or 6 toggles? What would you do with all the extra saved time? That’s like 2 or 3 extra episodes of Law and Order SVU.