mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 23:29:08 +03:00
Charis
2709fa4a3e
Partials are currently defined via MDX includes. This PR switches to pre-compile-time partials, which have a new syntax: ``` <$Partial path="path/to/file.mdx" /> ``` ## Rationale This produces two improvements: 1. Partial substitution can occur in pipelines that don't use MDX compilation. For example, we can now do partial substitution before building the search index, so partial content will also be indexed. 2. After the App Router migration, the MDXProviders should've been deprecated, but were kept around for the sole reason of making partials work, and leading to us shipping unnecessary client-side code. We get a minor decrease in overall client bundle size (5.74 MB to 5.6 MB) by getting rid of the Providers. ## Breaking changes Besides the change to partial syntax, the arguments are also less powerful than before because we are doing string substitution and don't have the full power of JS. Defining string variables is still possible (documented in the Contributing guide), and since that's all we actually do in practice, this shouldn't be too cumbersome. There is always the escape hatch of making a custom component for more complex content reuse cases.
117 lines
2.8 KiB
Plaintext
117 lines
2.8 KiB
Plaintext
---
|
|
title: 'Use Supabase with Nuxt'
|
|
subtitle: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Nuxt app.'
|
|
breadcrumb: 'Framework Quickstarts'
|
|
hideToc: true
|
|
---
|
|
|
|
<StepHikeCompact>
|
|
|
|
<StepHikeCompact.Step step={1}>
|
|
|
|
<$Partial path="quickstart_db_setup.mdx" />
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={2}>
|
|
|
|
<StepHikeCompact.Details title="Create a Nuxt app">
|
|
|
|
Create a Nuxt app using the `npx nuxi` command.
|
|
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
```bash Terminal
|
|
npx nuxi@latest init my-app
|
|
```
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={3}>
|
|
<StepHikeCompact.Details title="Install the Supabase client library">
|
|
|
|
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 Terminal
|
|
cd my-app && npm install @supabase/supabase-js
|
|
```
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={4}>
|
|
<StepHikeCompact.Details title="Query data from the app">
|
|
|
|
In `app.vue`, create a Supabase client using your project URL and public API (anon) key:
|
|
|
|
<ProjectConfigVariables variable="url" />
|
|
<ProjectConfigVariables variable="anonKey" />
|
|
|
|
Replace the existing content in your `app.vue` file with the following code.
|
|
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
```vue app.vue
|
|
<script setup>
|
|
import { createClient } from '@supabase/supabase-js'
|
|
const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')
|
|
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>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={5}>
|
|
<StepHikeCompact.Details title="Start the app">
|
|
|
|
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 Terminal
|
|
npm run dev
|
|
```
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
</StepHikeCompact>
|
|
|
|
<Admonition type="tip">
|
|
|
|
The community-maintained [@nuxtjs/supabase](https://supabase.nuxtjs.org/) module provides an alternate DX for working with Supabase in Nuxt.
|
|
|
|
</Admonition>
|