Beautiful Tabs With Cirrus CSS. Power of Vue Router 4
One day I was thoughtlessly surfing the Internet and suddenly found an SCSS framework that deeply touched my heart. At first sight, Cirrus CSS seemed to be ideal for rapid prototyping, and I was eager to try it out. If you’ve been reading my blog for some time, you should know that I love Bulma.css and use it in my every second project. But this time, I was ready to try something new. Cirrus CSS didn’t disappoint me. Furthermore, I liked it so much that I built a simple website to test as many of its components as I could.
After all, my brand new Vue App received the Header, the Hero, the Footer, Cards, and Tabs. Each component looked great on different screens, and I didn’t have to add a single line of CSS code. There was a challenge, though — I wasn’t sure how to make Vue Router work with the Cirrus CSS structure for the Tabs component. Yes, I chose the possibilities of Vue Router to build tabs, as I often did at my daytime job. So, after reading some documentation for Vue Router 4, I came up with a solution. Today I want to share it with you.
The first thing is to set everything up. Notice how I import Vue Router and Cirrus CSS in my main.js file:
The second step is to set up the router.js file. I created three routes and three separate pages for them: Home, News, and Donate.
The challenging part is to make it all work together in TheTabs.vue. Here is the component’s template:
This is where Vue Router 4 shows its power. I passed the custom option to <router-link> to prevent it from wrapping its content inside of an <a> element. Then I used <router-link>'s v-slot to customize my tabs. For more information, read the documentation.
In the second part of my component, I defined tabs in the data function. Keep in mind, that you can pass tabs as props if you want to make your component reusable.
The last thing I want to show you is the template of my App.vue. But don’t forget to import and set up all the components you need in your app.
Finally, here is what I managed to build:
The source code is here. Please, leave a comment if you have any questions or suggestions. Thank you for reading, and #StandWithUkraine.
