Vue.JS integration

⚡ Before you start: ⚡

📘

Getting Your Frontegg Subdomain

Frontegg creates a unique subdomain for every workspace created on the account. In order to retrieve the subdomain that will act as the baseUrl in the integration, navigate to your workspace administration menu, and copy the workspace domain.
You will need it on this guide.

STEP 1: Create a New Vue application

📘

If you have an existing app, skip this step.

To create a new app, use the following script.

vue create my-project
cd my-project

STEP 2: Install Frontegg Libraries

Run the following command to Install frontegg Vue.JS library.

npm install @frontegg/vue

yarn add @frontegg/vue

STEP 3: Configuration

Add Frontegg to the main application

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import { Frontegg } from '@frontegg/vue';

Vue.use(VueRouter)
const router = new VueRouter({
  mode: 'history',
});


Vue.use(Frontegg, {
  contextOptions: {
    baseUrl: 'https://[YOUR_SUBDOMAIN].frontegg.com',
  },
  // Replace this with your app logo 👇
  headerImage: 'https://assets.frontegg.com/public-frontegg-assets/acme-logo.svg',
  router,
});

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

And wrap your application on the fronteggLoaded attribute to make sure you have the right context

<template>
  <div id="app" v-if="fronteggLoaded">
    <img alt="Vue logo" src="./assets/logo.png" />
  </div>
</template>

STEP 4: Getting the user context

Frontegg exposes the user context and the authentication state via a global set of mixins and state mappers. You can access the authentication state via the mappedAuthState as in the following sample:

<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>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      ...this.mapAuthState(),
    },
  },
};
</script>

STEP 5: Run the app, signup & login

We are all set. Let's run the application and see Frontegg in action.

npm run serve

yarn run serve

Great, Frontegg is now integrated with your app!

Login and logout routes have been added to your app:

Signup screen will be at http://localhost:8080/account/sign-up

Login screen will be at http://localhost:8080/account/login

If you are already logged in, go to http://localhost:8080/account/logout and log out.

Give it a try now!
Open http://localhost:8080/account/sign-up and sign up with your first user.

Admin Portal Integration

For admin portal integration we will import the openAdminPortal method from the @frontegg/vue package and use it when clicking on the relevant button

<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">Open admin portal</button>
  </div>
</template>

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

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

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