Prebuilt Vue.js forms

Additional resources

@userfront/toolkit on npmVue example docsVue quickstart guideCustom 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.

#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.

#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 nameRedirect path name
Login formAfter-logout path
Password reset formPassword reset path


Preview

#Signup form

The signup form will:

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

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.

#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.

#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.