# Using Wijmo with Vue
Learn how to use Wijmo components in Vue using this QuickStart Tutorial
## Content
Wijmo provides built-in support for Vue, enabling developers to integrate powerful UI components seamlessly into Vue applications. With Wijmo’s lightweight and high-performance controls, you can build responsive, data-driven applications while leveraging Vue’s reactive and component-based architecture.
Wijmo components for Vue allow you to use Wijmo controls within Vue templates markup. Each Wijmo Vue component acts as a wrapper for its corresponding Wijmo control. It automatically creates the Wijmo control instance behind the scenes which is accessible through the control property. Additionally, these components allow declarative binding to control properties and events directly within the Vue template markup.
> type=note
> **Note**: If you are using Wijmo with Vue 2, we recommend migrating to Vue 3 and updating the existing custom components to ensure complete compatibility.
## Vue3 Quick Start
This topic walks you through setting up Wijmo with a Vue3 project. For demonstration purpose, we are using Wijmo's FlexGrid component and see how to create a Vue 3 DataGrid, utilizing **Composition API** (Custom component level registration method)**.**
> type=note
> Note that the topic assumes that the user understands how to create a Vue3 application using Vue CLI. For more information, see [Vue CLI](https://cli.vuejs.org/#getting-started).
The QuickStart is categorized into the following sections:
1. Install Wijmo Packages
2. Import Wijmo Components and Data
3. Adding Vue Datagrid Markup
### Install Wijmo Packages
1. Open your Vue application and switch to the application folder where you want to install the package.
2. Install Wijmo's Vue package using npm by running the following command:
```auto
npm install @mescius/wijmo.vue2.all
```
### Import Wijmo Modules and Data
1. Import the required Wijmo Component and directive and register them at Component level. For our FlexGrid example, we will add a *wj-flex-grid* component to the App.vue file’s template section by including the code in the following files:
1. **App.Vue file**
```auto
```
2. **Main.js file**
```auto
import '@mescius/wijmo.styles/wijmo.css';
import { createApp } from "vue";
import App from "./App.vue";
import { registerGrid } from "@mescius/wijmo.vue2.grid";
const app = createApp(App);
registerGrid(app);
app.mount('#app');
```
2. In the **main.js** file, add a CSS import statement at the top of the file to import the Wijmo CSS.
```auto
import '@mescius/wijmo.styles/wijmo.css';
```
### Adding Vue Datagrid Markup
The WjFlexGrid component is written as wj-flex-grid, as for HTML the lower-case-dash syntax is used.
```auto
```
**Run the application**
You have successfully integrated Wijmo FlexGrid into your Vue application. To explore additional Wijmo components like charts, input controls, and pivot grids, see *[Wijmo Demos](https://developer.mescius.com/wijmo/demos/)*.