Build a User Management App with Vue 3

<$Partial path="uiLibCta.mdx" /> <$Partial path="quickstart_intro.mdx" />

If you get stuck while working through this guide, refer to the full example on GitHub.

<$Partial path="project_setup.mdx" variables={{ "framework": "vuejs", "tab": "frameworks" }} />

Building the app

Start building the Vue 3 app from scratch.

Initialize a Vue 3 app

This guide uses Vite with Vue 3 Template to initialize an app called supabase-vue-3:

# npm 6.x
npm create vite@latest supabase-vue-3 --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest supabase-vue-3 -- --template vue

cd supabase-vue-3

Then install the only additional dependency: supabase-js

npm install @supabase/supabase-js

And finally save the environment variables in a .env file, you need the API URL and the key that you copied earlier.

<$CodeTabs>

VITE_SUPABASE_URL=YOUR_SUPABASE_URL
VITE_SUPABASE_PUBLISHABLE_KEY=YOUR_SUPABASE_PUBLISHABLE_KEY

</$CodeTabs>

With the API credentials in place, create an src/supabase.js helper file to initialize the Supabase client. These variables are exposed on the browser, and that's fine since you have Row Level Security enabled on the Database.

<$CodeSample path="/user-management/vue3-user-management/src/supabase.js" lines={[[1, -1]]} meta="name=src/supabase.js" />

Optionally, update src/style.css to style the app.

Set up a login component

Set up an src/components/Auth.vue component to manage to add Magic Links as an option, so users can sign in with their email without using passwords.

<$CodeSample path="/user-management/vue3-user-management/src/components/Auth.vue" lines={[[1, -1]]} meta="name=src/components/Auth.vue" />

Account page

After a user signs in, allow them to edit their profile details and manage their account. Create a new src/components/Account.vue component to handle this.

<$CodeSample path="/user-management/vue3-user-management/src/components/Account.vue" lines={[[1, -1]]} meta="name=src/components/Account.vue" />

Launch!

With all the components in place, update App.vue:

<$CodeSample path="/user-management/vue3-user-management/src/App.vue" lines={[[1, -1]]} meta="name=src/App.vue" />

Once that's done, run this in a terminal window:

npm run dev

And then open the browser to localhost:5173 and you should see the completed app.

Bonus: Profile photos

Every Supabase project is configured with Storage for managing large files like photos and videos.

Create an upload widget

Create a new src/components/Avatar.vue component that allows users to upload profile photos:

<$CodeSample path="/user-management/vue3-user-management/src/components/Avatar.vue" lines={[[1, -1]]} meta="name=src/components/Avatar.vue" />

Add the new widget

Finally, add the widget to the Account page.

The Account.vue component shown earlier already includes the Avatar component.

At this stage you have a fully functional application!