diff --git a/apps/docs/pages/guides/getting-started/quickstarts/nuxtjs.mdx b/apps/docs/pages/guides/getting-started/quickstarts/nuxtjs.mdx
index f9259185926..60c3a3ee0f5 100644
--- a/apps/docs/pages/guides/getting-started/quickstarts/nuxtjs.mdx
+++ b/apps/docs/pages/guides/getting-started/quickstarts/nuxtjs.mdx
@@ -2,79 +2,54 @@ import Layout from '~/layouts/DefaultGuideLayout'
 import StepHikeCompact from '~/components/StepHikeCompact'
 
 export const meta = {
-  title: 'Install Supabase with Nuxt.js',
-  subtitle: 'Setting up supabase-js client library in a Nuxt.js app.',
+  title: 'Use Supabase with NuxtJS',
+  subtitle:
+    'Learn how to create a Supabase project, add some sample data to your database, and query the data from a NuxtJS app.',
+  breadcrumb: 'Framework Quickstarts',
 }
 
-The fastest way to get started with supabase and Nuxt.js is to use the supabase-js client library, which provides a convenient interface for working with supabase from a Nuxt.js app. To use supabase-js with Nuxt.js, you can follow these steps:
-
 <StepHikeCompact>
 
   <StepHikeCompact.Step step={1}>
+    <StepHikeCompact.Details title="Set up a Supabase project with sample data">
 
-    <StepHikeCompact.Details title="Create a Nuxt.js app">
+    [Create a new project](https://app.supabase.com) in the Supabase Dashboard.
 
-    Start by creating a new Nuxt.js project if you do not have one set up:
+    After your project is ready, create a table in your Supabase database using the [SQL Editor](https://app.supabase.com/project/_/sql) in the Dashboard. Use the following SQL statement to create a `countries` table with some sample data.
 
     </StepHikeCompact.Details>
 
     <StepHikeCompact.Code>
 
-      ```bash Terminal
-        npx create-nuxt-app my-project
-        cd my-project
-      ```
+     ```sql Editor
+      -- Create the table
+      create table countries (
+        id serial primary key,
+        name varchar(255) not null
+      );
+
+      -- Insert some sample data into the table
+      insert into countries (name) values ('United States');
+      insert into countries (name) values ('Canada');
+      insert into countries (name) values ('Mexico');
+      ````
 
     </StepHikeCompact.Code>
 
   </StepHikeCompact.Step>
 
   <StepHikeCompact.Step step={2}>
-    <StepHikeCompact.Details title="Install Supabase client library">
 
-    To install the `@supabase/supabase-js` package, you will need to run the following command:
+    <StepHikeCompact.Details title="Create a NuxtJS app">
+
+    Create a Nuxt.js app using the `npx nuxi` command.
 
     </StepHikeCompact.Details>
 
     <StepHikeCompact.Code>
 
       ```bash Terminal
-      npm install @supabase/supabase-js
-      ```
-
-    </StepHikeCompact.Code>
-
-  </StepHikeCompact.Step>
-
-  <StepHikeCompact.Step step={2}>
-    <StepHikeCompact.Details title="Install Supabase client library">
-
-    And finally we want to save the environment variables in a .env. All we need are the API URL and the anon key that you copied earlier.
-
-    </StepHikeCompact.Details>
-
-    <StepHikeCompact.Code>
-
-      ```text .env
-      SUPABASE_URL="YOUR_SUPABASE_URL"
-      SUPABASE_KEY="YOUR_SUPABASE_ANON_KEY"
-      ```
-
-    </StepHikeCompact.Code>
-
-  </StepHikeCompact.Step>
-
-  <StepHikeCompact.Step step={2}>
-    <StepHikeCompact.Details title="Install Supabase client library">
-
-    Then let's install the only additional dependency: NuxtSupabase. We only need to import NuxtSupabase as a dev dependency:
-
-    </StepHikeCompact.Details>
-
-    <StepHikeCompact.Code>
-
-      ```bash Terminal
-      npm install @nuxtjs/supabase --save-dev
+      npx nuxi@latest init my-app
       ```
 
     </StepHikeCompact.Code>
@@ -82,34 +57,65 @@ The fastest way to get started with supabase and Nuxt.js is to use the supabase-
   </StepHikeCompact.Step>
 
   <StepHikeCompact.Step step={3}>
-    <StepHikeCompact.Details title="Create some sample data">
+    <StepHikeCompact.Details title="Install the Supabase client library">
 
-    To create a table of countries with their timezones, you will first need to create a table in your Supabase database using SQL. You can use the following SQL statement to create a table called countries:
+      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 NuxtJS app.
+
+      Navigate to the NuxtJS app and install `supabase-js`.
 
     </StepHikeCompact.Details>
 
     <StepHikeCompact.Code>
 
-     ```sql SQL_EDITOR
-      -- this creates the table
-      CREATE TABLE countries (
-      id SERIAL PRIMARY KEY,
-      name VARCHAR(255) NOT NULL
-      );
-      -- insert some sample data into new table
-      INSERT INTO countries (name) VALUES ('United States');
-      INSERT INTO countries (name) VALUES ('Canada');
-      INSERT INTO countries (name) VALUES ('Mexico');
-      ````
+      ```bash Terminal
+      cd my-app && npm install @supabase/supabase-js
+      ```
 
     </StepHikeCompact.Code>
 
   </StepHikeCompact.Step>
 
   <StepHikeCompact.Step step={4}>
-    <StepHikeCompact.Details title="Start your app">
+    <StepHikeCompact.Details title="Query data from the app">
 
-    Start the dev server by running the following commands:
+    In `src/App.vue`, create a Supabase client using your [Project URL and public API (anon) key](https://app.supabase.com/project/_/settings/api).
+
+    Replace the existing content in your `src/App.vue` file with the following code.
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+      ```vue src/App.vue
+      <script setup>
+      const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')
+      const countries = ref([])
+
+      async function getCountries() {
+        const { data } = await supabase.from('countries').select()
+        countries.value = data
+      }
+
+      onMounted(() => {
+        getCountries()
+      })
+      </script>
+
+      <template>
+        <ul>
+          <li v-for="country in countries" :key="country.id">{{ country.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 countries.
 
     </StepHikeCompact.Details>
 
@@ -122,26 +128,6 @@ The fastest way to get started with supabase and Nuxt.js is to use the supabase-
     </StepHikeCompact.Code>
 
   </StepHikeCompact.Step>
-
-  <StepHikeCompact.Step step={5}>
-    <StepHikeCompact.Details title="Create client in app">
-
-    Next, in your Nuxt.js app, create a file called supabase-client.js and add the following code to initialize the Supabase client and set your project's credentials:
-
-    </StepHikeCompact.Details>
-
-    <StepHikeCompact.Code>
-
-      ```js lib/supabaseClient.js
-        import { createClient } from '@supabase/supabase-js'
-
-        const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')
-      ```
-
-    </StepHikeCompact.Code>
-
-  </StepHikeCompact.Step>
-
 </StepHikeCompact>
 
 export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />