Build your own sign-in-or-up page for your Nuxt app with Clerk
This guide shows you how to use the <SignIn /> component to build a custom page that allows users to sign in or sign up within a single flow.
To set up separate sign-in and sign-up pages, follow this guide, and then follow the custom sign-up page guide.
Build a sign-in-or-up page
The following example demonstrates how to render the <SignIn /> component on a dedicated page using a Nuxt catch-all route.
<template>
<SignIn />
</template>Configure your sign-in-or-up page
Set the CLERK_SIGN_IN_URL environment variable to tell Clerk where the <SignIn /> component is being hosted.
There are other environment variables that you can set to customize Clerk's redirect behavior, such as CLERK_SIGN_IN_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_IN_URL=/sign-inVisit your new page
Run your project with the following command:
npm run devpnpm run devyarn devbun run devVisit your new custom page locally at localhost:3000/sign-in.
Next steps
Learn more about Clerk components, how to use them to create custom pages, and how to use Clerk's client-side helpers using the following guides.
Create a custom sign-up page
Learn how to add a custom sign-up page to your Nuxt app with Clerk's components.
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.
Feedback
Last updated on