Build your own sign-up page for your Nuxt app with Clerk
By default, the <SignIn /> component handles signing in and signing up, but if you'd like to have a dedicated sign-up page, this guide shows you how to use the <SignUp /> component to build a custom sign-up page.
To set up a single sign-in-or-up page, follow the custom sign-in-or-up page guide.
Build a sign-up page
The following example demonstrates how to render the <SignUp /> component on a dedicated sign-up page using a Nuxt catch-all route.
<template>
<SignUp />
</template>Configure your sign-up page
- Set the
CLERK_SIGN_UP_URLenvironment variable to tell Clerk where the<SignUp />component is being hosted.
There are other environment variables that you can set to customize Clerk's redirect behavior, such as CLERK_SIGN_UP_FORCE_REDIRECT_URL. Learn more about these environment variables and how to customize Clerk's redirect behavior in the dedicated guide.
NUXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-upVisit your new pages
Run your project with the following command:
npm run devpnpm run devyarn devbun run devVisit your new custom page locally at localhost:3000/sign-up.
Next steps
Learn more about Clerk components, how to customize them, and how to use Clerk's client-side helpers using the following guides.
Read user data
Learn how to use Clerk's composables and helpers to read user data in your Nuxt app.
Client-side helpers
Learn more about Clerk's client-side helpers and how to use them.
Prebuilt components
Learn how to quickly add authentication to your app using Clerk's suite of components.
Customization & localization
Learn how to customize and localize Clerk components.
Feedback
Last updated on