Guest mode

Prebuilt Vue.js forms

Additional resources

@userfront/toolkit on npm Vue example docs Vue quickstart guide Custom Vue forms

#Setup

Before installing any forms complete the following steps:

#1. Install the Userfront Vue.js library

To add the form to your Vue project, first install @userfront/toolkit with npm.

shell

npm install @userfront/toolkit

#2. Initialize Userfront UI Toolkit

Initialize the Userfront UI Toolkit for Vue with your workspace ID using Userfront.init().

You can do this in the main file (as shown here) or in a component file. If you do this in the main file, you only need to do it once.

// main.js

import Vue from "vue";
import Userfront from "@userfront/toolkit/vue";
import App from "./App.vue";

Userfront.init("demo1234");

new Vue({
  render: (h) => h(App)
}).$mount("#app");

#Form locations

You can add as many forms as you would like across your application.

To have a working application ensure you have the following forms at their associated paths:

Form name	Redirect path name
Login form	After-logout path
Password reset form	Password reset path

Preview

Sign up

Secured by Userfront

#Signup form

The signup form will:

Register a user to your application
Provide the user with access and id tokens
Redirect to your After-signup path
Send a welcome email
Send a webhook with user information (Docs › Connectivity › Webhooks)

Install by copying the code below and pasting it in your application.

html

<!-- App.vue -->

<template>
  <div id="app">
    <signup-form />
  </div>
</template>

<script></script>
<style></style>

See a demo on CodeSandbox

#Login form

The login form will:

Log in a user
Provide the user with access and id tokens
Redirect to your After-login path
Update the user's lastActiveAt attribute

To handle login links correctly put a login form at your After-logout path.

Install by copying the code below and pasting it in your application.

html

<!-- App.vue -->

<template>
  <div id="app">
    <login-form />
  </div>
</template>

<script></script>
<style></style>

#Password reset form

The password reset form will:

Send a password reset link to the user's email
Reset a password

To handle password resets correctly put a password reset form at your Password reset path.

Install by copying the code below and pasting it in your application.

html

<!-- App.vue -->

<template>
  <div id="app">
    <password-reset-form />
  </div>
</template>

<script></script>
<style></style>

#Logout button

The logout button will:

Show a disabled state when not logged in
Clear the user's tokens
Redirect after logout to your After-logout path

Install by copying the code below and pasting it in your application.

html

<!-- App.vue -->

<template>
  <div id="app">
    <logout-button />
  </div>
</template>

<script></script>
<style></style>