---
id: vue
title: Vue 3
description: Consume the JustiFi web components inside modern Vue applications.
---
import { CodeBlock, getWebcomponentsVersion } from '../helpers';
Vue treats the JustiFi custom elements like native HTML tags. Load the script, import what you need, and wire up refs/events.
Examples in this documentation use the npm package `@justifi/webcomponents` at version {getWebcomponentsVersion()}.
## Integration steps
### Load the components
{`
`}
Or install locally and import the desired module:
```bash
npm install --save @justifi/webcomponents
```
```ts
import '@justifi/webcomponents/dist/module/justifi-checkout.js';
```
### Use inside templates
```html
```
## Event handling
Leverage Vue's `@event-name` syntax for the custom events we emit.
```html
```
## Calling methods
Grab a ref to the element and call the public APIs directly.
```html
```