In this tutorial I will show you how to create a Breadcrumb component using Vue. If you don’t already know, the picture below is a breadcrumb component.

We will just be building the presentation layer of this component, but no functionality. If I see a bunch of people wanting to know how to remove and add crumbs dynamically, then I will make a 2nd part to this tutorial. A Breadcrumb component is pretty simple, so this will be a good tutorial if you are just starting out with Vue.

Outline

• Bootstrap: Installing Bootstrap for a few styles
• Breadcrumb Component: Creating the core component
• App.vue: Adding the component to this file in order to show your breadcrumb in the browser

NOTE: I will not cover detailed project setup in this article, I am starting from a basic Vue app that was just created using vue create crumbs and I am using Visual Studio Code.

Alright, let’s get started.

#coding #javascript #web-development #vuejs