This repository contains a Vue.js sample application that demonstrates client-side routing using Vue Router along with the Syncfusion Vue DataGrid component across multiple routed views.
This sample illustrates how to integrate the Syncfusion Vue DataGrid within a Vue application that uses Vue Router for navigation. The application defines multiple routes such as Home, About, and Contact, and renders different components based on the active route. One of the routed views displays a Syncfusion DataGrid bound to sample data, showing how the grid works seamlessly within a routed single-page application.
The project uses Vue 2 with Webpack configuration and highlights how routing, component-based architecture, and third-party UI components can work together in a structured Vue application. It serves as a reference for developers who want to use the Syncfusion DataGrid in applications that rely on client-side navigation.
- Vue Router–based navigation with multiple routes
- Integration of Syncfusion Vue DataGrid in routed components
- Declarative column definitions and data binding
- Webpack-based development and build workflow
- Node.js and npm
- Basic knowledge of Vue.js and Vue Router
Follow the steps below to clone the repository, install dependencies, and run the application.
-
Clone the repository and navigate to the project directory:
git clone https://github.com/SyncfusionExamples/DataGrid-routing-vue.git cd DataGrid-routing-vue -
Install the required npm packages:
npm install
-
Run the application in development mode:
npm run dev
Once the development server starts, open the displayed local URL in a browser. Use the navigation links to switch between routes and observe the Syncfusion DataGrid rendered within the routed components.
You can modify route definitions in the router configuration or update the grid configuration inside the component files to explore different routing and grid scenarios.