Vue Component Madness — Building a Toggle component

During the past months, I got to know a new framework which surprised me with its simplicity, elegance, and performance: Vue.js. It has pretty solid documentation, a steep learning curve and allows really rapid development (IMHO). This short article aims to show how to build a simple toggle component with Vue.

Project setup!

The setup is as easy as it could be for that. Install the vue-cli plus the global add-on to serve the created component. Please note that the following commands install the dependencies globally, which may be the reasons you’re experiencing inconsistent behavior on different machines.

npm install -g @vue/cli
npm install -g @vue/cli-service-global

For more information please visit:
Installation | Vue CLI as well as Instant Prototyping | Vue CLI.

Alright! This should be everything we need, so let’s create a directory and start the project:

mkdir vue-toggle
cd vue-toggle
touch App.vue

We’re creating a directory, enter it and generate a file called App.vue.
Classic beginning — we’re writing a simple „Hello World” into the App.vue.

Let’s take a look at it:

vue serve

The output should look something like this:

DONE Compiled successfully in 126ms 12:21:38 PM
App running at:
 — Local: http://localhost:8080/
 — Network: http://192.168.178.21:8080/

So entering http://localhost:8080/ in your browser you should see something like this:

What did just happen? vue servecompiles your App.vueand creates an HTML file that is served by a simple server.

Project setup — done! 🎉🥳🎉🥳🎉🥳

Creating a Vue component

Components are just reusable instances of Vue — for more in-depth information I recommend the docs: Components Basics — Vue.js.

Our goal is to create a simple toggle which, in the end, should look something like this:

Taken from https://docs.microsoft.com/de-de/windows/uwp/design/controls-and-patterns/toggles

Since we want to reuse our toggle we create a new component file:

touch Toggle.vue

Let’s set up the basic skeleton for our toggle:

Technically a toggle is nothing else than a checkbox. Makes sense doesn’t it — it can be active or not — checked or not.

To use the Toggle.vueit needs to be imported and added to our App’s components:

Refreshing the page in the browser — you should see a checkbox. We created a simple example, using our newly created toggle component.

Why are we using a checkbox here? Pretty simple — in case we’d like to use our Toggle in a form its value is automatically included in our form submission.

Adding Functionality 🧙‍♂️

What functionality do we actually need for the toggle?

• an active/inactive state + handler
• a name for form submissions
• a label

Time to add some props!

Pretty neat isn’t it? Now we’re able to set name, idand the activestate from outside the component. In case there is no id set from outside the component, the component will generate an identifier through the defined default method (thanks Adam Orłowski).

Note that we’re using a variable toggleActiveto represent the state of the toggle.

Let’s add some toggle functionality! Since properties should not be manipulated we need to update the value through an event emitter. There is a clever shortcut in Vue to do this:

The syncmodifier allows us a nice two-way binding for our property. For information on that have a look at Custom Events — Vue.js.

Now we’re only missing a nice label, which is pretty simple to add:

Add some style 😎

First, we’re adding some width to the label which gives us a consistent spacing in case we’re using several toggles. The display property is set to inline-block since a label is naturally an inlineelement.

Sweet! Now we need an element we can use to represent the toggle. The simplest thing we could do here — add a div with the class toggle:

Next — the basic „inactive“ style of the toggle:

Nice! We just added the basic style, using a pseudo-element for the small white circle. Using position: relative on the .toggleand position: absolutefor the pseudo-element afterwe’re able to simply place the white circle within the div.toggle. Using transition: all 400mswill take care of the activation animation.

One thing missing — the „active“ styling:

As soon as the input is checked, this is done through the activeprop, we apply the „active“ styling to the div.toggleand its pseudo-element after.

Aaaand we’re done! 🎉🎉🎉🎉

If you’re interested in the complete code — you can find it on my Github account: https://github.com/SteinRobert/vue-toggle-component-tutorial

I’m thinking about making this a series — „Vue Component Madness“. Let me know if you liked the article or not — if I should add or change something — feel free to provide me with any feedback. Do you have an idea for another component? Maybe a smart, sortable table? Or a nice notification widget component? Just leave me a comment — I appreciate any feedback, input, and wishes!