Vue and Nuxt

@becklinks/vue puts Beck Links into a Vue 3 app (Vue 3.3 or newer, also Nuxt): a plugin, a composable that creates links, and a component for the open-in-app banner. It is a thin layer over @becklinks/web, which holds the rules for keys, allowed websites and privacy, so read that page once.

Get it: @becklinks/vue on npm

Install and set up#

npm install @becklinks/vue

Add your site under Web origins in the environment settings first (how), then install the plugin:

// main.ts
import { createApp } from 'vue';
import { BeckLinksPlugin } from '@becklinks/vue';
import App from './App.vue';

createApp(App).use(BeckLinksPlugin, { publishableKey: 'pk_live_…' }).mount('#app');

The plugin takes the same options as createBeckLinks. In Nuxt, install it from a client plugin:

// plugins/becklinks.client.ts
import { BeckLinksPlugin } from '@becklinks/vue';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(BeckLinksPlugin, {
    publishableKey: useRuntimeConfig().public.becklinksKey,
  });
});

The banner component#

<script setup lang="ts">
import { SmartBanner } from '@becklinks/vue';
</script>

<template>
  <SmartBanner
    url="https://acme.becklinks.com/summer"
    title="Open in the Acme app"
    description="Faster checkout and your saved items."
    @open="track('open-app')"
  />
</template>

<SmartBanner> renders nothing in your template. It shows the banner on phones after the component is mounted in the browser, so server rendering is untouched, and it removes the banner when the component is unmounted or a prop changes. Props are the options of showBanner; it emits open and dismiss.

Create links#

<script setup lang="ts">
import { useCreateLink } from '@becklinks/vue';

const props = defineProps<{ productId: string }>();
const { createLink, isPending, error } = useCreateLink();

async function share() {
  try {
    const link = await createLink({ deepLinkPath: `/product/${props.productId}` });
    await navigator.share({ url: link.url });
  } catch {
    // `error` already holds the BeckLinksError to show.
  }
}
</script>

<template>
  <button type="button" :disabled="isPending" @click="share">Share</button>
  <p v-if="error" role="alert">{{ error.message }}</p>
</template>

useCreateLink() returns createLink, the refs link and error, the computed isPending and reset. createLink resolves with the link and rejects with a BeckLinksError; only the newest call updates the refs. useBeckLinks() gives you the client itself and throws a clear error when the plugin is not installed.

Verify it works#

1. Use a pk_test_… key and your dev origin (for example http://localhost:5173) under Web origins of the Test environment.
2. In the browser's device mode set to a phone, the banner appears; the close button removes it.
3. Press the share button: a new link shows up in the dashboard under Links on your -test host, tagged sdk.
4. A 403 origin_not_allowed means the origin is not listed; see Web SDK errors.