{"id":14968913,"url":"https://github.com/nuxtclub/supabase","last_synced_at":"2025-10-26T06:30:45.665Z","repository":{"id":57132455,"uuid":"353145713","full_name":"nuxtclub/supabase","owner":"nuxtclub","description":"An easy way to integrate Supabase with NuxtJS","archived":false,"fork":false,"pushed_at":"2021-10-15T15:05:40.000Z","size":20,"stargazers_count":38,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-01-31T15:53:57.591Z","etag":null,"topics":["nuxt","nuxt-module","nuxt-modules","nuxt3","nuxtjs","supabase","supabase-js"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nuxtclub.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-30T21:26:27.000Z","updated_at":"2024-02-20T09:45:44.000Z","dependencies_parsed_at":"2022-08-31T19:41:47.392Z","dependency_job_id":null,"html_url":"https://github.com/nuxtclub/supabase","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxtclub%2Fsupabase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxtclub%2Fsupabase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxtclub%2Fsupabase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxtclub%2Fsupabase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nuxtclub","download_url":"https://codeload.github.com/nuxtclub/supabase/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238275861,"owners_count":19445299,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nuxt","nuxt-module","nuxt-modules","nuxt3","nuxtjs","supabase","supabase-js"],"created_at":"2024-09-24T13:40:48.406Z","updated_at":"2025-10-26T06:30:45.321Z","avatar_url":"https://github.com/nuxtclub.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# @nuxtclub/supabase\n\n## Setup\n\n1. Add `@nuxtclub/supabase` dependency to your project\n\n```bash\nnpm i -D @nuxtclub/supabase\n```\n\n2. Add `@nuxtclub/supabase` to the `buildModules` section of `nuxt.config.js`\n\n:warning: If you are using Nuxt **\u003c v2.9** you have to install the module as a `dependency` (No `--dev` or `--save-dev` flags) and use `modules` section in `nuxt.config.js` instead of `buildModules`.\n\n```javascript\nexport default {\n\tbuildModules: [\n\t\t[\n\t\t\t'@nuxtclub/supabase',\n\t\t\t{\n\t\t\t\t/* module options */\n\t\t\t},\n\t\t],\n\t],\n}\n```\n\n## Using top level options\n\n```javascript\nexport default {\n\tbuildModules: ['@nuxtclub/supabase'],\n\tsupabase: {\n\t\t/* module options */\n\t},\n}\n```\n\n# Typescript support\n\nAdd the types to your `\"types\"` array in `tsconfig.json` after the `@nuxt/types` entry.\n\n:warning: Use `@nuxt/vue-app` instead of `@nuxt/types` for nuxt \u003c 2.9.\n\n```json\n{\n\t\"compilerOptions\": {\n\t\t\"types\": [\"@nuxt/types\", \"@nuxtclub/supabase\"]\n\t}\n}\n```\n\n## Configuration\n\nTo start using Supabase in your project you should place the URL and the public API KEY of your Supabase project.\n\nYou can find this data on the administration panel of your project \u003e Settings \u003e API.\n\nBe sure to copy your **public key**, not your private key.\n\n```javascript\nexport default {\n\tsupabase: {\n\t\turl: 'YOUR_SUPABASE_URL',\n\t\tkey: 'YOUR_SUPABASE_KEY',\n\t},\n}\n```\n\n## Usage\n\nThis module will inject $supabase in the context of your application.\n\nUsing $supabase you can access to the SupabaseClient object of the [Supabase Client for JavaScript](https://supabase.io/docs/reference/javascript/supabase-client).\n\n### Shortcuts\n\nThis module also inject $supaAuth \u0026 $supaStorage that are nothing more than a shorcut for $supabase.auth and $supabase.storage.\n\n## Examples\n\n### Fetching data\n\n```vue\n\u003ctemplate\u003e\n\t\u003cdiv\u003e\n\t\t\u003ch1\u003eRecipes\u003c/h1\u003e\n\t\t\u003cul\u003e\n\t\t\t\u003cli v-for=\"recipe in recipes\" :key=\"recipe.id\"\u003e\n\t\t\t\t{{ recipe.name }}\n\t\t\t\u003c/li\u003e\n\t\t\u003c/ul\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n\tmiddleware: 'authenticated',\n\tasync asyncData({ $supabase }) {\n\t\tconst { data } = await $supabase.from('recipes').select('*')\n\t\treturn { recipes: data }\n\t},\n}\n\u003c/script\u003e\n```\n\n### Authentication:\n\nCreate a page to **sign in**:\n\n```vue\n\u003c!-- ~/pages/sign-in --\u003e\n\u003ctemplate\u003e\n\t\u003cform @submit.prevent=\"submit()\"\u003e\n\t\t\u003cinput type=\"email\" v-model=\"email\" /\u003e\n\t\t\u003cinput type=\"password\" v-model=\"password\" /\u003e\n\t\t\u003cbutton type=\"submit\"\u003eSign In\u003c/button\u003e\n\t\u003c/form\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\temail: '',\n\t\t\tpassword: '',\n\t\t}\n\t},\n\tmethods: {\n\t\tsubmit() {\n\t\t\tthis.$supabase.auth\n\t\t\t\t.signIn({\n\t\t\t\t\temail: this.email,\n\t\t\t\t\tpassword: this.password,\n\t\t\t\t})\n\t\t\t\t.then(({ error, data }) =\u003e {\n\t\t\t\t\tif (error) {\n\t\t\t\t\t\talert(error.message)\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.$router.push('/')\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t},\n\t},\n}\n\u003c/script\u003e\n```\n\nTo make the **sign up** page copy the same code and change the `signIn` function by `signUp`.\n\nCreate a Middleware to protect your routes:\n\n```javascript\n// ~/middleware/authenticated.js\nexport default ({ $supabase, redirect }) =\u003e {\n\tif (!$supabase.auth.session()) {\n\t\treturn redirect('/sign-in')\n\t}\n}\n```\n\nProtect the home page using previously created middleware.\n\n```vue\n\u003c!-- ~/pages/index.vue --\u003e\n\u003ctemplate\u003e\n\t\u003cdiv\u003e\n\t\t\u003ch1\u003eYou're authenticated!\u003c/h1\u003e\n\t\t\u003cbutton @click=\"signOut()\"\u003eSign Out\u003c/button\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n\tmiddleware: 'authenticated',\n\tmethods: {\n\t\tsignOut() {\n\t\t\tthis.$supabase.auth.signOut().then(({ error }) =\u003e {\n\t\t\t\tif (error) {\n\t\t\t\t\tconsole.error(error)\n\t\t\t\t} else {\n\t\t\t\t\tthis.$router.push('/sign-in')\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\t},\n}\n\u003c/script\u003e\n```\n\nLearn more about Supabase [here](https://supabase.io/docs/reference/javascript/supabase-client).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxtclub%2Fsupabase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnuxtclub%2Fsupabase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxtclub%2Fsupabase/lists"}