feat: nuxt quickstart docs

npm-packages/docs/docs/client/nuxt.md

@@ -0,0 +1,25 @@
+---
+title: "Nuxt"
+sidebar_position: 250
+---
+
+The community-maintained
+[`@crbroughton/nuxt-convex` npm package](https://www.npmjs.com/package/@crbroughton/nuxt-convex)
+provides deep integration of Convex with the Nuxt ecosystem.
+
+See the [Nuxt Quickstart](/quickstart/nuxt.mdx) to get started or the
+[convex-nuxt GitHub page](https://github.com/chris-visser/convex-nuxt)
+for more documentation.
+
+<Admonition type="info">
+
+The [`@crbroughton/nuxt-convex` library](https://www.npmjs.com/package/@crbroughton/nuxt-convex)
+is community-maintained. Thank you to the maintainer
+[Chris Visser](https://github.com/chris-visser) for his work on this project!
+
+You're welcome to ask questions about the library on the
+[Convex Discord](https://convex.dev/community) but opening a
+[convex-nuxt GitHub](https://github.com/chris-visser/convex-nuxt)
+issue is a better way to request a new feature or report a bug.
+
+</Admonition>

npm-packages/docs/docs/quickstart/nuxt.mdx

@@ -0,0 +1,184 @@
+---
+title: Nuxt Quickstart
+sidebar_label: Nuxt
+description: "Add Convex to a Nuxt project"
+hide_table_of_contents: true
+sidebar_position: 325
+---
+
+import sampleData from "!!raw-loader!@site/../private-demos/quickstarts/vue/sampleData.jsonl";
+import main from "!!raw-loader!@site/../private-demos/quickstarts/vue/src/main.ts";
+import tasks from "!!raw-loader!@site/../private-demos/quickstarts/vue/convex/tasks.ts";
+import App from "!!raw-loader!@site/../private-demos/quickstarts/vue/src/App.vue";
+
+Learn how to query data from Convex in a Nuxt app.
+
+This quickstart guide uses a [community-maintained](/client/nuxt.md) Nuxt client
+for Convex.
+
+<StepByStep>
+  <Step title="Create a Nuxt application">
+    Create a Nuxt application using the `npm create nuxt@latest my-nuxt-app` command.
+
+    Convex will work with any of the official modules but to follow this quickstart skip installing them for now.
+
+    <br></br>
+
+    ```sh
+    npm create nuxt@latest my-nuxt-app
+    ```
+
+  </Step>
+
+  <Step title="Install the Convex library">
+    To get started, install the `convex` package.
+
+    ```sh
+    cd my-nuxt-app && npm install convex
+    ```
+
+  </Step>
+
+  <Step title="Set up a Convex dev deployment">
+    Next, run `npx convex dev`. This
+    will prompt you to log in with GitHub,
+    create a project, and save your production and deployment URLs.
+
+    It will also create a `convex/` folder for you
+    to write your backend API functions in. The `dev` command
+    will then continue running to sync your functions
+    with your dev deployment in the cloud.
+
+
+    ```sh
+    npx convex dev
+    ```
+
+  </Step>
+
+  <Step title="Create sample data for your database">
+    In a new terminal window, create a `sampleData.jsonl`
+    file with some sample data.
+
+    <Snippet
+      source={sampleData}
+      title="sampleData.jsonl"
+    />
+
+  </Step>
+
+  <Step title="Add the sample data to your database">
+    Now that your project is ready, add a `tasks` table
+    with the sample data into your Convex database with
+    the `import` command.
+
+    ```
+    npx convex import --table tasks sampleData.jsonl
+    ```
+
+  </Step>
+
+  <Step title="(optional) Define a schema">
+    Add a new file `schema.ts` in the `convex/` folder
+    with a description of your data.
+
+    This will declare the types of your data for optional
+    typechecking with TypeScript, and it will be also
+    enforced at runtime.
+
+    <br></br>
+
+    ```ts noDialect title="convex/schema.ts"
+    import { defineSchema, defineTable } from "convex/server";
+    import { v } from "convex/values";
+
+    export default defineSchema({
+      tasks: defineTable({
+        text: v.string(),
+        isCompleted: v.boolean(),
+      }),
+    });
+    ```
+
+  </Step>
+
+  <Step title="Expose a database query">
+    Add a new file `tasks.ts` in the `convex/` folder
+    with a query function that loads the data.
+
+    Exporting a query function from this file
+    declares an API function named after the file
+    and the export name, `api.tasks.get`.
+
+    <Snippet
+      source={tasks}
+      title="convex/tasks.ts"
+    />
+
+  </Step>
+
+  <Step title="Install the Nuxt module">
+    Install the module to your Nuxt application with one command:
+
+    ```sh
+    npx nuxi module add convex-nuxt
+    ```
+
+  </Step>
+
+  <Step title="Add the Convex URL">
+    Add the Convex URL to your `nuxt.config.ts` file.
+
+    ```ts noDialect title="nuxt.config.ts"
+    export default defineNuxtConfig({
+      modules: ['convex-nuxt'],
+      convex: {
+        url: process.env.CONVEX_URL,
+      },
+    });
+    ```
+
+  </Step>
+
+  <Step title="Display the data in your app">
+    In `app.vue` use `useQuery` to subscribe your `api.tasks.get`
+    API function.
+
+    ```vue noDialect title="app.vue"
+    <script setup lang="ts">
+    import { api } from "@/convex/_generated/api";
+
+    const { data: tasks } = useConvexQuery(api.tasks.get);
+    </script>
+
+    <template>
+      <div>
+        <h1>Tasks</h1>
+        <ul v-if="tasks">
+          <li v-for="task in tasks" :key="task._id">
+            <input :id="task._id" type="checkbox" :checked="task.isCompleted" />
+            <label :for="task._id">{{ task.text }}</label>
+          </li>
+        </ul>
+      </div>
+    </template>
+    ```
+
+  </Step>
+
+  <Step title="Start the app">
+    Start the app, open [http://localhost:3000](http://localhost:3000) in a browser,
+    and see the list of tasks.
+
+    ```sh
+    npm run dev
+    ```
+
+  </Step>
+
+</StepByStep>
+
+For more examples, take a look at the [Nuxt Convex module repository](https://github.com/chris-visser/convex-nuxt).
+
+See the complete
+[Nuxt npm package documentation](https://www.npmjs.com/package/@crbroughton/nuxt-convex).

npm-packages/docs/sidebars.js

@@ -219,6 +219,12 @@ const sidebars = {
       label: "Vue",
       className: "convex-sidebar-vue",
     },
+    {
+      type: "doc",
+      id: "client/nuxt",
+      label: "Nuxt",
+      className: "convex-sidebar-nuxt",
+    },
     {
       type: "doc",
       id: "client/svelte",

npm-packages/docs/src/QuickstartsList.tsx

@@ -15,6 +15,7 @@ import RemixLogo from "@site/static/img/remix-logo.svg";
 import RustLogo from "@site/static/img/rust-logo.svg";
 import SvelteLogo from "@site/static/img/svelte-logo.svg";
 import VueLogo from "@site/static/img/vue-logo.svg";
+import NuxtLogo from "@site/static/img/nuxt-logo.svg";
 import AndroidLogo from "@site/static/img/android-logo.svg";
 import SwiftLogo from "@site/static/img/swift-logo.svg";
 import TanStackLogo from "@site/static/img/tanstack-logo.svg";
@@ -137,6 +138,12 @@ export function QuickFrameworksList() {
           docId: "quickstart/vue",
           label: "Vue",
         },
+        {
+          icon: <NuxtLogo height={40} />,
+          href: "/quickstart/nuxt",
+          docId: "quickstart/nuxt",
+          label: "Nuxt",
+        },
         {
           icon: <SvelteLogo height={40} />,
           href: "/quickstart/svelte",

npm-packages/docs/src/css/custom.css

@@ -864,11 +864,16 @@ html[data-theme="dark"] .convex-menu-header {
   --convex-icon: url("../../static/img/sidebar-icons/vue.svg");
 }
 
+.convex-sidebar-nuxt {
+  --convex-icon: url("../../static/img/sidebar-icons/nuxt.svg");
+}
+
 .convex-sidebar-open-api {
   --convex-icon: url("../../static/img/sidebar-icons/open-api.svg");
 }
 
-.convex-sidebar-vue a:after {
+.convex-sidebar-vue a:after,
+.convex-sidebar-nuxt a:after {
   font-weight: 400;
   font-size: 0.6em;
   margin-left: 1em;
@@ -879,7 +884,8 @@ html[data-theme="dark"] .convex-menu-header {
   float: right;
 }
 
-.convex-sidebar-vue .menu__link--active:after {
+.convex-sidebar-vue .menu__link--active:after,
+.convex-sidebar-nuxt .menu__link--active:after {
   /* shift left to compensate for text to the left being bold */
   margin-left: 0.85em;
 }