# Vue Components
Learn about Wijmo's Vue Components in this documentation topic
## Content
Wijmo Vue components are available as separate npm packages. Name of each npm package is based on the corresponding control name in the core library with "vue2" included in the package name. For example, "wijmo.vue2.grid" provides Vue components for "wijmo.grid." You can install the components individually or all of them at once with "wijmo.vue2.all."
```auto
npm install @mescius/wijmo.vue2.all
```
For more information on Wijmo npm packages, see [Reference Wijmo Packages](/wijmo/docs/GettingStarted/Referencing-Wijmo-NPM)***.***
In a Vue project, there are two ways to use the Wijmo components:
* Custom Component-Level Registration
* Auxiliary Register Functions
## Custom component level registration
The simplest way to register Wijmo components and directives is at the custom component level. You can either use the **Composition API** or the **Options API** to integrate Wijmo components within Vue applications. Codes below show how to import the Wijmo component and register them at the Component level using Composition API and Options API.
* Code for Composition API
```auto
```
* Options API
```auto
```
## Auxiliary register functions
The auxiliary register functions allow you to register all components and directives from a specific Wijmo module at the application level. This approach is particularly useful when multiple components need to be registered at once, ensuring a streamlined and efficient setup. The code below adds a *wj-flex-grid* component to the App.vue file’s template section:
* **main.js**
```auto
import {createApp } from 'vue'
import App from './App.vue'
import '@mescius/wijmo.styles/wijmo.css';
import{registerGrid} from "@mescius/wijmo.vue2.grid"
let app = createApp(App);
registerGrid(app);
app.mount('#app')
```
* **app.vue**
```auto
```
You only need to import registerModuleName from Vue modules once, preferably in the root module of your Single Page Application. For instance, the registerInput method is imported from the wijmo.vue2.input module and called with the app instance, which represents the application.
> type=note
> ***Note:*** *Wijmo Vue components are designed for use in template markup.*
To create a Wijmo control in code, use the corresponding Wijmo control from the core module instead. That is, use "wijmo.grid" to create the FlexGrid control in code and not "wijmo.Vue2.grid".
```auto
import { FlexGrid } from '@mescius/wijmo.grid';
let flex = new FlexGrid('#host_element');
```
## Adding Wijmo CSSWijmo ships **@mescius/wijmo.styles** npm package which contains the following two files:
* Wijmo.css - includes styles for all controls
* wijmo-core.css - truncated version of wijmo.css. It excludes styles for Enterprise controls.You can add styles to your Vue application by referencing in one of the following places:
1. **Root Vue component app.vue:** Add the following import statement to import styles inside the **\** tag
```auto
import '@mescius/wijmo.styles/wijmo.css';
```
2. **Main.JS** – In case of using **Composition API** with global registration\*\*,\*\* add the following code at the top of the js file:
```auto
import '@mescius/wijmo.styles/wijmo.css';
```
## Vue Markup Syntax
Wijmo Vue components use consistent naming conventions in template markup. The HTML element and attribute names used for components can be easily inferred from component classes and member names by using the following simple rules:
* Vue3 does not have any specific convention for naming of attributes, properties, and events. That is, you can use camelCase as well as lower-case-dash to specify Wijmo component properties and events.
* The HTML element name representing a Wijmo **component** is specified using lower-case-dash syntax.For example, write **WjInputNumber** component as **wj-input-number.**
```auto
```
* For writing the component markup in camelCase, import the Component from the module and specify in the component. For **Auxiliary registration method,** specify each component that you plan to use in the project
* **Main.JS**
```auto
import {WjInputNumber,
WjInputColor} from "@mescius/wijmo.vue2.input"
let app = createApp(App);
// register the Wijmo
Components
app.component('WjInputNumber',WjInputNumber).component('WjInputColor',WjInputColor);
app.mount('#app');`
```
* **app.vue**
```auto
```
* In case of one-way binding, prepend the names with the **v-bind:** directive (or its **':'** shorthand), except while binding a string type property to a string constant. One-way binding is used to set the property’s value or event handler.
* For the two-way binding between form inputs and component data, use the v-model directive. When you use v-model, Vue automatically handles updating the data property and the input element's value.
```auto
//event binding
```
### Event handlers
Wijmo event handlers are defined as functions with two parameters: sender and event argument. While binding to a component event, you must define an event handler method according to the API type used by your Vue component.
* **Options API**
```auto
```
* **Composition API**
```auto
```
### The "initialized" Event
All Wijmo Vue components have an initialized event, triggered after the control is added to the page and has been initialized. You can use this event for extra setup beyond setting properties in markup. The signature of the handler function is the same as any other Wijmo event handlers.
* **Options API**
```auto
```
* **Composition API**
```auto
```