Merge pull request #2369 from arashsheyda/feat/guides-nuxt

docs: add Nuxt to guides

content/docs/get-started-with-neon/frameworks.md

@@ -21,6 +21,8 @@ updatedOn: '2024-11-03T11:19:09.436Z'
 
 <a href="/docs/guides/laravel" title="Laravel" description="Connect a Laravel application to Neon" icon="laravel"></a>
 
+<a href="/docs/guides/nuxt" title="Nuxt" description="Connect a Nuxt application to Neon" icon="nuxt"></a>
+
 <a href="/docs/guides/oauth-integration" title="OAuth" description="Integrate with Neon using OAuth" icon="oauth"></a>
 
 <a href="/docs/guides/phoenix" title="Phoenix" description="Connect a Phoenix site or app to Neon" icon="phoenix"></a>

content/docs/guides/nuxt.md

@@ -0,0 +1,83 @@
+---
+title: Connect Nuxt to Postgres on Neon
+subtitle: Learn how to make server-side queries to Postgres using Nitro API
+  routes
+enableTableOfContents: true
+tag: new
+updatedOn: '2024-10-16T12:17:44.852Z'
+---
+
+
+[Nuxt](https://nuxt.com/) is an open-source full-stack meta framework that enables Vue-based web applications. This topic describes how to connect a Nuxt application to a Postgres database on Neon.
+
+To create a Neon project and access it from a Next.js application:
+
+1. [Create a Neon project](#create-a-neon-project)
+2. [Create a Nuxt project and add dependencies](#create-a-nuxt-project-and-add-dependencies)
+3. [Configure a Postgres client](#configure-the-postgres-client)
+4. [Run the app](#run-the-app)
+
+## Create a Neon project
+
+If you do not have one already, create a Neon project. Save your connection details including your password. They are required when defining connection settings.
+
+1. Navigate to the [Projects](https://console.neon.tech/app/projects) page in the Neon Console.
+2. Click **New Project**.
+3. Specify your project settings and click **Create Project**.
+
+## Create a Nuxt project and add dependencies
+
+1. Create a Nuxt project if you do not have one. For instructions, see [Create a Nuxt Project](https://nuxt.com/docs/getting-started/installation#new-project), in the Nuxt documentation.
+
+2. Add project dependencies using one of the following commands:
+
+   <CodeTabs reverse={true} labels={["node-postgres", "postgres.js", "Neon serverless driver"]}>
+
+   ```shell
+   npm install pg
+   ```
+
+   ```shell
+   npm install postgres
+   ```
+
+   ```shell
+   npm install @neondatabase/serverless
+   ```
+
+   </CodeTabs>
+
+## Store your Neon credentials
+
+Add a `.env` file to your project directory and add your Neon connection string to it. You can find the connection string for your database in the **Connection Details** widget on the Neon **Dashboard**. For more information, see [Connect from any application](/docs/connect/connect-from-any-app).
+
+```shell shouldWrap
+DATABASE_URL="postgresql://<user>:<password>@<endpoint_hostname>.neon.tech:<port>/<dbname>?sslmode=require"
+```
+
+## Configure the Postgres client
+
+
+> Will add the content once https://github.com/neondatabase/examples/pull/30 is merged
+
+
+## Run the app
+
+When you run `npm run dev` you can expect to see the following on [localhost:3000](localhost:3000):
+
+```shell shouldWrap
+PostgreSQL 16.0 on x86_64-pc-linux-gnu, compiled by gcc (Debian 10.2.1-6) 10.2.1 20210110, 64-bit
+```
+
+## Source code
+
+You can find the source code for the applications described in this guide on GitHub.
+
+<DetailIconCards>
+
+<a href="https://github.com/neondatabase/examples/tree/main/with-nuxt" description="Get started with Nuxt and Neon" icon="github">Get started with Nuxt and Neon</a>
+
+</DetailIconCards>
+
+<NeedHelp/>
+

content/docs/introduction.md

@@ -31,9 +31,11 @@ Neon is a serverless Postgres platform designed to help you build reliable and s
 
 <a href="/docs/guides/node" title="Node.js" description="Quickly add authentication and user management to your Node.js application" icon="node-js"></a>
 
+<a href="/docs/serverless/serverless-driver" title="Neon" description="Connect with the Neon serverless driver" icon="neon"></a>
+
 <a href="/docs/guides/nextjs" title="Next.js" description="Connect a Next.js application to Neon" icon="next-js"></a>
 
-<a href="/docs/serverless/serverless-driver" title="Neon" description="Connect with the Neon serverless driver" icon="neon"></a>
+<a href="/docs/guides/nuxt" title="Nuxt" description="Connect a Nuxt application to Neon" icon="nuxt"></a>
 
 <a href="/docs/guides/astro" title="Astro" description="Connect an Astro site or app to Neon" icon="astro"></a>
 
@@ -47,10 +49,10 @@ Neon is a serverless Postgres platform designed to help you build reliable and s
 
 <a href="/docs/guides/laravel" title="Laravel" description="Connect from Laravel to Neon" icon="laravel"></a>
 
-<a href="/docs/guides/python" title="Python" description="Connect a Python application to Neon" icon="python"></a>
-
 <a href="/docs/guides/prisma" title="Prisma" description="Learn how to connect from Prisma ORM to your Neon Postgres database" icon="prisma"></a>
 
+<a href="/docs/guides/python" title="Python" description="Connect a Python application to Neon" icon="python"></a>
+
 <a href="/docs/guides/quarkus-jdbc" title="Quarkus" description="Connect Quarkus (JDBC) to Neon" icon="quarkus"></a>
 
 <a href="/docs/guides/quarkus-reactive" title="Quarkus" description="Connect Quarkus (Reactive) to Neon" icon="quarkus"></a>

content/docs/sidebar.yaml

@@ -59,6 +59,9 @@
               slug: guides/nestjs
             - title: Next.js
               slug: guides/nextjs
+            - title: Nuxt
+              slug: guides/nuxt
+              tag: new
             - title: Node.js
               slug: guides/node
             - title: Quarkus (JDBC)
@@ -384,6 +387,9 @@
           slug: guides/nextjs
         - title: Node.js
           slug: guides/node
+        - title: Nuxt
+          slug: guides/nuxt
+          tag: new
         - title: Phoenix
           slug: guides/phoenix
         - title: Quarkus (JDBC)