# Vue (/docs/getting-started/vue)

For a complete overview of features in the [Vue SDK](/docs/sdk/vue) check out the docs regarding those. For getting started read on. It works the same in Vue 3 and Nuxt.

## Install [#install]

```bash
npm i @obelism/improve-sdk @obelism/improve-sdk-vue
```

## Setup [#setup]

### Configure the client [#configure-the-client]

First let's generate our [Vue composables](/docs/sdk/vue#api) and export them so we can import them in multiple places:

```ts title="improve.ts"
import { generateImproveProvider } from '@obelism/improve-sdk-vue'

export const { ImproveProvider, useTestValue, usePostAnalytic, useImproveStatus } =
	generateImproveProvider({
		organizationId: 'org_…',
		environment: 'production',
	})
```

The first one we need is the provider that sits around your app (`app.vue` in Nuxt):

```vue title="App.vue"
<script setup lang="ts">
import { ImproveProvider } from './improve'
</script>

<template>
	<ImproveProvider>
		<Menu />
		<RouterView />
		<Footer />
	</ImproveProvider>
</template>
```

Now we can start using the composables in our application.

### Consume the test value [#consume-the-test-value]

Let's say we have the following Menu component:

```vue title="Menu.vue"
<template>
	<menu>
		<a href="/"><Logo /></a>

		<nav>
			<a href="/">Home</a>
			<a href="/products">All products</a>
			<a href="/about-us">About us</a>
			<a href="/account">Account</a>
		</nav>
	</menu>
</template>
```

And we want to know if people will find their way to the homepage without having the dedicated Home link. For this we can run an A/B test like so:

```vue title="Menu.vue"
<script setup lang="ts">
import { useTestValue } from './improve'

const noHomeLink = useTestValue('no-home-link', 'control')
</script>

<template>
	<menu>
		<a href="/"><Logo /></a>

		<nav>
			<a v-if="noHomeLink === 'control'" href="/">Home</a>
			<a href="/products">All products</a>
			<a href="/about-us">About us</a>
			<a href="/account">Account</a>
		</nav>
	</menu>
</template>
```

Nice, now if we've set up the A/B test as 50/50, half of the visitors no longer see the homepage link in the navigation. But we have no idea yet if people still get to the homepage.

### Keep track of visitors [#keep-track-of-visitors]

The next step is to send events to Improve on what the visitor is doing. Let's add two events:

- When the visitor sees the menu we mark the start of the A/B test: `menu_view`
- When the visitor clicks a homepage link we mark the end of the A/B test: `home_link_click`

Let's also add a scope to the click event, so we can see the split between clicks on the logo and the navigation.

```vue title="Menu.vue"
<script setup lang="ts">
import { watch } from 'vue'

import { useImproveStatus, usePostAnalytic, useTestValue } from './improve'

const postAnalytic = usePostAnalytic()
const noHomeLink = useTestValue('no-home-link', 'control')
const status = useImproveStatus()

// Once the SDK is set up: before that nothing is sent.
watch(
	status,
	(current) => {
		if (current === 'setup') postAnalytic('menu_view', 'menu')
	},
	{ immediate: true },
)
</script>

<template>
	<menu>
		<a href="/" @click="postAnalytic('home_link_click', 'logo')"><Logo /></a>

		<nav>
			<a
				v-if="noHomeLink === 'control'"
				href="/"
				@click="postAnalytic('home_link_click', 'nav')"
			>
				Home
			</a>
			<a href="/products">All products</a>
			<a href="/about-us">About us</a>
			<a href="/account">Account</a>
		</nav>
	</menu>
</template>
```

`usePostAnalytic()` takes no arguments and returns a function you call with an event name and a required `scope`: events are test-independent and attributed server-side. What ties this component's events to the test is reading `noHomeLink`: reading a variant emits the **exposure** the server joins events against. Audience-excluded and holdout visitors aren't exposed, so their events aren't counted toward the test.

<Callout type="info">
	Recommended default: alongside any custom events, fire a `page_view` once per
	page load with the current path as its scope (`postAnalytic('page_view',
	route.path)`). See [Track page views like Google
	Analytics](/docs/guides/events#default-track-page-views-like-google-analytics);
	it's the default start event for tests and powers the Events dashboard's
	Popular pages report.
</Callout>

### Done! [#done]

Now it's time to publish your first A/B test and measure what your visitors are doing! With Nuxt, the [Nuxt SDK](/docs/getting-started/nuxt) can also decide a test on the server, before the first paint.