## Admin portal (self-service) quickstart

Prerequisite: Complete Frontegg authentication integration.
If you haven't integrated Frontegg login into your application, please integrate it before moving to the self-service portal integration.

### Embedded self-service portal

Bind an app link to open the self-service portal:


```typescript
<template>
  <div id="app" v-if="fronteggLoaded">
    <img alt="Vue logo" src="./assets/logo.png" />
    <p>
      Logged in as
      {{ this.authState.user ? this.authState.user.email : "Not logged in" }}
    </p>
    <button v-on:click="showAdminPortal">Settings</button>
  </div>
</template>

<script>
import { AdminPortal } from "@frontegg/vue";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  data() {
    return {
      ...this.mapAuthState(),
    };
  },
  methods: {
    showAdminPortal() {
      AdminPortal.show();
    },
  },
};
</script>
```

#### Hosted self-service portal

When using more than one application, it is recommended using the Hosted self-service portal which supports displaying all the relevant sections in an application context. For example, in the **Profile** section, the user will be able to see all the applications that their account is assigned to.

br
Prerequisites
The minimal SDK version that is required for this quickstart is @frontegg/vue@3.0.26

br

```typescript
<template>
  <div id="app" v-if="fronteggLoaded">
    <img alt="Vue logo" src="./assets/logo.png" />
    <p>
      Logged in as
      {{ this.authState.user ? this.authState.user.email : "Not logged in" }}
    </p>
    <button v-on:click="openHostedAdminPortal">Settings</button>
  </div>
</template>

<script>
import { AdminPortal } from "@frontegg/vue";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  data() {
    return {
      ...this.mapAuthState(),
    };
  },
  methods: {
     openHostedAdminPortal {
      AdminPortal.openHosted();
    },
  },
};
</script>
```

br
You are good to go! The self-service portal should now be shown and you are on the part for a full self-served experience on your product.