mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 03:15:06 +03:00
Chris ChinchillaandCopilot Autofix powered by AI
bb1ced5e10
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
140 lines
4.0 KiB
Plaintext
140 lines
4.0 KiB
Plaintext
---
|
|
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" />
|
|
|
|
|
|
|
|
<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.
|
|
|
|
|
|
|
|
## 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!
|