supabase/apps/docs/content/guides/getting-started/tutorials/with-ionic-vue.mdx

---
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 sign-in route

Create a Vue component to manage sign-ins 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, 9], [11, 67], [69, -1]]}
meta="name=src/views/Account.vue"
/>

### Launch!

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

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

<$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

And then add the widget to the Account page:

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

At this stage you have a fully functional application!