|
1 | 1 | # Getting Started with the Vue Breadcrumb Component |
2 | 2 |
|
3 | | -A quick-start project that demonstrates how to add a Vue Breadcrumb component to a Vue app. This project also includes code snippets to customize the Breadcrumb item separator, enable navigation to the last item, set overflow modes, and configure both relative and absolute URLs for the Breadcrumb component. |
4 | | - |
5 | | -Example: https://ej2.syncfusion.com/vue/demos/#/bootstrap5/breadcrumb/default.html |
| 3 | +**Repository Description** |
| 4 | +This repository contains a quick‑start Vue sample that demonstrates how to integrate and customize the Syncfusion Vue Breadcrumb component in a Vue application. |
6 | 5 |
|
7 | | -Documentation: https://ej2.syncfusion.com/vue/documentation/breadcrumb/vue-3-getting-started |
| 6 | +A quick‑start project that demonstrates how to add a Vue Breadcrumb component to a Vue app. This project also includes code snippets to customize the breadcrumb item separator, enable navigation to the last item, configure overflow modes, and handle both relative and absolute URLs for the breadcrumb component. |
8 | 7 |
|
| 8 | +## Project Overview |
| 9 | +The purpose of this project is to help developers get started with the Syncfusion Vue Breadcrumb component. It shows common breadcrumb configuration scenarios that improve navigation clarity and user experience in Vue applications. |
9 | 10 |
|
10 | | -## Project pre-requisites |
11 | | -Make sure that your machine has the following setup before starting to work on this project. |
| 11 | +## Features |
| 12 | +- Integration of the Syncfusion Vue Breadcrumb component |
| 13 | +- Custom breadcrumb item separators |
| 14 | +- Navigation support for the last breadcrumb item |
| 15 | +- Overflow mode configuration |
| 16 | +- Handling of relative and absolute URLs |
12 | 17 |
|
13 | | -Visual Studio Code |
| 18 | +## Examples |
| 19 | +- Online demo:<br> |
| 20 | + https://ej2.syncfusion.com/vue/demos/#/bootstrap5/breadcrumb/default.html |
14 | 21 |
|
15 | | -Node.js |
| 22 | +## Prerequisites |
| 23 | +- Visual Studio Code |
| 24 | +- Node.js |
| 25 | +- Vue |
16 | 26 |
|
17 | | -Vue |
| 27 | +## Installation and Running the Application |
18 | 28 |
|
19 | | -## How to run this application? |
20 | | -To run this application, you need to first clone the getting-started-with-the-vue-breadcrumb-component repository and then navigate to its appropriate path where it has been located in your system. |
21 | | -To do so, open the command prompt and run the below commands one after the other. |
22 | | -``` |
23 | | -git clone getting-started-with-the-vue-breadcrumb-component breadcrumb |
24 | | -cd breadcrumb |
25 | | -``` |
26 | | -## Installation |
27 | | -Once done with downloading, next you need to install the necessary packages required to run this application locally. The `npm install` command will install all the needed Vue packages into your current project and to do so, run the below command. |
| 29 | +### Clone the Repository |
| 30 | +```bash |
| 31 | +git clone https://github.com/SyncfusionExamples/getting-started-with-the-vue-breadcrumb-component.git |
28 | 32 | ``` |
| 33 | +### Install Dependencies |
| 34 | +Once the project is downloaded, install the required Vue packages using: |
| 35 | +```bash |
29 | 36 | npm install |
30 | 37 | ``` |
31 | | -## Running on development server |
32 | | -Run `npm run dev` command. Navigate to `http://localhost:8080/`. The app will automatically reload if you change any of the source files. |
| 38 | +This command installs all dependencies required to run the application locally. |
| 39 | +### Run on Development Server |
| 40 | +Start the development server using: |
| 41 | +```bash |
| 42 | +npm run dev |
| 43 | +``` |
| 44 | +Navigate to `http://localhost:8080/`. The application will automatically reload if you change any of the source files. |
| 45 | + |
| 46 | +## Documentation |
| 47 | +- General Syncfusion documentation:<br> |
| 48 | +https://help.syncfusion.com/ |
| 49 | +- Vue Introduction:<br> |
| 50 | +https://ej2.syncfusion.com/vue/documentation/introduction |
| 51 | +- Vue Breadcrumb Getting Started:<br> |
| 52 | +https://ej2.syncfusion.com/vue/documentation/breadcrumb/getting-started |
| 53 | + |
| 54 | +## Troubleshooting |
| 55 | +- Ensure Node.js and Vue are installed correctly. |
| 56 | +- Run npm install again if dependency issues occur. |
| 57 | +- Restart the development server if UI changes are not reflected. |
| 58 | +- Check the browser console for runtime errors. |
| 59 | + |
| 60 | +## Support |
| 61 | +For detailed API references, configuration guidance, and additional examples, refer to the Syncfusion Vue documentation links provided above. |
0 commit comments