Use Supabase with Nuxt

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

<StepHikeCompact.Details title="Create a Nuxt app">

- Create a Nuxt app using the `npx nuxi` command.

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

</StepHikeCompact.Details>

<StepHikeCompact.Code>

  ```bash name=Terminal
  npx nuxi@latest init my-app
  ```

</StepHikeCompact.Code>

  The fastest way to get started is to use the `supabase-js` client library which provides a convenient interface for working with Supabase from a Nuxt app.

  Navigate to the Nuxt app and install `supabase-js`.

</StepHikeCompact.Details>

<StepHikeCompact.Code>

  ```bash name=Terminal
  cd my-app && npm install @supabase/supabase-js
  ```

</StepHikeCompact.Code>

<StepHikeCompact.Step step={4}>
<StepHikeCompact.Details title="Declare Supabase Environment Variables">

Create a `.env` file and populate with your Supabase connection variables:

<ProjectConfigVariables variable="url" />
<ProjectConfigVariables variable="publishable" />


</StepHikeCompact.Details>

<StepHikeCompact.Code>

  <$CodeTabs>

    ```text name=.env.local
    SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
    SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_SUPABASE_PUBLISHABLE_KEY>
    ```

    ```ts name=nuxt.config.tsx
    export default defineNuxtConfig({
      runtimeConfig: {
        public: {
          supabaseUrl: process.env.SUPABASE_URL,
          supabasePublishableKey: process.env.SUPABASE_PUBLISHABLE_KEY,
        },
      },
    });
    ```

  </$CodeTabs>
  <$Partial path="api_settings_steps.mdx" variables={{ "framework": "nuxt", "tab": "frameworks" }} />

</StepHikeCompact.Code>

In `app.vue`, create a Supabase client using your config values and replace the existing content with the following code.

</StepHikeCompact.Details>

<StepHikeCompact.Code>

  ```vue name=app.vue
  <script setup>
  import { createClient } from '@supabase/supabase-js'
  const config = useRuntimeConfig()
  const supabase = createClient(config.public.supabaseUrl, config.public.supabasePublishableKey)
  const instruments = ref([])

  async function getInstruments() {
    const { data } = await supabase.from('instruments').select()
    instruments.value = data
  }

  onMounted(() => {
    getInstruments()
  })
  </script>

  <template>
    <ul>
      <li v-for="instrument in instruments" :key="instrument.id">{{ instrument.name }}</li>
    </ul>
  </template>
  ```

</StepHikeCompact.Code>

Start the app, navigate to http://localhost:3000 in the browser, open the browser console, and you should see the list of instruments.

</StepHikeCompact.Details>

<StepHikeCompact.Code>

  ```bash name=Terminal
  npm run dev
  ```

</StepHikeCompact.Code>