---
title: 'Build a User Management App with Ionic Vue'
description: 'Learn how to use Supabase in your Ionic Vue App.'
---

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

![Supabase User Management example](/docs/img/ionic-demos/ionic-angular-account.png)

<Admonition type="note">

If you get stuck while working through this guide, refer to the [full example on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/ionic-vue-user-management).

</Admonition>

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

## Building the app

Start by building the Vue app from scratch.

### Initialize an Ionic Vue app

Use the [Ionic CLI](https://ionicframework.com/docs/cli) to initialize an app called `supabase-ionic-vue`:

```bash
npm install -g @ionic/cli
ionic start supabase-ionic-vue blank --type vue
cd supabase-ionic-vue
```

Install the only additional dependency: [supabase-js](https://github.com/supabase/supabase-js)

```bash
npm install @supabase/supabase-js
```

Save the environment variables in a `.env` file, including the API URL and key that you copied [earlier](#get-api-details).

<$CodeTabs>

```bash name=.env
VUE_APP_SUPABASE_URL=YOUR_SUPABASE_URL
VUE_APP_SUPABASE_KEY=YOUR_SUPABASE_KEY
```

</$CodeTabs>

With the API credentials in place, create a helper file to initialize the Supabase client. These variables will be exposed on the browser, and that's fine since Supabase enables [Row Level Security](/docs/guides/auth#row-level-security) on Databases by default.

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

### Set up a login route

Create a Vue component to manage logins and sign ups that uses Magic Links, so users can sign in with their email without using passwords.

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

### Account page

After a user has signed in, let them edit their profile details and manage their account with a new component called `Account.vue`.

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

### Launch!

With all the components in place, update `App.vue` and the app routes:

<$CodeSample
path="/user-management/ionic-vue-user-management/src/router/index.ts"
lines={[[1, -1]]}
meta="name=src/router/index.ts"
/>

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

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

```bash
ionic serve
```

And then open the browser to [localhost:8100](http://localhost:8100) and you should see the completed app.

![Supabase Ionic Vue](/docs/img/ionic-demos/ionic-vue.png)

## Bonus: Profile photos

Every Supabase project is configured with [Storage](/docs/guides/storage) for managing large files like photos and videos.

### Create an upload widget

First install two packages to interact with the user's camera.

```bash
npm install @ionic/pwa-elements @capacitor/camera
```

[Capacitor](https://capacitorjs.com) is a cross-platform native runtime from Ionic that enables you to deploy web apps to app stores and provides access to native device API.

Ionic PWA elements is a companion package that polyfills certain browser APIs that provide no user interface with custom Ionic UI.

With those packages installed, update `main.ts` to include an additional bootstrapping call for the Ionic PWA Elements.

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

Then create an `AvatarComponent`.

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

### Add the new widget

Add the widget to the Account page (already included in the Account.vue code above since the example includes the Avatar component by default).

At this stage you have a fully functional application!