---
meta:
    title: Vue (version 2)
    description: Tips for using Shoelace in your Vue 2 app.
---

# Vue (version 2)

Vue [plays nice](https://custom-elements-everywhere.com/#vue) with custom elements, so you can use Shoelace in your Vue apps with ease.

:::tip
These instructions are for Vue 2. If you're using Vue 3 or above, please see the [Vue 3 instructions](/frameworks/vue).
:::

## Installation

To add Shoelace to your Vue app, install the package from npm.

```bash
npm install @nasa-terra/components
```

Next, [include a theme](/getting-started/themes) and set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets. In this example, we'll import the light theme and use the CDN as a base path.

```jsx
import '@nasa-terra/components/%NPMDIR%/themes/light.css'
import { setBasePath } from '@nasa-terra/components/%NPMDIR%/utilities/base-path'

setBasePath('https://cdn.jsdelivr.net/npm/@nasa-terra/components@%VERSION%/%CDNDIR%/')
```

:::tip
If you'd rather not use the CDN for assets, you can create a build task that copies `node_modules/@nasa-terra/components/dist/assets` into a public folder in your app. Then you can point the base path to that folder instead.
:::

## Configuration

You'll need to tell Vue to ignore Shoelace components. This is pretty easy because they all start with `terra-`.

```js
import Vue from 'vue'
import App from './App.vue'

Vue.config.ignoredElements = [/terra-/]

const app = new Vue({
    render: h => h(App),
})

app.$mount('#app')
```

Now you can start using Shoelace components in your app!

## Usage

### Binding Complex Data

When binding complex data such as objects and arrays, use the `.prop` modifier to make Vue bind them as a property instead of an attribute.

```html
<sl-color-picker :swatches.prop="mySwatches" />
```

### Two-way Binding

One caveat is there's currently [no support for v-model on custom elements](https://github.com/vuejs/vue/issues/7830), but you can still achieve two-way binding manually.

```html
<!-- This doesn't work -->
<sl-input v-model="name"></sl-input>
<!-- This works, but it's a bit longer -->
<sl-input :value="name" @input="name = $event.target.value"></sl-input>
```

If that's too verbose for your liking, you can use a custom directive instead. [This utility](https://www.npmjs.com/package/@shoelace-style/vue-terra-model) adds a custom directive that will work just like `v-model` but for Shoelace components. To install it, use this command.

```bash
npm install @shoelace-style/vue-terra-model@1
```

Next, import the directive and enable it like this.

```js
import Vue from 'vue'
import ShoelaceModelDirective from '@shoelace-style/vue-terra-model'
import App from './App.vue'

Vue.use(ShoelaceModelDirective)
Vue.config.ignoredElements = [/terra-/]

const app = new Vue({
    render: h => h(App),
})

app.$mount('#app')
```

Now you can use the `v-terra-model` directive to keep your data in sync!

```html
<sl-input v-terra-model="name"></sl-input>
```

:::tip
Are you using Shoelace with Vue? [Help us improve this page!](https://github.com/nasa/terra-ui-components/blob/next/docs/frameworks/vue-2.md)
:::
