From e29fa93086dd19cc708b9b057ff32d8ec467dfdf Mon Sep 17 00:00:00 2001
From: Baptiste Leproux <leproux.baptiste@gmail.com>
Date: Fri, 17 Nov 2023 16:10:18 +0100
Subject: [PATCH] docs(new): ui pro docs

---
 .github/workflows/studio.yml                  |  82 ----------
 docs-old/.eslintignore                        |   4 +
 docs-old/.eslintrc.cjs                        |   8 +
 docs-old/.gitignore                           |  12 ++
 docs-old/.npmrc                               |   2 +
 docs-old/README.md                            |  57 +++++++
 docs-old/app.config.ts                        |  57 +++++++
 {docs => docs-old}/components/Logo.vue        |   0
 docs-old/components/content/Releases.vue      |  19 +++
 docs-old/components/content/VoltaBoard.vue    |  14 ++
 {docs => docs-old}/content/1.index.md         |   0
 docs-old/content/2.get-started.md             | 151 ++++++++++++++++++
 docs-old/content/3.authentication.md          |  80 ++++++++++
 {docs => docs-old}/content/3.usage/_dir.yml   |   0
 .../content/3.usage/composables/_dir.yml      |   0
 .../3.usage/composables/useSupabaseClient.md  |   0
 .../3.usage/composables/useSupabaseUser.md    |   0
 .../services/1.serverSupabaseClient.md        |   0
 .../services/2.serverSupabaseServiceRole.md   |   0
 .../3.usage/services/3.serverSupabaseUser.md  |   0
 .../content/3.usage/services/_dir.yml         |   0
 {docs => docs-old}/content/4.demo.md          |   0
 {docs => docs-old}/content/5.changelog.md     |   0
 {docs => docs-old}/content/6.roadmap.md       |   0
 {docs => docs-old}/nuxt.config.ts             |   0
 {docs => docs-old}/package.json               |   0
 {docs => docs-old}/pnpm-lock.yaml             |   0
 {docs => docs-old}/public/cover.jpg           | Bin
 {docs => docs-old}/public/favicon.ico         | Bin
 {docs => docs-old}/renovate.json              |   0
 {docs => docs-old}/tokens.config.ts           |   0
 {docs => docs-old}/tsconfig.json              |   0
 {docs => docs-old}/utils/index.ts             |   0
 docs/.env.example                             |   2 +
 docs/.eslintignore                            |   2 +-
 docs/.eslintrc.cjs                            |  12 +-
 docs/.gitignore                               |  33 ++--
 docs/.nuxtrc                                  |   3 +
 docs/README.md                                | 110 ++++++++++---
 docs/app.config.ts                            | 141 ++++++++++------
 docs/app.vue                                  |  48 ++++++
 docs/components/Footer.vue                    |  23 +++
 docs/components/Header.vue                    |  45 ++++++
 docs/components/OgImage/OgImageDocs.vue       |  29 ++++
 docs/content/2.get-started.md                 |   4 +-
 docs/content/3.authentication.md              |   6 +-
 docs/content/4.usage/_dir.yml                 |   2 +
 docs/content/4.usage/composables/_dir.yml     |   1 +
 .../4.usage/composables/useSupabaseClient.md  | 113 +++++++++++++
 .../4.usage/composables/useSupabaseUser.md    |  41 +++++
 .../services/1.serverSupabaseClient.md        |  42 +++++
 .../services/2.serverSupabaseServiceRole.md   |  38 +++++
 .../4.usage/services/3.serverSupabaseUser.md  |  44 +++++
 docs/content/4.usage/services/_dir.yml        |   1 +
 docs/content/5.demo.md                        |  23 +++
 docs/content/6.changelog.md                   |  10 ++
 docs/content/7.roadmap.md                     |   7 +
 docs/content/index.yml                        |  54 +++++++
 docs/error.vue                                |  49 ++++++
 docs/layouts/docs.vue                         |  21 +++
 60 files changed, 1218 insertions(+), 172 deletions(-)
 delete mode 100644 .github/workflows/studio.yml
 create mode 100644 docs-old/.eslintignore
 create mode 100644 docs-old/.eslintrc.cjs
 create mode 100644 docs-old/.gitignore
 create mode 100644 docs-old/.npmrc
 create mode 100644 docs-old/README.md
 create mode 100644 docs-old/app.config.ts
 rename {docs => docs-old}/components/Logo.vue (100%)
 create mode 100644 docs-old/components/content/Releases.vue
 create mode 100644 docs-old/components/content/VoltaBoard.vue
 rename {docs => docs-old}/content/1.index.md (100%)
 create mode 100644 docs-old/content/2.get-started.md
 create mode 100644 docs-old/content/3.authentication.md
 rename {docs => docs-old}/content/3.usage/_dir.yml (100%)
 rename {docs => docs-old}/content/3.usage/composables/_dir.yml (100%)
 rename {docs => docs-old}/content/3.usage/composables/useSupabaseClient.md (100%)
 rename {docs => docs-old}/content/3.usage/composables/useSupabaseUser.md (100%)
 rename {docs => docs-old}/content/3.usage/services/1.serverSupabaseClient.md (100%)
 rename {docs => docs-old}/content/3.usage/services/2.serverSupabaseServiceRole.md (100%)
 rename {docs => docs-old}/content/3.usage/services/3.serverSupabaseUser.md (100%)
 rename {docs => docs-old}/content/3.usage/services/_dir.yml (100%)
 rename {docs => docs-old}/content/4.demo.md (100%)
 rename {docs => docs-old}/content/5.changelog.md (100%)
 rename {docs => docs-old}/content/6.roadmap.md (100%)
 rename {docs => docs-old}/nuxt.config.ts (100%)
 rename {docs => docs-old}/package.json (100%)
 rename {docs => docs-old}/pnpm-lock.yaml (100%)
 rename {docs => docs-old}/public/cover.jpg (100%)
 rename {docs => docs-old}/public/favicon.ico (100%)
 rename {docs => docs-old}/renovate.json (100%)
 rename {docs => docs-old}/tokens.config.ts (100%)
 rename {docs => docs-old}/tsconfig.json (100%)
 rename {docs => docs-old}/utils/index.ts (100%)
 create mode 100644 docs/.env.example
 create mode 100644 docs/.nuxtrc
 create mode 100644 docs/app.vue
 create mode 100644 docs/components/Footer.vue
 create mode 100644 docs/components/Header.vue
 create mode 100644 docs/components/OgImage/OgImageDocs.vue
 create mode 100644 docs/content/4.usage/_dir.yml
 create mode 100644 docs/content/4.usage/composables/_dir.yml
 create mode 100644 docs/content/4.usage/composables/useSupabaseClient.md
 create mode 100644 docs/content/4.usage/composables/useSupabaseUser.md
 create mode 100644 docs/content/4.usage/services/1.serverSupabaseClient.md
 create mode 100644 docs/content/4.usage/services/2.serverSupabaseServiceRole.md
 create mode 100644 docs/content/4.usage/services/3.serverSupabaseUser.md
 create mode 100644 docs/content/4.usage/services/_dir.yml
 create mode 100644 docs/content/5.demo.md
 create mode 100644 docs/content/6.changelog.md
 create mode 100644 docs/content/7.roadmap.md
 create mode 100644 docs/content/index.yml
 create mode 100644 docs/error.vue
 create mode 100644 docs/layouts/docs.vue

diff --git a/.github/workflows/studio.yml b/.github/workflows/studio.yml
deleted file mode 100644
index beaf78f3e..000000000
--- a/.github/workflows/studio.yml
+++ /dev/null
@@ -1,82 +0,0 @@
-
-name: studio-nuxt-build
-run-name: studio nuxt build
-
-on:
-  # Runs on pushes targeting the default branch
-  push:
-    branches:
-      - 'main'
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-# Add write workflow permissions
-permissions:
-  contents: write
-
-# Allow one concurrent deployment
-concurrency:
-  group: "pages"
-  cancel-in-progress: true
-
-jobs:
-  # Build job
-  build-and-deploy:
-    runs-on: ${{ matrix.os }}
-    defaults:
-      run:
-        working-directory: docs
-
-    strategy:
-      matrix:
-        os: [ubuntu-latest]
-        node: [18]
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Identify package manager
-        id: pkgman
-        run: |
-          cache=`[ -f "docs/pnpm-lock.yaml" ] && echo "pnpm" || ([ -f "docs/package-lock.json" ] && echo "npm" || ([ -f "docs/yarn.lock" ] && echo "yarn" || echo ""))`
-          package_manager=`[ ! -z "$cache" ] && echo "$cache" || echo "pnpm"`
-          echo "cache=$cache" >> $GITHUB_OUTPUT
-          echo "package_manager=$package_manager" >> $GITHUB_OUTPUT
-
-      - uses: pnpm/action-setup@v2.2.4
-        if: ${{ steps.pkgman.outputs.package_manager == 'pnpm' }}
-        name: Install pnpm
-        id: pnpm-install
-        with:
-          version: 8
-
-      - uses: actions/setup-node@v3
-        with:
-          version: ${{ matrix.node }}
-          cache: ${{ steps.pkgman.outputs.cache }}
-
-      - name: Install dependencies
-        run: ${{ steps.pkgman.outputs.package_manager }} install
-
-      - name: Install @nuxthq/studio
-        run: ${{ steps.pkgman.outputs.package_manager }} add -D @nuxthq/studio
-
-      - name: Create .nuxtrc
-        run: echo 'modules[]=@nuxthq/studio' > .nuxtrc
-
-      - name: Generate
-        run: ${{ steps.pkgman.outputs.package_manager }} nuxi generate
-        env:
-          NUXT_PUBLIC_STUDIO_API_URL: https://api.nuxt.studio
-          NUXT_PUBLIC_STUDIO_TOKENS: 074defe60624d32633e4fd97fdd223dcbfea4b064a290d7989aaa8d3496dc13b
-
-      - name: Add .nojekyll file
-        run: touch .output/public/.nojekyll
-
-        # Deployment job
-      - name: Deploy 🚀
-        uses: JamesIves/github-pages-deploy-action@v4
-        with:
-          folder: docs/.output/public
diff --git a/docs-old/.eslintignore b/docs-old/.eslintignore
new file mode 100644
index 000000000..a1bd0c80d
--- /dev/null
+++ b/docs-old/.eslintignore
@@ -0,0 +1,4 @@
+dist
+node_modules
+.output
+.nuxt
\ No newline at end of file
diff --git a/docs-old/.eslintrc.cjs b/docs-old/.eslintrc.cjs
new file mode 100644
index 000000000..38db31380
--- /dev/null
+++ b/docs-old/.eslintrc.cjs
@@ -0,0 +1,8 @@
+module.exports = {
+  root: true,
+  extends: '@nuxt/eslint-config',
+  rules: {
+    'vue/max-attributes-per-line': 'off',
+    'vue/multi-word-component-names': 'off'
+  }
+}
\ No newline at end of file
diff --git a/docs-old/.gitignore b/docs-old/.gitignore
new file mode 100644
index 000000000..69f6b69d0
--- /dev/null
+++ b/docs-old/.gitignore
@@ -0,0 +1,12 @@
+node_modules
+*.iml
+.idea
+*.log*
+.nuxt
+.vscode
+.DS_Store
+coverage
+dist
+sw.*
+.env
+.output
diff --git a/docs-old/.npmrc b/docs-old/.npmrc
new file mode 100644
index 000000000..cf0404245
--- /dev/null
+++ b/docs-old/.npmrc
@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
diff --git a/docs-old/README.md b/docs-old/README.md
new file mode 100644
index 000000000..8607e02a8
--- /dev/null
+++ b/docs-old/README.md
@@ -0,0 +1,57 @@
+# Docus Starter
+
+Starter template for [Docus](https://docus.dev).
+
+## Clone
+
+Clone the repository (using `nuxi`):
+
+```bash
+npx nuxi init -t themes/docus
+```
+
+## Setup
+
+Install dependencies:
+
+```bash
+yarn install
+```
+
+## Development
+
+```bash
+yarn dev
+```
+
+## Edge Side Rendering
+
+Can be deployed to Vercel Functions, Netlify Functions, AWS, and most Node-compatible environments.
+
+Look at all the available presets [here](https://v3.nuxtjs.org/guide/deploy/presets).
+
+```bash
+yarn build
+```
+
+## Static Generation
+
+Use the `generate` command to build your application.
+
+The HTML files will be generated in the .output/public directory and ready to be deployed to any static compatible hosting.
+
+```bash
+yarn generate
+```
+
+## Preview build
+
+You might want to preview the result of your build locally, to do so, run the following command:
+
+```bash
+yarn preview
+```
+
+---
+
+For a detailed explanation of how things work, check out [Docus](https://docus.dev).
diff --git a/docs-old/app.config.ts b/docs-old/app.config.ts
new file mode 100644
index 000000000..ee13b70b0
--- /dev/null
+++ b/docs-old/app.config.ts
@@ -0,0 +1,57 @@
+export default defineAppConfig({
+  docus: {
+    title: 'Nuxt Supabase',
+    description: 'A supa simple wrapper around supabase-js to enable usage and integration within Nuxt.',
+    image: '/cover.jpg',
+
+    socials: {
+      twitter: 'nuxt_js',
+      github: 'nuxt-modules/supabase',
+      nuxt: {
+        label: 'Nuxt',
+        icon: 'simple-icons:nuxtdotjs',
+        href: 'https://nuxt.com'
+      },
+      supabase: {
+        label: 'Supabase',
+        icon: 'simple-icons:supabase',
+        href: 'https://supabase.com'
+      }
+    },
+
+    github: {
+      dir: 'docs/content',
+      branch: 'main',
+      repo: 'supabase',
+      owner: 'nuxt-modules',
+      edit: true
+    },
+
+    aside: {
+      level: 0,
+      collapsed: false,
+      exclude: []
+    },
+
+    main: {
+      padded: true,
+    },
+
+    header: {
+      logo: true,
+      showLinkIcon: true,
+      exclude: [],
+      title: 'Nuxt Supabase'
+    },
+
+    footer: {
+      credits: {
+        text: 'Made with Nuxt Studio',
+        icon: 'simple-icons:nuxtdotjs',
+        href: 'https://nuxt.studio'
+      }
+    },
+
+    titleTemplate: '%s · Nuxt Supabase'
+  }
+})
diff --git a/docs/components/Logo.vue b/docs-old/components/Logo.vue
similarity index 100%
rename from docs/components/Logo.vue
rename to docs-old/components/Logo.vue
diff --git a/docs-old/components/content/Releases.vue b/docs-old/components/content/Releases.vue
new file mode 100644
index 000000000..87cf97301
--- /dev/null
+++ b/docs-old/components/content/Releases.vue
@@ -0,0 +1,19 @@
+<template>
+  <div style="margin-top: 50px">
+    <div v-for="release of releases" :key="release.name" style="margin-bottom: 50px">
+      <ProseH2 :id="release.name">
+        {{ release.name }}
+        <Badge style="margin-left: 10px;">
+          {{ formatDateByLocale(release.date) }}
+        </Badge>
+      </ProseH2>
+
+      <ContentRenderer :value="release" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { fetchReleases } = useGithub()
+const { data: releases } = await useAsyncData('releases', () => fetchReleases({}))
+</script>
diff --git a/docs-old/components/content/VoltaBoard.vue b/docs-old/components/content/VoltaBoard.vue
new file mode 100644
index 000000000..44f6a2cae
--- /dev/null
+++ b/docs-old/components/content/VoltaBoard.vue
@@ -0,0 +1,14 @@
+<template>
+  <iframe style="width: 100%; min-height: calc(100vh / 1.5)" :src="src" />
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  token: {
+    type: String,
+    required: true
+  }
+})
+
+const src = computed(() => `https://volta.net/embed/${props.token}`)
+</script>
diff --git a/docs/content/1.index.md b/docs-old/content/1.index.md
similarity index 100%
rename from docs/content/1.index.md
rename to docs-old/content/1.index.md
diff --git a/docs-old/content/2.get-started.md b/docs-old/content/2.get-started.md
new file mode 100644
index 000000000..5936fb091
--- /dev/null
+++ b/docs-old/content/2.get-started.md
@@ -0,0 +1,151 @@
+---
+title: Get Started
+icon: heroicons:rocket-launch
+description: '@nuxtjs/supabase is a Nuxt module for first class integration with Supabase.'
+---
+
+# Getting started
+
+[@nuxtjs/supabase](https://github.com/nuxt-modules/supabase) is a Nuxt module for first class integration with Supabase.
+
+Checkout the [Nuxt 3](https://v3.nuxtjs.org) documentation and [Supabase](https://supabase.com) to learn more.
+
+::alert
+For integrating Supabase with Nuxt 2, checkout [supabase-community/nuxt-supabase](https://github.com/supabase-community/nuxt-supabase).
+::
+
+## Installation
+
+Add `@nuxtjs/supabase` dev dependency to your project:
+
+::code-group
+```bash [pnpm]
+pnpm add -D @nuxtjs/supabase
+```
+```bash [yarn]
+yarn add --dev @nuxtjs/supabase
+```
+```bash [NPM]
+npm install @nuxtjs/supabase --save-dev
+```
+::
+
+Add `@nuxtjs/supabase` to the `modules` section of `nuxt.config.ts`:
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/supabase'],
+})
+```
+
+Add `SUPABASE_URL` and `SUPABASE_KEY` to the `.env`:
+
+```zsh [env]
+SUPABASE_URL="https://example.supabase.co"
+SUPABASE_KEY="<your_key>"
+```
+
+::alert
+Alternatively, you can prefix the env variables with `NUXT_PUBLIC_` in order to use runtimeConfig.
+::
+
+## Options
+
+You can configure the supabase module by using the `supabase` key in `nuxt.config`:
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  // ...
+  supabase: {
+    // Options
+  }
+}
+```
+
+### `url`
+
+Default: `process.env.SUPABASE_URL` (ex: https://example.supabase.co)
+
+The unique Supabase URL which is supplied when you create a new project in your project dashboard.
+
+### `key`
+
+Default: `process.env.SUPABASE_KEY`
+
+Supabase 'anon key', used to bypass the Supabase API gateway and interact with your Supabase database making use of user JWT to apply RLS Policies.
+
+### `serviceKey`
+
+Default: `process.env.SUPABASE_SERVICE_KEY`
+
+Supabase 'service role key', has super admin rights and can bypass your Row Level Security.
+
+
+### `redirect`
+
+Default: `true`
+
+Redirect automatically to the configured login page if a non authenticated user is trying to access a guarded. You can disable all redirects by setting this option to false.
+
+
+### `redirectOptions`
+
+Default:
+
+```ts [nuxt.config.ts]
+  redirectOptions: {
+    login: '/login',
+    callback: '/confirm',
+    exclude: [],
+  }
+```
+- `login`: User will be redirected to this path if not authenticated or after logout. 
+- `callback`: This is the path the user will be redirect to after supabase login redirection. Should match configured `redirectTo` option of your [signIn method](https://supabase.com/docs/reference/javascript/auth-signinwithoauth). Should also be configured in your Supabase dashboard under `Authentication -> URL Configuration -> Redirect URLs`.
+- `exclude`: Routes to exclude from the redirect. `['/foo', '/bar/*']` will exclude the `foo` page and all pages in your `bar` folder.
+
+### `cookieName`
+
+Default: `sb`
+
+Cookie name used for storing access and refresh tokens, added in front of `-access-token` and `-refresh-token` to form the full cookie name e.g. `sb-access-token`
+
+### cookieOptions
+
+```ts
+  cookieOptions: {
+    maxAge: 60 * 60 * 8,
+    sameSite: 'lax',
+    secure: true
+  }
+```
+Options for cookies used to share tokens between server and client, refer to [cookieOptions](https://nuxt.com/docs/api/composables/use-cookie#options) for available settings. Please note that the lifetime set here does not determine the Supabase session lifetime.
+
+### `clientOptions`
+
+Default:
+```ts
+  clientOptions: {
+    auth: {
+      flowType: 'pkce',
+      detectSessionInUrl: true,
+      persistSession: true,
+      autoRefreshToken: true
+    },
+  }
+  ```
+
+Supabase client options [available here](https://supabase.com/docs/reference/javascript/initializing#parameters).
+
+## Versions
+
+`0.1.x` versions are wrapped around `supabase-js v1`.
+<br>
+`1.x.x` versions are wrapped around `supabase-js v2`.
+
+## Demo
+
+A live demo is made for see this module in action on [n3-supabase.netlify.app](https://n3-supabase.netlify.app), read more in the [demo section](/demo).
+
+[![Supabase demo with Nuxt 3](https://user-images.githubusercontent.com/904724/160422461-8f87500a-8dec-4413-86b2-ba04e1b2d17b.png)](https://n3-supabase.netlify.app)
+
+Also checkout the [YouTube video](https://www.youtube.com/watch?v=jIyiRT6zT8Q) about its usage in a live demo.
diff --git a/docs-old/content/3.authentication.md b/docs-old/content/3.authentication.md
new file mode 100644
index 000000000..20523b538
--- /dev/null
+++ b/docs-old/content/3.authentication.md
@@ -0,0 +1,80 @@
+---
+title: Authentication
+icon: heroicons:lock-closed
+description: 'Authenticate your user thanks to the PKCE Oauth protocol that enables secure exchange of refresh and access tokens between an application and the authorization server'
+---
+
+# Authentication
+
+With the default options, the module requires a log-in page and a confirm page to handle the [PKCE authorization code flow](https://supabase.com/docs/guides/resources/glossary#pkce). If you want to understand how it works under the hood, you can read this [section](https://supabase.com/docs/guides/auth/server-side-rendering#understanding-the-authentication-flow).
+
+All you need to do is to create a `login.vue` and `confirm.vue` page in the `pages` folder.
+
+::alert{type="info"}
+For advanced users who want to implement the auth behaviour themselves, you can disable or override the [redirect options](/get-started#redirect).
+::
+
+## Log-in page - `/login`
+
+Each time a user is trying to access a page that needs authentication, he will automatically be redirected to the configured log in page. If you want to allow access to "public" page, you just need to add them in the [exclude](/get-started#redirectoptions) redirect option. 
+
+
+::alert{type="warning"}
+Ensure to activate the authentication providers you want in the Supabase Dashboard under `Authentication -> Providers`.
+::
+
+The log-in page initiates the log-in method(s) you choose from the [available authorization methods](https://supabase.com/docs/reference/javascript/auth-signinwithpassword) provided by Supabase, it could looks like:
+
+```vue [pages/login.vue]
+<script setup lang="ts">
+const supabase = useSupabaseClient()
+const email = ref('')
+
+const signInWithOtp = async () => {
+  const { error } = await supabase.auth.signInWithOtp({
+    email: email.value,
+    options: {
+      emailRedirectTo: 'http://localhost:3000/confirm',
+    }
+  })
+  if (error) console.log(error)
+}
+</script>
+<template>
+  <div>
+    <button @click="signInWithOtp">
+      Sign In with E-Mail
+    </button>
+    <input
+      v-model="email"
+      type="email"
+    />
+  </div>
+</template>
+```
+
+Once the authorization flow is triggered using the `auth` wrapper of the [useSupabaseClient](/usage/composables/usesupabaseclient) composable, the session management is handled automatically and the user will be redirected to the page you specify in the redirect option (`/confirm` by default).
+
+## Confirm page - `/confirm`
+
+The confirmation page receives the supabase callback. From there you can check the user value and redirect to the appropriate page.
+
+::alert{}
+The redirect URL must be configured in your Supabase dashboard under `Authentication -> URL Configuration -> Redirect URLs`.
+::
+
+
+```vue [pages/confirm.vue]
+<script setup lang="ts">
+const user = useSupabaseUser()
+watch(user, () => {
+  if (user.value) {
+    return navigateTo('/')
+  }
+}, { immediate: true })
+
+</script>
+<template>
+  <div>Waiting for login...</div>
+</template>
+```
diff --git a/docs/content/3.usage/_dir.yml b/docs-old/content/3.usage/_dir.yml
similarity index 100%
rename from docs/content/3.usage/_dir.yml
rename to docs-old/content/3.usage/_dir.yml
diff --git a/docs/content/3.usage/composables/_dir.yml b/docs-old/content/3.usage/composables/_dir.yml
similarity index 100%
rename from docs/content/3.usage/composables/_dir.yml
rename to docs-old/content/3.usage/composables/_dir.yml
diff --git a/docs/content/3.usage/composables/useSupabaseClient.md b/docs-old/content/3.usage/composables/useSupabaseClient.md
similarity index 100%
rename from docs/content/3.usage/composables/useSupabaseClient.md
rename to docs-old/content/3.usage/composables/useSupabaseClient.md
diff --git a/docs/content/3.usage/composables/useSupabaseUser.md b/docs-old/content/3.usage/composables/useSupabaseUser.md
similarity index 100%
rename from docs/content/3.usage/composables/useSupabaseUser.md
rename to docs-old/content/3.usage/composables/useSupabaseUser.md
diff --git a/docs/content/3.usage/services/1.serverSupabaseClient.md b/docs-old/content/3.usage/services/1.serverSupabaseClient.md
similarity index 100%
rename from docs/content/3.usage/services/1.serverSupabaseClient.md
rename to docs-old/content/3.usage/services/1.serverSupabaseClient.md
diff --git a/docs/content/3.usage/services/2.serverSupabaseServiceRole.md b/docs-old/content/3.usage/services/2.serverSupabaseServiceRole.md
similarity index 100%
rename from docs/content/3.usage/services/2.serverSupabaseServiceRole.md
rename to docs-old/content/3.usage/services/2.serverSupabaseServiceRole.md
diff --git a/docs/content/3.usage/services/3.serverSupabaseUser.md b/docs-old/content/3.usage/services/3.serverSupabaseUser.md
similarity index 100%
rename from docs/content/3.usage/services/3.serverSupabaseUser.md
rename to docs-old/content/3.usage/services/3.serverSupabaseUser.md
diff --git a/docs/content/3.usage/services/_dir.yml b/docs-old/content/3.usage/services/_dir.yml
similarity index 100%
rename from docs/content/3.usage/services/_dir.yml
rename to docs-old/content/3.usage/services/_dir.yml
diff --git a/docs/content/4.demo.md b/docs-old/content/4.demo.md
similarity index 100%
rename from docs/content/4.demo.md
rename to docs-old/content/4.demo.md
diff --git a/docs/content/5.changelog.md b/docs-old/content/5.changelog.md
similarity index 100%
rename from docs/content/5.changelog.md
rename to docs-old/content/5.changelog.md
diff --git a/docs/content/6.roadmap.md b/docs-old/content/6.roadmap.md
similarity index 100%
rename from docs/content/6.roadmap.md
rename to docs-old/content/6.roadmap.md
diff --git a/docs/nuxt.config.ts b/docs-old/nuxt.config.ts
similarity index 100%
rename from docs/nuxt.config.ts
rename to docs-old/nuxt.config.ts
diff --git a/docs/package.json b/docs-old/package.json
similarity index 100%
rename from docs/package.json
rename to docs-old/package.json
diff --git a/docs/pnpm-lock.yaml b/docs-old/pnpm-lock.yaml
similarity index 100%
rename from docs/pnpm-lock.yaml
rename to docs-old/pnpm-lock.yaml
diff --git a/docs/public/cover.jpg b/docs-old/public/cover.jpg
similarity index 100%
rename from docs/public/cover.jpg
rename to docs-old/public/cover.jpg
diff --git a/docs/public/favicon.ico b/docs-old/public/favicon.ico
similarity index 100%
rename from docs/public/favicon.ico
rename to docs-old/public/favicon.ico
diff --git a/docs/renovate.json b/docs-old/renovate.json
similarity index 100%
rename from docs/renovate.json
rename to docs-old/renovate.json
diff --git a/docs/tokens.config.ts b/docs-old/tokens.config.ts
similarity index 100%
rename from docs/tokens.config.ts
rename to docs-old/tokens.config.ts
diff --git a/docs/tsconfig.json b/docs-old/tsconfig.json
similarity index 100%
rename from docs/tsconfig.json
rename to docs-old/tsconfig.json
diff --git a/docs/utils/index.ts b/docs-old/utils/index.ts
similarity index 100%
rename from docs/utils/index.ts
rename to docs-old/utils/index.ts
diff --git a/docs/.env.example b/docs/.env.example
new file mode 100644
index 000000000..78725080c
--- /dev/null
+++ b/docs/.env.example
@@ -0,0 +1,2 @@
+# Production license for @nuxt/ui-pro, get one at https://ui.nuxt.com/pro/purchase
+NUXT_UI_PRO_LICENSE=
\ No newline at end of file
diff --git a/docs/.eslintignore b/docs/.eslintignore
index a1bd0c80d..81705cc5d 100644
--- a/docs/.eslintignore
+++ b/docs/.eslintignore
@@ -1,4 +1,4 @@
 dist
 node_modules
 .output
-.nuxt
\ No newline at end of file
+.nuxt
diff --git a/docs/.eslintrc.cjs b/docs/.eslintrc.cjs
index 38db31380..c2431ac40 100644
--- a/docs/.eslintrc.cjs
+++ b/docs/.eslintrc.cjs
@@ -1,8 +1,16 @@
 module.exports = {
   root: true,
-  extends: '@nuxt/eslint-config',
+  extends: [
+    '@nuxt/eslint-config'
+  ],
   rules: {
+    // Global
+    semi: ['error', 'never'],
+    quotes: ['error', 'single'],
+    'quote-props': ['error', 'as-needed'],
+    // Vue
+    'vue/multi-word-component-names': 0,
     'vue/max-attributes-per-line': 'off',
-    'vue/multi-word-component-names': 'off'
+    'vue/no-v-html': 0
   }
 }
\ No newline at end of file
diff --git a/docs/.gitignore b/docs/.gitignore
index 69f6b69d0..6bbb425a0 100644
--- a/docs/.gitignore
+++ b/docs/.gitignore
@@ -1,12 +1,27 @@
-node_modules
-*.iml
-.idea
-*.log*
+# Nuxt dev/build outputs
+.output
+.data
 .nuxt
-.vscode
-.DS_Store
-coverage
+.nitro
+.cache
 dist
-sw.*
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
 .env
-.output
+.env.*
+!.env.example
+
+# VSC
+.history
diff --git a/docs/.nuxtrc b/docs/.nuxtrc
new file mode 100644
index 000000000..ba8997a77
--- /dev/null
+++ b/docs/.nuxtrc
@@ -0,0 +1,3 @@
+
+autoImport=true
+modules[]=@nuxthq/studio
diff --git a/docs/README.md b/docs/README.md
index 8607e02a8..afcb79c49 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,57 +1,119 @@
-# Docus Starter
+![nuxt-ui-pro-docs-template](https://github.com/nuxt-ui-pro/docs/assets/904724/67fc15a7-92f6-4566-95b9-fe099012473c)
 
-Starter template for [Docus](https://docus.dev).
+# Nuxt UI Pro - Docs template
 
-## Clone
+[![Nuxt UI Pro](https://img.shields.io/badge/Made%20with-Nuxt%20UI%20Pro-00DC82?logo=nuxt.js&labelColor=020420)](https://ui.nuxt.com/pro)
+[![Nuxt Studio](https://img.shields.io/badge/Open%20in%20Nuxt%20Studio-18181B?&logo=nuxt.js&logoColor=3BB5EC)](https://nuxt.studio/themes/docus)
 
-Clone the repository (using `nuxi`):
-
-```bash
-npx nuxi init -t themes/docus
-```
+- [Live demo](https://nuxt-ui-pro-template-docs.vercel.app/)
+- [Play on Stackblitz](https://stackblitz.com/github/nuxt-ui-pro/docs)
+- [Documentation](https://ui.nuxt.com/pro/guide)
+- [Clone on Nuxt Studio](https://nuxt.studio/themes/docs)
 
 ## Setup
 
-Install dependencies:
+Make sure to install the dependencies:
 
 ```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
 yarn install
+
+# bun
+bun install
 ```
 
-## Development
+## Development Server
+
+Start the development server on `http://localhost:3000`:
 
 ```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
 yarn dev
-```
 
-## Edge Side Rendering
+# bun
+bun run dev
+```
 
-Can be deployed to Vercel Functions, Netlify Functions, AWS, and most Node-compatible environments.
+## Production
 
-Look at all the available presets [here](https://v3.nuxtjs.org/guide/deploy/presets).
+Build the application for production:
 
 ```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
 yarn build
+
+# bun
+bun run build
 ```
 
-## Static Generation
+Locally preview production build:
 
-Use the `generate` command to build your application.
+```bash
+# npm
+npm run preview
 
-The HTML files will be generated in the .output/public directory and ready to be deployed to any static compatible hosting.
+# pnpm
+pnpm run preview
 
-```bash
-yarn generate
+# yarn
+yarn preview
+
+# bun
+bun run preview
 ```
 
-## Preview build
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
 
-You might want to preview the result of your build locally, to do so, run the following command:
+## Nuxt Studio integration
+
+Add `@nuxthq/studio` dependency to your package.json:
 
 ```bash
-yarn preview
+# npm
+npm install --save-dev @nuxthq/studio
+
+# pnpm
+pnpm add -D @nuxthq/studio
+
+# yarn
+yarn add -D @nuxthq/studio
+
+# bun
+bun add -d @nuxthq/studio
+```
+
+Add this module to your `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  ...
+  modules: [
+    ...
+    '@nuxthq/studio'
+  ]
+})
 ```
 
----
+Read more on [Nuxt Studio docs](https://nuxt.studio/docs/projects/setup).
+
+## Renovate integration
 
-For a detailed explanation of how things work, check out [Docus](https://docus.dev).
+Install [Renovate GitHub app](https://github.com/apps/renovate/installations/select_target) on your repository and you are good to go.
diff --git a/docs/app.config.ts b/docs/app.config.ts
index ee13b70b0..194d14a65 100644
--- a/docs/app.config.ts
+++ b/docs/app.config.ts
@@ -1,57 +1,100 @@
 export default defineAppConfig({
-  docus: {
-    title: 'Nuxt Supabase',
-    description: 'A supa simple wrapper around supabase-js to enable usage and integration within Nuxt.',
-    image: '/cover.jpg',
+  ui: {
+    primary: 'green',
+    gray: 'slate',
 
-    socials: {
-      twitter: 'nuxt_js',
-      github: 'nuxt-modules/supabase',
-      nuxt: {
-        label: 'Nuxt',
-        icon: 'simple-icons:nuxtdotjs',
-        href: 'https://nuxt.com'
-      },
-      supabase: {
-        label: 'Supabase',
-        icon: 'simple-icons:supabase',
-        href: 'https://supabase.com'
+    footer: {
+      bottom: {
+        left: 'text-sm text-gray-500 dark:text-gray-400',
+        wrapper: 'border-t border-gray-200 dark:border-gray-800'
       }
     },
 
-    github: {
-      dir: 'docs/content',
-      branch: 'main',
-      repo: 'supabase',
-      owner: 'nuxt-modules',
-      edit: true
-    },
-
-    aside: {
-      level: 0,
-      collapsed: false,
-      exclude: []
-    },
-
-    main: {
-      padded: true,
-    },
-
-    header: {
-      logo: true,
-      showLinkIcon: true,
-      exclude: [],
-      title: 'Nuxt Supabase'
-    },
-
-    footer: {
-      credits: {
-        text: 'Made with Nuxt Studio',
-        icon: 'simple-icons:nuxtdotjs',
-        href: 'https://nuxt.studio'
+    icons: {
+      dark: 'i-heroicons-moon',
+      light: 'i-heroicons-sun'
+    }
+  },
+  header: {
+    logo: {
+      light: {
+        src: '/logo-nuxt-supabase-light.png'
+      },
+      dark: {
+        src: '/logo-nuxt-supabase-dark.png',
+        alt: 'Alt dark mode'
       }
     },
-
-    titleTemplate: '%s · Nuxt Supabase'
+    search: true,
+    colorMode: true,
+    links: [{
+      icon: 'i-simple-icons-x',
+      to: 'https://x.com/nuxt_js',
+      target: '_blank',
+      'aria-label': 'Nuxt on X'
+    }, {
+      icon: 'i-simple-icons-github',
+      to: 'https://github.com/nuxt-modules/supabase',
+      target: '_blank',
+      'aria-label': 'Module on GitHub'
+    }, {
+      icon: 'i-simple-icons-nuxtdotjs',
+      to: 'https://nuxt.com',
+      target: '_blank',
+      'aria-label': 'Nuxt official website'
+    }, {
+      icon: 'i-simple-icons-supabase',
+      to: 'https://supabase.com',
+      target: '_blank',
+      'aria-label': 'Supabase official website'
+    }]
+  },
+  footer: {
+    credits: 'Made with Nuxt Studio',
+    colorMode: false,
+    links: [{
+      icon: 'i-simple-icons-x',
+      to: 'https://x.com/nuxt_js',
+      target: '_blank',
+      'aria-label': 'Nuxt on X'
+    }, {
+      icon: 'i-simple-icons-github',
+      to: 'https://github.com/nuxt-modules/supabase',
+      target: '_blank',
+      'aria-label': 'Module on GitHub'
+    }, {
+      icon: 'i-simple-icons-nuxtdotjs',
+      to: 'https://nuxt.com',
+      target: '_blank',
+      'aria-label': 'Nuxt official website'
+    }, {
+      icon: 'i-simple-icons-supabase',
+      to: 'https://supabase.com',
+      target: '_blank',
+      'aria-label': 'Supabase official website'
+    }]
+  },
+  toc: {
+    title: 'Table of Contents',
+    bottom: {
+      title: 'Community',
+      edit: 'https://github.com/nuxt-modules/supabase/edit/main/docs/content',
+      links: [{
+        icon: 'i-heroicons-star',
+        label: 'Star on GitHub',
+        to: 'https://github.com/nuxt-modules/supabase',
+        target: '_blank'
+      }, {
+        icon: 'i-simple-icons-nuxtdotjs',
+        label: 'Nuxt docs',
+        to: 'https://nuxt.com',
+        target: '_blank'
+      }, {
+        icon: 'i-simple-icons-supabase',
+        label: 'Supabase docs',
+        to: 'https://supabase.com',
+        target: '_blank'
+      }]
+    }
   }
-})
+})
\ No newline at end of file
diff --git a/docs/app.vue b/docs/app.vue
new file mode 100644
index 000000000..dff1e1d8b
--- /dev/null
+++ b/docs/app.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
+const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
+  default: () => [],
+  server: false
+})
+
+useHead({
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+  ],
+  link: [
+    { rel: 'icon', href: '/favicon.ico' }
+  ],
+  htmlAttrs: {
+    lang: 'en'
+  }
+})
+
+useSeoMeta({
+  ogSiteName: 'Nuxt UI Pro - Docs template',
+  twitterCard: 'summary_large_image'
+})
+
+provide('navigation', navigation)
+</script>
+
+<template>
+  <div>
+    <Header />
+
+    <UMain>
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+    </UMain>
+
+    <Footer />
+
+    <ClientOnly>
+      <LazyUDocsSearch :files="files" :navigation="navigation" />
+    </ClientOnly>
+
+    <UNotifications />
+  </div>
+</template>
\ No newline at end of file
diff --git a/docs/components/Footer.vue b/docs/components/Footer.vue
new file mode 100644
index 000000000..694ecbc45
--- /dev/null
+++ b/docs/components/Footer.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const { footer } = useAppConfig()
+</script>
+
+<template>
+  <UFooter>
+    <template #left>
+      {{ footer.credits }}
+    </template>
+
+    <template #right>
+      <UColorModeButton v-if="footer?.colorMode" />
+
+      <template v-if="footer?.links">
+        <UButton
+          v-for="(link, index) of footer?.links"
+          :key="index"
+          v-bind="{ color: 'gray', variant: 'ghost', ...link }"
+        />
+      </template>
+    </template>
+  </UFooter>
+</template>
diff --git a/docs/components/Header.vue b/docs/components/Header.vue
new file mode 100644
index 000000000..1dcca4508
--- /dev/null
+++ b/docs/components/Header.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content/dist/runtime/types'
+
+const navigation = inject<NavItem[]>('navigation', [])
+
+const { header } = useAppConfig()
+const colorMode = useColorMode()
+
+const logo = computed(() => colorMode.value === 'dark' ? header?.logo?.dark : header?.logo?.light)
+</script>
+
+<template>
+  <UHeader>
+    <template #logo>
+      <template v-if="logo?.src">
+        <img v-bind="{ class: 'h-6 w-auto', ...logo }">
+      </template>
+      <template v-else>
+        Nuxt UI Pro <UBadge label="Docs" variant="subtle" class="mb-0.5" />
+      </template>
+    </template>
+
+    <template v-if="header?.search" #center>
+      <UDocsSearchButton class="hidden lg:flex" />
+    </template>
+
+    <template #right>
+      <UDocsSearchButton v-if="header?.search" :label="null" class="lg:hidden" />
+
+      <UColorModeButton v-if="header?.colorMode" />
+
+      <template v-if="header?.links">
+        <UButton
+          v-for="(link, index) of header.links"
+          :key="index"
+          v-bind="{ color: 'gray', variant: 'ghost', ...link }"
+        />
+      </template>
+    </template>
+
+    <template #panel>
+      <UNavigationTree :links="mapContentNavigation(navigation)" />
+    </template>
+  </UHeader>
+</template>
diff --git a/docs/components/OgImage/OgImageDocs.vue b/docs/components/OgImage/OgImageDocs.vue
new file mode 100644
index 000000000..0e7faacbf
--- /dev/null
+++ b/docs/components/OgImage/OgImageDocs.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: false
+})
+
+defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  description: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col justify-center text-center bg-slate-900 p-8">
+    <div class="relative">
+      <h1 class="text-8xl mb-4 text-white">
+        {{ title }}
+      </h1>
+      <p class="text-5xl text-gray-200 leading-tight">
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/docs/content/2.get-started.md b/docs/content/2.get-started.md
index 5936fb091..e7b14283a 100644
--- a/docs/content/2.get-started.md
+++ b/docs/content/2.get-started.md
@@ -10,7 +10,7 @@ description: '@nuxtjs/supabase is a Nuxt module for first class integration with
 
 Checkout the [Nuxt 3](https://v3.nuxtjs.org) documentation and [Supabase](https://supabase.com) to learn more.
 
-::alert
+::callout{icon="i-heroicons-exclamation-triangle-20-solid" color="amber"}
 For integrating Supabase with Nuxt 2, checkout [supabase-community/nuxt-supabase](https://github.com/supabase-community/nuxt-supabase).
 ::
 
@@ -45,7 +45,7 @@ SUPABASE_URL="https://example.supabase.co"
 SUPABASE_KEY="<your_key>"
 ```
 
-::alert
+::callout{icon="i-heroicons-light-bulb"}
 Alternatively, you can prefix the env variables with `NUXT_PUBLIC_` in order to use runtimeConfig.
 ::
 
diff --git a/docs/content/3.authentication.md b/docs/content/3.authentication.md
index 20523b538..2316aae37 100644
--- a/docs/content/3.authentication.md
+++ b/docs/content/3.authentication.md
@@ -10,7 +10,7 @@ With the default options, the module requires a log-in page and a confirm page t
 
 All you need to do is to create a `login.vue` and `confirm.vue` page in the `pages` folder.
 
-::alert{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 For advanced users who want to implement the auth behaviour themselves, you can disable or override the [redirect options](/get-started#redirect).
 ::
 
@@ -19,7 +19,7 @@ For advanced users who want to implement the auth behaviour themselves, you can
 Each time a user is trying to access a page that needs authentication, he will automatically be redirected to the configured log in page. If you want to allow access to "public" page, you just need to add them in the [exclude](/get-started#redirectoptions) redirect option. 
 
 
-::alert{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle-20-solid" color="amber"}
 Ensure to activate the authentication providers you want in the Supabase Dashboard under `Authentication -> Providers`.
 ::
 
@@ -59,7 +59,7 @@ Once the authorization flow is triggered using the `auth` wrapper of the [useSup
 
 The confirmation page receives the supabase callback. From there you can check the user value and redirect to the appropriate page.
 
-::alert{}
+::callout{icon="i-heroicons-light-bulb"}
 The redirect URL must be configured in your Supabase dashboard under `Authentication -> URL Configuration -> Redirect URLs`.
 ::
 
diff --git a/docs/content/4.usage/_dir.yml b/docs/content/4.usage/_dir.yml
new file mode 100644
index 000000000..ae651e46b
--- /dev/null
+++ b/docs/content/4.usage/_dir.yml
@@ -0,0 +1,2 @@
+title: 'Usage'
+icon: heroicons:book-open
diff --git a/docs/content/4.usage/composables/_dir.yml b/docs/content/4.usage/composables/_dir.yml
new file mode 100644
index 000000000..8195f5e4c
--- /dev/null
+++ b/docs/content/4.usage/composables/_dir.yml
@@ -0,0 +1 @@
+title: 'Vue composables'
diff --git a/docs/content/4.usage/composables/useSupabaseClient.md b/docs/content/4.usage/composables/useSupabaseClient.md
new file mode 100644
index 000000000..149140df3
--- /dev/null
+++ b/docs/content/4.usage/composables/useSupabaseClient.md
@@ -0,0 +1,113 @@
+---
+description: Make requests to the Supabase API with the useSupabaseClient composable
+---
+
+# useSupabaseClient
+
+[Auto-import](https://nuxt.com/docs/guide/directory-structure/composables) your client inside your vue files.
+
+This composable is using [supabase-js](https://github.com/supabase/supabase-js/) under the hood, it gives access to the [Supabase client](https://supabase.com/docs/reference/javascript/initializing).
+
+> The client is initialized with the `SUPABASE_KEY` you must have in your `.env` file. It establishes the connection with the database and make use of user JWT to apply [RLS Policies](https://supabase.com/docs/learn/auth-deep-dive/auth-row-level-security) implemented in Supabase. If you want to bypass policies, you can use the [serverSupabaseServiceRole](/usage/services/serversupabaseservicerole).
+
+## Authentication
+
+The useSupabaseClient composable is providing all methods to manage authorization under `useSupabaseClient().auth`. For more details please see the [supabase-js auth documentation](https://supabase.com/docs/reference/javascript/auth-api). Here is an example for signing in and out:
+
+::callout{icon="i-heroicons-light-bulb"}
+If you want a full explanation on how to handle the authentication process, please read this [section](/get-started#handle-authentication).
+::
+
+```ts
+<script setup lang="ts">
+const supabase = useSupabaseClient()
+
+const signInWithOAuth = async () => {
+  const { error } = await supabase.auth.signInWithOAuth({
+    provider: 'github',
+    options: {
+      redirectTo: 'http://localhost:3000/confirm',
+    },
+  })
+  if (error) console.log(error)
+}
+
+const signOut = async () => {
+  const { error } = await supabase.auth.signOut()
+  if (error) console.log(error)
+}
+</script>
+```
+
+Please also take a look at [Get Started](/get-started) for the authorization flow.
+
+## Database Request
+
+Please check [Supabase](https://supabase.com/docs/reference/javascript/select) documentation to fully use the power of Supabase client.
+
+Here is an example of a fetch using the `select` method with Nuxt 3 [useAsyncData](https://nuxt.com/docs/getting-started/data-fetching#useasyncdata) composable.
+
+```vue
+<script setup lang="ts">
+const client = useSupabaseClient()
+
+const { data: restaurant } = await useAsyncData('restaurant', async () => {
+  const { data } = await client.from('restaurants').select('name, location').eq('name', 'My Restaurant Name').single()
+
+  return data
+})
+</script>
+```
+
+## Realtime
+
+Based on [Supabase Realtime](https://github.com/supabase/realtime), listen to changes in your PostgreSQL Database and broadcasts them over WebSockets. 
+
+To enable it, make sure you have turned on the [Realtime API](https://supabase.com/docs/guides/api#realtime-api) for your table.
+
+Then, listen to changes directly in your vue page / component:
+
+```vue
+<script setup lang="ts">
+import type { RealtimeChannel } from '@supabase/supabase-js'
+
+const client = useSupabaseClient()
+
+let realtimeChannel: RealtimeChannel
+
+// Fetch collaborators and get the refresh method provided by useAsyncData
+const { data: collaborators, refresh: refreshCollaborators } = await useAsyncData('collaborators', async () => {
+  const { data } = await client.from('collaborators').select('name')
+  return data
+})
+
+// Once page is mounted, listen to changes on the `collaborators` table and refresh collaborators when receiving event
+onMounted(() => {
+  // Real time listener for new workouts
+  realtimeChannel = client.channel('public:collaborators').on(
+    'postgres_changes',
+    { event: '*', schema: 'public', table: 'collaborators' },
+    () => refreshCollaborators()
+  )
+
+  realtimeChannel.subscribe()
+})
+
+  // Don't forget to unsubscribe when user left the page
+onUnmounted(() => {
+  client.removeChannel(realtimeChannel)
+})
+</script>
+```
+
+## Typescript
+
+You can pass Database typings to the client. Check Supabase [documentation](https://supabase.com/docs/reference/javascript/release-notes#typescript-support) for further information.
+
+```vue
+<script setup lang="ts">
+import type { Database } from '~/types'
+const client = useSupabaseClient<Database>()
+</script>
+```
+
diff --git a/docs/content/4.usage/composables/useSupabaseUser.md b/docs/content/4.usage/composables/useSupabaseUser.md
new file mode 100644
index 000000000..5042817be
--- /dev/null
+++ b/docs/content/4.usage/composables/useSupabaseUser.md
@@ -0,0 +1,41 @@
+---
+description: Auto import and use your Supabase user with the useSupabaseUser composable
+---
+
+# useSupabaseUser
+
+Once logged in, you can [auto-import](https://nuxt.com/docs/guide/directory-structure/composables) your user everywhere inside your vue files.
+
+```vue
+<script setup>
+const user = useSupabaseUser()
+</script>
+```
+
+## Auth middleware
+
+::callout{icon="i-heroicons-light-bulb"}
+By default, the module is implementing a redirect middleware. All pages of your application are automatically redirected to the [login](/get-started#redirectoptions) page. However, you can allow redirection to "public" pages by setting the [exclude](/get-started#redirectoptions) redirect option.
+::
+
+If the [redirect](/get-started#redirect) option is disabled, you can protect your authenticated routes by creating a custom middleware in your project, here is an example:
+
+```ts [middleware/auth.ts]
+export default defineNuxtRouteMiddleware((to, _from) => {
+  const user = useSupabaseUser()
+
+  if (!user.value) {
+    return navigateTo('/login')
+  }
+})
+```
+
+Then you can reference your middleware in your page with:
+
+```ts [pages/dashboard.vue]
+definePageMeta({
+  middleware: 'auth'
+})
+```
+
+Learn more about [Nuxt middleware](https://nuxt.com/docs/guide/directory-structure/middleware) and [definePageMeta](https://nuxt.com/docs/guide/directory-structure/pages#page-metadata).
diff --git a/docs/content/4.usage/services/1.serverSupabaseClient.md b/docs/content/4.usage/services/1.serverSupabaseClient.md
new file mode 100644
index 000000000..135880649
--- /dev/null
+++ b/docs/content/4.usage/services/1.serverSupabaseClient.md
@@ -0,0 +1,42 @@
+---
+title: serverSupabaseClient
+description: Make requests to the Supabase API on server side with the serverSupabaseClient service
+---
+
+# serverSupabaseClient
+
+::callout{icon="i-heroicons-exclamation-triangle-20-solid" color="amber"}
+ This section assumes you're familiar with [Nitro](https://v3.nuxtjs.org/guide/concepts/server-engine), the server engine powered by Nuxt.
+::
+
+This function is working similary as the [useSupabaseClient](/usage/composables/usesupabaseclient) composable but is designed to be used in [server routes](https://nuxt.com/docs/guide/directory-structure/server#server-routes).
+
+Define your server route and just import the `serverSupabaseClient` from `#supabase/server`. Be careful,  `serverSupabaseClient` is returning a promise.
+
+```ts [server/api/libraries.ts]
+import { serverSupabaseClient } from '#supabase/server'
+
+export default eventHandler(async (event) => {
+  const client = await serverSupabaseClient(event)
+
+  const { data } = await client.from('libraries').select('*')
+
+  return { libraries: data }
+})
+```
+
+Then call your API route from any vue file:
+
+```ts [pages/index.vue]
+const fetchLibrary = async () => {
+  const { libraries } = await $fetch('/api/libraries')
+}
+```
+
+Be careful, if you want to call this route on SSR, please read this [section](https://nuxt.com/docs/getting-started/data-fetching#isomorphic-fetch-and-fetch), you must send your browser cookies including your supabase token.
+
+```ts [pages/index.vue]
+const { data: { libraries }} = await useFetch('/api/libraries', {
+  headers: useRequestHeaders(['cookie'])
+})
+```
diff --git a/docs/content/4.usage/services/2.serverSupabaseServiceRole.md b/docs/content/4.usage/services/2.serverSupabaseServiceRole.md
new file mode 100644
index 000000000..c8ab3c5d7
--- /dev/null
+++ b/docs/content/4.usage/services/2.serverSupabaseServiceRole.md
@@ -0,0 +1,38 @@
+---
+title: serverSupabaseServiceRole
+description: Make requests with super admin rights to the Supabase API with the serverSupabaseServiceRole service
+---
+
+# serverSupabaseServiceRole
+
+::callout{icon="i-heroicons-exclamation-triangle-20-solid" color="amber"}
+ This section assumes you're familiar with [Nitro](https://v3.nuxtjs.org/guide/concepts/server-engine), the server engine powered by Nuxt.
+::
+
+This function is designed to work only in [server routes](https://nuxt.com/docs/guide/directory-structure/server#server-routes), there is no vue composable equivalent. 
+
+It works similary as the [serverSupabaseClient](/usage/services/serversupabaseclient) but it provides a client with super admin rights that can bypass your [Row Level Security](https://supabase.com/docs/guides/auth/row-level-security).
+
+> The client is initialized with the `SUPABASE_SERVICE_KEY` you must have in your `.env` file. Checkout the doc if you want to know more about [Supabase keys](https://supabase.com/docs/learn/auth-deep-dive/auth-deep-dive-jwts#jwts-in-supabase).
+
+Define your server route and just import the `serverSupabaseServiceRole` from `#supabase/server`.
+
+```ts [server/api/bypass-rls.ts]
+import { serverSupabaseServiceRole } from '#supabase/server'
+
+export default eventHandler(async (event) => {
+  const client = serverSupabaseServiceRole(event)
+
+  const { data } = await client.from('rls-protected-table').select()
+
+  return { sensitiveData: data }
+})
+```
+
+Then call your API route from any vue file:
+
+```ts [pages/index.vue]
+const fetchSensitiveData = async () => {
+  const { sensitiveData } = await useFetch('/api/bypass-rls')
+}
+```
diff --git a/docs/content/4.usage/services/3.serverSupabaseUser.md b/docs/content/4.usage/services/3.serverSupabaseUser.md
new file mode 100644
index 000000000..62a7d0603
--- /dev/null
+++ b/docs/content/4.usage/services/3.serverSupabaseUser.md
@@ -0,0 +1,44 @@
+---
+title: serverSupabaseUser
+description: Get your Supabase user from serverside with the serverSupabaseUser service
+---
+
+# serverSupabaseUser
+
+::callout{icon="i-heroicons-exclamation-triangle-20-solid" color="amber"}
+ This section assumes you're familiar with [Nitro](https://v3.nuxtjs.org/guide/concepts/server-engine), the server engine powered by Nuxt.
+::
+
+This function is similar to the [useSupabaseUser](/usage/composables/usesupabaseuser) composable but is used in [server routes](https://nuxt.com/docs/guide/directory-structure/server#server-routes).
+
+Define your server route and import the `serverSupabaseUser` from `#supabase/server`.
+
+```ts [server/api/me.ts]
+import { serverSupabaseUser } from '#supabase/server'
+
+export default defineEventHandler(async (event) => {
+  return await serverSupabaseUser(event)
+})
+```
+
+Then call your api route from any vue file:
+
+```ts [pages/index.vue]
+const user = ref(null)
+
+const fetchMe = async () => {
+   user.value = await $fetch('/api/me')
+}
+```
+
+Be careful, if you want to call this route on SSR, please read this [section](https://nuxt.com/docs/getting-started/data-fetching#isomorphic-fetch-and-fetch), you must send your browser cookies including your supabase token.
+
+```ts [pages/index.vue]
+const user = ref(null)
+
+const { data } = await useFetch('/api/me', {
+  headers: useRequestHeaders(['cookie'])
+})
+
+user.value = data
+```
diff --git a/docs/content/4.usage/services/_dir.yml b/docs/content/4.usage/services/_dir.yml
new file mode 100644
index 000000000..817acfc4b
--- /dev/null
+++ b/docs/content/4.usage/services/_dir.yml
@@ -0,0 +1 @@
+title: Server services
\ No newline at end of file
diff --git a/docs/content/5.demo.md b/docs/content/5.demo.md
new file mode 100644
index 000000000..3dd1d1dd6
--- /dev/null
+++ b/docs/content/5.demo.md
@@ -0,0 +1,23 @@
+---
+title: Demo
+icon: heroicons:computer-desktop-20-solid
+description: Demonstration of using Supabase with Nuxt.
+---
+
+# Demo
+
+Demonstration of using Supabase with Nuxt.
+
+[![Supabase demo with Nuxt 3](https://user-images.githubusercontent.com/904724/160422461-8f87500a-8dec-4413-86b2-ba04e1b2d17b.png)](https://n3-supabase.netlify.app)
+
+## Live demo
+
+You can play with the demo on [n3-supabase.netlify.app](https://n3-supabase.netlify.app)
+
+## Running locally
+
+Follow the instruction in the [demo Readme](https://github.com/nuxt-community/supabase-module/tree/main/demo).
+
+## Source code
+
+The source code is available on Github in the [demo/ directory](https://github.com/nuxt-community/supabase-module/tree/main/demo).
\ No newline at end of file
diff --git a/docs/content/6.changelog.md b/docs/content/6.changelog.md
new file mode 100644
index 000000000..bcad84b64
--- /dev/null
+++ b/docs/content/6.changelog.md
@@ -0,0 +1,10 @@
+---
+title: Changelog
+icon: heroicons:bookmark
+description: Discover the latest updates of the Supabase Module
+---
+
+# Changelog
+Discover the lastest updates.
+
+:releases
diff --git a/docs/content/7.roadmap.md b/docs/content/7.roadmap.md
new file mode 100644
index 000000000..863c32c8c
--- /dev/null
+++ b/docs/content/7.roadmap.md
@@ -0,0 +1,7 @@
+---
+title: Roadmap
+description: Discover our kaban board for the next release of the Supabase module.
+icon: heroicons:map
+---
+
+:volta-board{token="eyJzdGF0dXNlcyI6WyJ0cmlhZ2UiLCJiYWNrbG9nIiwidG9kbyIsImluX3Byb2dyZXNzIiwiaW5fcmV2aWV3IiwiZG9uZSIsInJlbGVhc2VkIiwiY2FuY2VsbGVkIl0sImZpbHRlcnMiOnt9LCJvd25lciI6Im51eHQtbW9kdWxlcyIsIm5hbWUiOiJzdXBhYmFzZSJ9"}
diff --git a/docs/content/index.yml b/docs/content/index.yml
new file mode 100644
index 000000000..6c1bfc46c
--- /dev/null
+++ b/docs/content/index.yml
@@ -0,0 +1,54 @@
+title: 'Nuxt Supabase - Home'
+description: 'A supa simple wrapper around supabase-js to enable usage and integration within Nuxt.'
+navigation: false
+hero:
+  title: 'Nuxt [Supabase]{.text-primary}'
+  description: 'A supa simple wrapper around supabase-js to enable usage and integration within Nuxt.'
+  orientation: horizontal
+  links:
+    - label: 'Get started'
+      icon: 'i-heroicons-rocket-launch'
+      to: '/get-started'
+      size: lg
+    - label: 'Star on github'
+      icon: 'i-heroicons-star'
+      color: 'white'
+      to: 'https://github.com/nuxt-modules/supabase'
+      target: '_blank'
+      size: lg
+  code: |
+    ```ts
+      const supabase = useSupabaseClient()
+      const email = ref('')
+
+      const signInWithOtp = async () => {
+        await supabase.auth.signInWithOtp({
+          email: email.value,
+        })
+      }
+    ```
+features:
+  title: 'Shipped with many features'
+  items:
+    - title: 'Nuxt 3 ready'
+      icon: 'i-simple-icons-nuxtdotjs'
+      to: 'https://nuxt.com'
+      target: '_blank'
+    - title: 'Vue 3 composables'
+      icon: 'i-simple-icons-vuedotjs'
+      to: 'https://vuejs.com'
+      target: '_blank'
+    - title: 'Supabase-js V2'
+      icon: 'i-simple-icons-supabase'
+      to: 'https://supabase.com'
+      target: '_blank'
+    - title: 'Usage in API server routes'
+      icon: 'i-heroicons-server'
+      to: 'usage/services/serversupabaseclient'
+    - title: 'Authentication support'
+      icon: 'i-heroicons-key'
+      to: '/authentication'
+    - title: 'TypeScript support'
+      icon: 'i-simple-icons-typescript'
+      to: 'https://www.typescriptlang.org'
+      target: '_blank'
\ No newline at end of file
diff --git a/docs/error.vue b/docs/error.vue
new file mode 100644
index 000000000..af9aa7346
--- /dev/null
+++ b/docs/error.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+
+useSeoMeta({
+  title: 'Page not found',
+  description: 'We are sorry but this page could not be found.'
+})
+
+defineProps<{
+  error: NuxtError
+}>()
+
+useHead({
+  htmlAttrs: {
+    lang: 'en'
+  }
+})
+
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
+const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
+  default: () => [],
+  server: false,
+})
+
+provide('navigation', navigation)
+</script>
+
+<template>
+  <div>
+    <Header />
+
+    <UMain>
+      <UContainer>
+        <UPage>
+          <UPageError :error="error" />
+        </UPage>
+      </UContainer>
+    </UMain>
+
+    <Footer />
+
+    <ClientOnly>
+      <LazyUDocsSearch :files="files" :navigation="navigation" />
+    </ClientOnly>
+
+    <UNotifications />
+  </div>
+</template>
diff --git a/docs/layouts/docs.vue b/docs/layouts/docs.vue
new file mode 100644
index 000000000..6ceed89a7
--- /dev/null
+++ b/docs/layouts/docs.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content/dist/runtime/types'
+
+const navigation = inject<Ref<NavItem[]>>('navigation')
+</script>
+
+<template>
+  <UMain>
+    <UContainer>
+      <UPage>
+        <template #left>
+          <UAside>
+            <UNavigationTree :links="mapContentNavigation(navigation)" />
+          </UAside>
+        </template>
+
+        <slot />
+      </UPage>
+    </UContainer>
+  </UMain>
+</template>