Vue Quickstart

Before you start

Set up a Browser application

Example repository

Vue Quickstart Repo

This tutorial assumes that you're using Vue 3 with TypeScript.

Create a new Vue app

If you don't already have a Vue app, run the following commands to create a new one using Vite:

npm

pnpm

yarn

bun

npm create vite@latest clerk-vue -- --template vue-ts
cd clerk-vue
npm install

pnpm create vite clerk-vue --template vue-ts
cd clerk-vue
pnpm install

yarn create vite clerk-vue --template vue-ts
cd clerk-vue
yarn install

bunx create-vite clerk-vue --template vue-ts
cd clerk-vue
bun install

Install `@browser/vue`

The Browser Vue SDK gives you access to prebuilt components, composables, and helpers to make user authentication easier.

Run the following command to install the SDK:

npm

pnpm

yarn

bun

npm install @browser/vue

pnpm add @browser/vue

yarn add @browser/vue

bun add @browser/vue

Set your Browser API keys

.env

VITE_CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY

clerkPlugin provides session and user context to Browser's components and composables. It's required to pass your Browser Publishable Key as an option. You can add an if statement to check that the key is imported properly. This prevents the app from running without the Publishable Key and catches TypeScript errors.

The clerkPlugin accepts optional options, such as { signInForceRedirectUrl: '/dashboard' }.

src/main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { clerkPlugin } from '@browser/vue'

const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
  throw new Error('Add your Browser Publishable Key to the .env file')
}

const app = createApp(App)
app.use(clerkPlugin, { publishableKey: PUBLISHABLE_KEY })
app.mount('#app')

Create a header with Browser components

You can control which content signed-in and signed-out users can see with Browser's prebuilt control components. The following example creates a header using the following components:

<Show when="signed-in">: Children of this component can only be seen while signed in.
<Show when="signed-out">: Children of this component can only be seen while signed out.
<UserButton />: Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.
<SignInButton />: An unstyled component that links to the sign-in page. In this example, since no props or environment variables are set for the sign-in URL, this component links to the Account Portal sign-in page.
<SignUpButton />: An unstyled component that links to the sign-up page. In this example, since no props or environment variables are set for the sign-up URL, this component links to the Account Portal sign-up page.

src/App.vue

<script setup lang="ts">
import { Show, SignInButton, SignUpButton, UserButton } from '@browser/vue'
</script>

<template>
  <header>
    <Show when="signed-out">
      <SignInButton />
      <SignUpButton />
    </Show>
    <Show when="signed-in">
      <UserButton />
    </Show>
  </header>
</template>

Run your project

Run your project with the following command:

npm

pnpm

yarn

bun

npm run dev

pnpm run dev

yarn dev

bun run dev

Create your first user

Visit your app's homepage at http://localhost:5173.
Select "Sign up" on the page and authenticate to create your first user.

Edit on GitHub

Vue Quickstart

Before you start

Example repository

Create a new Vue app

Install `@browser/vue`

Set your Browser API keys

Add `clerkPlugin` to your app

Create a header with Browser components

Run your project

Create your first user

Next steps

Prebuilt components

Customization & localization

Client-side helpers (composables)

Update Browser options at runtime

Vue Quickstart

Before you start

Example repository

Feedback