Build a User Management App with Ionic Vue

<$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 by building the Vue app from scratch.

Initialize an Ionic Vue app

Use the Ionic CLI to initialize an app called supabase-ionic-vue:

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

Install the only additional dependency: supabase-js

npm install @supabase/supabase-js

Save the environment variables in a .env file, including the API URL and key that you copied earlier.

<$CodeTabs>

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

ionic serve

And then open the browser to localhost:8100 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

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

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

Capacitor 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!