---
title: "Introducing the Brand-New Auth0 Vue SDK"
description: "Learn about the essential features of the Auth0 Vue SDK and how it helps developers secure Vue 3 apps."
authors:
  - name: "Steve Hobbs"
    url: "https://auth0.com/blog/authors/steve-hobbs/"
date: "Mar 17, 2022"
category: "Developers,Product,SDK"
tags: ["vue", "sdk", "auth0"]
url: "https://auth0.com/blog/introducing-auth0-vue-sdk/"
---

# Introducing the Brand-New Auth0 Vue SDK

Today, we are announcing the release of the [Auth0 Vue SDK](https://www.npmjs.com/package/@auth0/auth0-vue), a new SDK that makes it easy to integrate Auth0 with any Vue 3 apps. This new SDK only supports Vue 3 apps. To secure Vue 2 (Vue.js) apps, developers can use the [Auth0 SPA SDK](https://auth0.com/docs/libraries/auth0-single-page-app-sdk) instead.

[Vue.js](https://vuejs.org/) is a progressive JavaScript framework designed for building user interfaces using HTML, JavaScript, and CSS. It makes building apps for the modern web easy while providing developers with a lot of flexibility.

The Auth0 Developer Experience team designed the new [Auth0 Vue SDK](https://github.com/auth0/auth0-vue) to follow idiomatic patterns that are familiar to Vue developers. The Vue SDK abstracts the features of the [Auth0 SPA SDK](https://github.com/auth0/auth0-spa-js) into a Vue plugin that developers can consume in Vue 3 components either using the Options API or the new Composition API.

Starting today, Vue developers can:

- [Install the `auth0-vue` package from `npm`](https://www.npmjs.com/package/@auth0/auth0-vue)
- [View the Auth0 Vue SDK source code on GitHub](https://github.com/auth0/auth0-vue)
- [Read and follow the quickstart](https://auth0.com/docs/quickstart/spa/vuejs)
- [Grab the sample apps](https://github.com/auth0-samples/auth0-vue-samples)

## Auth0 Vue SDK Features

This new Auth0 Vue SDK arrives at a great time as Evan You announced on February 7th, 2020, that [Vue 3 is now the default version of Vue](https://blog.vuejs.org/posts/vue-3-as-the-new-default.html). As such, the Auth0 Vue SDK fully supports Vue 3 along with the Options API and the Composition API. The SDK also provides full TypeScript support.

Here’s a breakdown of the essential features that developers can enjoy when using the new Auth0 Vue SDK:

- Quick implementation of login and logout functionality into Vue 3 apps using the [Auth0 Universal Login](https://auth0.com/docs/authenticate/login/auth0-universal-login) page.
- Easy access to profile information about the logged-in user.
- Availability of access tokens to retrieve protected user data from an external API.
- Simple mechanism to protect Vue 3 routes using a router guard from the SDK with the [Vue Router](https://next.router.vuejs.org/).

## Vue 2 Auth0 SDK Support

The new Auth0 Vue SDK only works with Vue 3. If you’re working on an app that uses Vue 2, you can use the [Auth0 SPA SDK](https://auth0.com/docs/libraries/auth0-single-page-app-sdk) instead to implement authentication in your application.

To see the integration of Vue.js (Vue 2) with the Auth0 SPA SDK in action, take a look at the ["Vue.js/JavaScript Authentication" code sample](https://auth0.com/developers/hub/code-samples/spa/vue-javascript/basic-authentication) from the 
 [Auth0 Developer Hub](https://auth0.com/developers/hub/code-samples/spa/vue-javascript)!

## Integrate Auth0 Vue into Your Vue 3 Application

You can quickly integrate the Auth0 Vue SDK with your Vue 3 application by following a few steps.

If you don’t already have an Auth0 application to work with, create a Single Page Application in your [Auth0 Dashboard](https://manage.auth0.com/) and configure the following URLs for your application under **Application URLs**:

- **Allowed Callback URLs**: `http://localhost:8080`
- **Allowed Logout URLs**: `http://localhost:8080`
- **Allowed Web Origins**: `http://localhost:8080`

You can replace `http://localhost:8080` with the root URL of your application.

Take note of the **Client ID** and **Domain**, as you will need those in the next step.

Install the Auth0 Vue SDK from npm:

```bash
npm install @auth0/auth0-vue
```

Import the Vue plugin and use the `createAuth0` function to register it with your Vue 3 app:

```javascript
import { createAuth0 } from '@auth0/auth0-vue';

const app = createApp(App);

app.use(
  createAuth0({
    domain: '<YOUR AUTH0 DOMAIN>',
    client_id: '<YOUR AUTH0 CLIENT ID>',
    redirect_uri: window.location.origin,
  }),
);

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

Replace the `<YOUR AUTH0 DOMAIN>` and `<YOUR AUTH0 CLIENT ID>` placeholders with the actual **Client ID** and **Domain** values you got from the Auth0 dashboard.
Create a `LoginButton.vue` component and use the Auth0 Vue SDK to log the user in. Here’s an example using a [Single File Component](https://vuejs.org/guide/scaling-up/sfc.html) and the Composition API:

```js
// LoginButton.vue
<template>
  <button @click="login">Log in</button>
</template>

<script>
import { useAuth0 } from "@auth0/auth0-vue";

export default {
  setup() {
    const { loginWithRedirect } = useAuth0();

    return {
      login() {
        loginWithRedirect();
      },
    };
  },
};
</script>
```

If you prefer to use the Options API, the same thing can be achieved using the `$auth0` accessor:

```js
<template>
  <button @click="login">Log in</button>
</template>

<script>
export default {
  methods: {
    login() {
      this.$auth0.loginWithRedirect();
    },
  },
};
</script>
```

Add a `LoginComponent` to your app, start it up, and click the button to see the magic of authentication!

Please check out [the Quickstart](https://auth0.com/docs/quickstart/spa/vuejs) for more things you can do with the SDK and the [repository on GitHub](http://github.com/auth0/auth0-vue) for a more detailed description of the setup and usage of the SDK.

Enjoy!