From 87f7a0c0b015a8fd315d70833e14e2f1999571ac Mon Sep 17 00:00:00 2001 From: Jayde Boardman Date: Sun, 22 Jun 2025 16:02:13 +1000 Subject: [PATCH 1/4] feat: nuxt quickstart docs --- npm-packages/docs/docs/client/nuxt.md | 25 +++ npm-packages/docs/docs/quickstart/nuxt.mdx | 185 ++++++++++++++++++ npm-packages/docs/sidebars.js | 6 + npm-packages/docs/src/QuickstartsList.tsx | 7 + npm-packages/docs/src/css/custom.css | 35 ++-- npm-packages/docs/static/img/nuxt-logo.svg | 5 + .../docs/static/img/sidebar-icons/nuxt.svg | 6 + 7 files changed, 255 insertions(+), 14 deletions(-) create mode 100644 npm-packages/docs/docs/client/nuxt.md create mode 100644 npm-packages/docs/docs/quickstart/nuxt.mdx create mode 100644 npm-packages/docs/static/img/nuxt-logo.svg create mode 100644 npm-packages/docs/static/img/sidebar-icons/nuxt.svg diff --git a/npm-packages/docs/docs/client/nuxt.md b/npm-packages/docs/docs/client/nuxt.md new file mode 100644 index 000000000..f30346143 --- /dev/null +++ b/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. + + + +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. + + diff --git a/npm-packages/docs/docs/quickstart/nuxt.mdx b/npm-packages/docs/docs/quickstart/nuxt.mdx new file mode 100644 index 000000000..001b9ed84 --- /dev/null +++ b/npm-packages/docs/docs/quickstart/nuxt.mdx @@ -0,0 +1,185 @@ +--- +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. + + + + 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. + +

+ + ```sh + npm create nuxt@latest my-nuxt-app + ``` + + + + + To get started, install the `convex` package. + + ```sh + cd my-nuxt-app && npm install convex + ``` + + + + + 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 + ``` + + + + + In a new terminal window, create a `sampleData.jsonl` + file with some sample data. + + + + + + + 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 + ``` + + + + + 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. + +

+ + ```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(), + }), + }); + ``` + + + + + 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`. + + + + + + + Install the module to your Nuxt application with one command: + + ```sh + npx nuxi module add convex-nuxt + ``` + + + + + 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, + }, + }); + ``` + + + + In `app.vue` use `useQuery` to subscribe your `api.tasks.get` + API function. + + ```vue noDialect title="app.vue" + + + + ``` + + + + + Start the app, open [http://localhost:3000](http://localhost:3000) in a browser, + and see the list of tasks. + + ```sh + npm run dev + ``` + + + + + +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). + + diff --git a/npm-packages/docs/sidebars.js b/npm-packages/docs/sidebars.js index 6437a6786..2a2e81096 100644 --- a/npm-packages/docs/sidebars.js +++ b/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", diff --git a/npm-packages/docs/src/QuickstartsList.tsx b/npm-packages/docs/src/QuickstartsList.tsx index c49c7633e..3a0ed67a7 100644 --- a/npm-packages/docs/src/QuickstartsList.tsx +++ b/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: , + href: "/quickstart/nuxt", + docId: "quickstart/nuxt", + label: "Nuxt", + }, { icon: , href: "/quickstart/svelte", diff --git a/npm-packages/docs/src/css/custom.css b/npm-packages/docs/src/css/custom.css index 8a4ef2eff..1c6c4d9c9 100644 --- a/npm-packages/docs/src/css/custom.css +++ b/npm-packages/docs/src/css/custom.css @@ -85,10 +85,10 @@ --ifm-code-font-size: 95%; --ifm-font-weight-semibold: 400; - --ifm-font-family-base: "Inter", system-ui, -apple-system, Segoe UI, Roboto, - Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", - Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", - "Segoe UI Symbol"; + --ifm-font-family-base: + "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, + Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, + sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* Footer */ --ifm-footer-background-color: var(--ifm-background-color); @@ -593,9 +593,9 @@ a.pagination-nav__link .pagination-nav__label:hover { .markdown h1:first-child { --ifm-h1-font-size: 2rem; margin-top: 1.25rem; - --ifm-heading-font-family: "GT America", system-ui, "Segoe UI", Roboto, - Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", - "Segoe UI Symbol"; + --ifm-heading-font-family: + "GT America", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: 700; letter-spacing: -0.01em; } @@ -611,9 +611,9 @@ h1, h2, h3, h4 { - --ifm-heading-font-family: "GT America", system-ui, "Segoe UI", Roboto, - Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", - "Segoe UI Symbol"; + --ifm-heading-font-family: + "GT America", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: 700; letter-spacing: -0.01em; } @@ -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; } @@ -1328,8 +1334,9 @@ html[data-theme="dark"] a.card.convex-invert-icon svg { } .StackPosts-title { - font-family: "GT America", system-ui, "Segoe UI", Roboto, Helvetica, Arial, - sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: + "GT America", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; display: flex; flex-direction: row; align-items: center; diff --git a/npm-packages/docs/static/img/nuxt-logo.svg b/npm-packages/docs/static/img/nuxt-logo.svg new file mode 100644 index 000000000..3ef9a89e3 --- /dev/null +++ b/npm-packages/docs/static/img/nuxt-logo.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/npm-packages/docs/static/img/sidebar-icons/nuxt.svg b/npm-packages/docs/static/img/sidebar-icons/nuxt.svg new file mode 100644 index 000000000..b17e4435c --- /dev/null +++ b/npm-packages/docs/static/img/sidebar-icons/nuxt.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file From 3592548b82ef490872bb74f6d227c7a29d0d6c84 Mon Sep 17 00:00:00 2001 From: Jayde Boardman Date: Sun, 22 Jun 2025 16:14:13 +1000 Subject: [PATCH 2/4] chore: prettier formatting & revert css autoformatting --- npm-packages/docs/docs/quickstart/nuxt.mdx | 3 +-- npm-packages/docs/src/css/custom.css | 25 +++++++++++----------- 2 files changed, 13 insertions(+), 15 deletions(-) diff --git a/npm-packages/docs/docs/quickstart/nuxt.mdx b/npm-packages/docs/docs/quickstart/nuxt.mdx index 001b9ed84..4dff47514 100644 --- a/npm-packages/docs/docs/quickstart/nuxt.mdx +++ b/npm-packages/docs/docs/quickstart/nuxt.mdx @@ -137,6 +137,7 @@ for Convex. }, }); ``` + @@ -181,5 +182,3 @@ For more examples, take a look at the [Nuxt Convex module repository](https://gi See the complete [Nuxt npm package documentation](https://www.npmjs.com/package/@crbroughton/nuxt-convex). - - diff --git a/npm-packages/docs/src/css/custom.css b/npm-packages/docs/src/css/custom.css index 1c6c4d9c9..a9b9b5446 100644 --- a/npm-packages/docs/src/css/custom.css +++ b/npm-packages/docs/src/css/custom.css @@ -85,10 +85,10 @@ --ifm-code-font-size: 95%; --ifm-font-weight-semibold: 400; - --ifm-font-family-base: - "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, - Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, - sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + --ifm-font-family-base: "Inter", system-ui, -apple-system, Segoe UI, Roboto, + Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol"; /* Footer */ --ifm-footer-background-color: var(--ifm-background-color); @@ -593,9 +593,9 @@ a.pagination-nav__link .pagination-nav__label:hover { .markdown h1:first-child { --ifm-h1-font-size: 2rem; margin-top: 1.25rem; - --ifm-heading-font-family: - "GT America", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + --ifm-heading-font-family: "GT America", system-ui, "Segoe UI", Roboto, + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol"; font-weight: 700; letter-spacing: -0.01em; } @@ -611,9 +611,9 @@ h1, h2, h3, h4 { - --ifm-heading-font-family: - "GT America", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + --ifm-heading-font-family: "GT America", system-ui, "Segoe UI", Roboto, + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol"; font-weight: 700; letter-spacing: -0.01em; } @@ -1334,9 +1334,8 @@ html[data-theme="dark"] a.card.convex-invert-icon svg { } .StackPosts-title { - font-family: - "GT America", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: "GT America", system-ui, "Segoe UI", Roboto, Helvetica, Arial, + sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; display: flex; flex-direction: row; align-items: center; From 9036d8b057762122226185a8125d2fe447a1c5b4 Mon Sep 17 00:00:00 2001 From: Jayde Boardman Date: Sat, 12 Jul 2025 03:02:32 +1000 Subject: [PATCH 3/4] chore: update docs, update quickstarts repos - Updated Vue quickstart to point to `convex-vue` package instead of `@convex-vue/core` - Updated Vue quickstart repository to use new package - Updated Nuxt quickstart guide to more accurately reflect setup process - Added example Nuxt + Convex application to private-demos/quickstarts --- npm-packages/docs/docs/client/nuxt.md | 4 +- npm-packages/docs/docs/client/vue.md | 10 +- npm-packages/docs/docs/quickstart/nuxt.mdx | 103 +++++++------ npm-packages/docs/docs/quickstart/vue.mdx | 4 +- .../private-demos/quickstarts/nuxt/.gitignore | 24 +++ .../private-demos/quickstarts/nuxt/README.md | 75 +++++++++ .../private-demos/quickstarts/nuxt/app.vue | 17 +++ .../nuxt/convex/_generated/api.d.ts | 36 +++++ .../quickstarts/nuxt/convex/_generated/api.js | 22 +++ .../nuxt/convex/_generated/dataModel.d.ts | 60 ++++++++ .../nuxt/convex/_generated/server.d.ts | 142 ++++++++++++++++++ .../nuxt/convex/_generated/server.js | 89 +++++++++++ .../quickstarts/nuxt/convex/schema.ts | 9 ++ .../quickstarts/nuxt/convex/tasks.ts | 8 + .../quickstarts/nuxt/nuxt.config.ts | 9 ++ .../quickstarts/nuxt/package.json | 19 +++ .../quickstarts/nuxt/public/favicon.ico | Bin 0 -> 4286 bytes .../quickstarts/nuxt/public/robots.txt | 2 + .../quickstarts/nuxt/sampleData.jsonl | 3 + .../quickstarts/nuxt/server/tsconfig.json | 3 + .../quickstarts/nuxt/tsconfig.json | 4 + .../quickstarts/vue/package.json | 7 +- .../private-demos/quickstarts/vue/src/App.vue | 19 +-- .../private-demos/quickstarts/vue/src/main.ts | 18 +-- 24 files changed, 607 insertions(+), 80 deletions(-) create mode 100644 npm-packages/private-demos/quickstarts/nuxt/.gitignore create mode 100644 npm-packages/private-demos/quickstarts/nuxt/README.md create mode 100644 npm-packages/private-demos/quickstarts/nuxt/app.vue create mode 100644 npm-packages/private-demos/quickstarts/nuxt/convex/_generated/api.d.ts create mode 100644 npm-packages/private-demos/quickstarts/nuxt/convex/_generated/api.js create mode 100644 npm-packages/private-demos/quickstarts/nuxt/convex/_generated/dataModel.d.ts create mode 100644 npm-packages/private-demos/quickstarts/nuxt/convex/_generated/server.d.ts create mode 100644 npm-packages/private-demos/quickstarts/nuxt/convex/_generated/server.js create mode 100644 npm-packages/private-demos/quickstarts/nuxt/convex/schema.ts create mode 100644 npm-packages/private-demos/quickstarts/nuxt/convex/tasks.ts create mode 100644 npm-packages/private-demos/quickstarts/nuxt/nuxt.config.ts create mode 100644 npm-packages/private-demos/quickstarts/nuxt/package.json create mode 100644 npm-packages/private-demos/quickstarts/nuxt/public/favicon.ico create mode 100644 npm-packages/private-demos/quickstarts/nuxt/public/robots.txt create mode 100644 npm-packages/private-demos/quickstarts/nuxt/sampleData.jsonl create mode 100644 npm-packages/private-demos/quickstarts/nuxt/server/tsconfig.json create mode 100644 npm-packages/private-demos/quickstarts/nuxt/tsconfig.json diff --git a/npm-packages/docs/docs/client/nuxt.md b/npm-packages/docs/docs/client/nuxt.md index f30346143..a51186189 100644 --- a/npm-packages/docs/docs/client/nuxt.md +++ b/npm-packages/docs/docs/client/nuxt.md @@ -4,7 +4,7 @@ sidebar_position: 250 --- The community-maintained -[`@crbroughton/nuxt-convex` npm package](https://www.npmjs.com/package/@crbroughton/nuxt-convex) +[`@chris-visser/convex-nuxt` npm package](https://www.npmjs.com/package/convex-nuxt) provides deep integration of Convex with the Nuxt ecosystem. See the [Nuxt Quickstart](/quickstart/nuxt.mdx) to get started or the @@ -13,7 +13,7 @@ for more documentation. -The [`@crbroughton/nuxt-convex` library](https://www.npmjs.com/package/@crbroughton/nuxt-convex) +The [`@chris-visser/convex-nuxt` library](https://github.com/chris-visser/convex-nuxt/tree/main) is community-maintained. Thank you to the maintainer [Chris Visser](https://github.com/chris-visser) for his work on this project! diff --git a/npm-packages/docs/docs/client/vue.md b/npm-packages/docs/docs/client/vue.md index 96b205e82..b21608142 100644 --- a/npm-packages/docs/docs/client/vue.md +++ b/npm-packages/docs/docs/client/vue.md @@ -4,22 +4,22 @@ sidebar_position: 250 --- The community-maintained -[`@convex-vue/core` npm package](https://www.npmjs.com/package/@convex-vue/core) +[`convex-vue` npm package](https://www.npmjs.com/package/convex-vue) provides deep integration of Convex with the Vue ecosystem. See the [Vue Quickstart](/quickstart/vue.mdx) to get started or the -[convex-vue GitHub page](https://github.com/Darialyphia/convex-vue/tree/master/packages/convex-vue) +[convex-vue GitHub page](https://github.com/chris-visser/convex-vue) for more documentation. -The [`@convex-vue/core` library](https://www.npmjs.com/package/@convex-vue/core) +The [`convex-vue` library](https://github.com/chris-visser/convex-vue) is community-maintained. Thank you to the maintainer -[Daria](https://github.com/Darialyphia) for his work on this project! +[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-vue GitHub](https://github.com/Darialyphia/convex-vue/tree/master/packages/convex-vue) +[convex-vue GitHub](https://github.com/chris-visser/convex-vue) issue is a better way to request a new feature or report a bug. diff --git a/npm-packages/docs/docs/quickstart/nuxt.mdx b/npm-packages/docs/docs/quickstart/nuxt.mdx index 4dff47514..03dc7f344 100644 --- a/npm-packages/docs/docs/quickstart/nuxt.mdx +++ b/npm-packages/docs/docs/quickstart/nuxt.mdx @@ -7,9 +7,8 @@ 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"; +import tasks from "!!raw-loader!@site/../private-demos/quickstarts/nuxt/convex/tasks.ts"; +import App from "!!raw-loader!@site/../private-demos/quickstarts/nuxt/app.vue"; Learn how to query data from Convex in a Nuxt app. @@ -31,10 +30,28 @@ for Convex. - To get started, install the `convex` package. + To get started, install the `convex` package and the `convex-nuxt` module to your Nuxt application. ```sh - cd my-nuxt-app && npm install convex + cd my-nuxt-app && npm install convex && npx nuxi module add convex-nuxt + ``` + + + + + Add the Convex URL to your `nuxt.config.ts` file. + + ```ts noDialect title="nuxt.config.ts" + export default defineNuxtConfig({ + compatibilityDate: '2025-05-15', + devtools: { enabled: true }, + modules: ['convex-nuxt'], + // highlight-start + convex: { + url: process.env.CONVEX_URL, + }, + // highlight-end + }) ``` @@ -117,51 +134,45 @@ for Convex. - - Install the module to your Nuxt application with one command: + + In `app.vue` use `useQuery` to subscribe your `api.tasks.get` + API function. - ```sh - npx nuxi module add convex-nuxt - ``` + - - 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, + + By default, Convex stores environment variables in `.env.local`, and Nuxt + looks for environment variables in `.env`. + + To use the default `npm run dev` command, + update your `package.json` to use the `--dotenv .env.local` flag. + + ```json title="package.json" + { + "name": "nuxt-app", + "private": true, + "type": "module", + "scripts": { + "build": "nuxt build", + // highlight-next-line + "dev": "nuxt dev --dotenv .env.local", + "generate": "nuxt generate", + "preview": "nuxt preview", + "postinstall": "nuxt prepare" }, - }); - ``` - - - - - In `app.vue` use `useQuery` to subscribe your `api.tasks.get` - API function. - - ```vue noDialect title="app.vue" - - - + "dependencies": { + "convex": "^1.25.2", + "convex-nuxt": "^0.1.3", + "nuxt": "^3.17.6", + "vue": "^3.5.17", + "vue-router": "^4.5.1" + } + } ``` @@ -181,4 +192,4 @@ for Convex. 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). +[Nuxt npm package documentation](https://www.npmjs.com/package/convex-nuxt). diff --git a/npm-packages/docs/docs/quickstart/vue.mdx b/npm-packages/docs/docs/quickstart/vue.mdx index ffa0194f0..961bd19e7 100644 --- a/npm-packages/docs/docs/quickstart/vue.mdx +++ b/npm-packages/docs/docs/quickstart/vue.mdx @@ -36,7 +36,7 @@ for Convex. To get started, install the `convex` package. ```sh - cd my-vue-app && npm install @convex-vue/core @vueuse/core convex + cd my-vue-app && npm install convex-vue ``` @@ -129,4 +129,4 @@ for Convex. See the complete -[Vue npm package documentation](https://www.npmjs.com/package/@convex-vue/core). +[Vue npm package documentation](https://www.npmjs.com/package/convex-vue). diff --git a/npm-packages/private-demos/quickstarts/nuxt/.gitignore b/npm-packages/private-demos/quickstarts/nuxt/.gitignore new file mode 100644 index 000000000..4a7f73a2e --- /dev/null +++ b/npm-packages/private-demos/quickstarts/nuxt/.gitignore @@ -0,0 +1,24 @@ +# Nuxt dev/build outputs +.output +.data +.nuxt +.nitro +.cache +dist + +# Node dependencies +node_modules + +# Logs +logs +*.log + +# Misc +.DS_Store +.fleet +.idea + +# Local env files +.env +.env.* +!.env.example diff --git a/npm-packages/private-demos/quickstarts/nuxt/README.md b/npm-packages/private-demos/quickstarts/nuxt/README.md new file mode 100644 index 000000000..25b58212c --- /dev/null +++ b/npm-packages/private-demos/quickstarts/nuxt/README.md @@ -0,0 +1,75 @@ +# Nuxt Minimal Starter + +Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. + +## Setup + +Make sure to install dependencies: + +```bash +# npm +npm install + +# pnpm +pnpm install + +# yarn +yarn install + +# bun +bun install +``` + +## Development Server + +Start the development server on `http://localhost:3000`: + +```bash +# npm +npm run dev + +# pnpm +pnpm dev + +# yarn +yarn dev + +# bun +bun run dev +``` + +## Production + +Build the application for production: + +```bash +# npm +npm run build + +# pnpm +pnpm build + +# yarn +yarn build + +# bun +bun run build +``` + +Locally preview production build: + +```bash +# npm +npm run preview + +# pnpm +pnpm preview + +# yarn +yarn preview + +# bun +bun run preview +``` + +Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. diff --git a/npm-packages/private-demos/quickstarts/nuxt/app.vue b/npm-packages/private-demos/quickstarts/nuxt/app.vue new file mode 100644 index 000000000..6600afe85 --- /dev/null +++ b/npm-packages/private-demos/quickstarts/nuxt/app.vue @@ -0,0 +1,17 @@ + + + \ No newline at end of file diff --git a/npm-packages/private-demos/quickstarts/nuxt/convex/_generated/api.d.ts b/npm-packages/private-demos/quickstarts/nuxt/convex/_generated/api.d.ts new file mode 100644 index 000000000..32e02a6be --- /dev/null +++ b/npm-packages/private-demos/quickstarts/nuxt/convex/_generated/api.d.ts @@ -0,0 +1,36 @@ +/* eslint-disable */ +/** + * Generated `api` utility. + * + * THIS CODE IS AUTOMATICALLY GENERATED. + * + * To regenerate, run `npx convex dev`. + * @module + */ + +import type { + ApiFromModules, + FilterApi, + FunctionReference, +} from "convex/server"; +import type * as tasks from "../tasks.js"; + +/** + * A utility for referencing Convex functions in your app's API. + * + * Usage: + * ```js + * const myFunctionReference = api.myModule.myFunction; + * ``` + */ +declare const fullApi: ApiFromModules<{ + tasks: typeof tasks; +}>; +export declare const api: FilterApi< + typeof fullApi, + FunctionReference +>; +export declare const internal: FilterApi< + typeof fullApi, + FunctionReference +>; diff --git a/npm-packages/private-demos/quickstarts/nuxt/convex/_generated/api.js b/npm-packages/private-demos/quickstarts/nuxt/convex/_generated/api.js new file mode 100644 index 000000000..3f9c482df --- /dev/null +++ b/npm-packages/private-demos/quickstarts/nuxt/convex/_generated/api.js @@ -0,0 +1,22 @@ +/* eslint-disable */ +/** + * Generated `api` utility. + * + * THIS CODE IS AUTOMATICALLY GENERATED. + * + * To regenerate, run `npx convex dev`. + * @module + */ + +import { anyApi } from "convex/server"; + +/** + * A utility for referencing Convex functions in your app's API. + * + * Usage: + * ```js + * const myFunctionReference = api.myModule.myFunction; + * ``` + */ +export const api = anyApi; +export const internal = anyApi; diff --git a/npm-packages/private-demos/quickstarts/nuxt/convex/_generated/dataModel.d.ts b/npm-packages/private-demos/quickstarts/nuxt/convex/_generated/dataModel.d.ts new file mode 100644 index 000000000..8541f319e --- /dev/null +++ b/npm-packages/private-demos/quickstarts/nuxt/convex/_generated/dataModel.d.ts @@ -0,0 +1,60 @@ +/* eslint-disable */ +/** + * Generated data model types. + * + * THIS CODE IS AUTOMATICALLY GENERATED. + * + * To regenerate, run `npx convex dev`. + * @module + */ + +import type { + DataModelFromSchemaDefinition, + DocumentByName, + TableNamesInDataModel, + SystemTableNames, +} from "convex/server"; +import type { GenericId } from "convex/values"; +import schema from "../schema.js"; + +/** + * The names of all of your Convex tables. + */ +export type TableNames = TableNamesInDataModel; + +/** + * The type of a document stored in Convex. + * + * @typeParam TableName - A string literal type of the table name (like "users"). + */ +export type Doc = DocumentByName< + DataModel, + TableName +>; + +/** + * An identifier for a document in Convex. + * + * Convex documents are uniquely identified by their `Id`, which is accessible + * on the `_id` field. To learn more, see [Document IDs](https://docs.convex.dev/using/document-ids). + * + * Documents can be loaded using `db.get(id)` in query and mutation functions. + * + * IDs are just strings at runtime, but this type can be used to distinguish them from other + * strings when type checking. + * + * @typeParam TableName - A string literal type of the table name (like "users"). + */ +export type Id = + GenericId; + +/** + * A type describing your Convex data model. + * + * This type includes information about what tables you have, the type of + * documents stored in those tables, and the indexes defined on them. + * + * This type is used to parameterize methods like `queryGeneric` and + * `mutationGeneric` to make them type-safe. + */ +export type DataModel = DataModelFromSchemaDefinition; diff --git a/npm-packages/private-demos/quickstarts/nuxt/convex/_generated/server.d.ts b/npm-packages/private-demos/quickstarts/nuxt/convex/_generated/server.d.ts new file mode 100644 index 000000000..7f337a438 --- /dev/null +++ b/npm-packages/private-demos/quickstarts/nuxt/convex/_generated/server.d.ts @@ -0,0 +1,142 @@ +/* eslint-disable */ +/** + * Generated utilities for implementing server-side Convex query and mutation functions. + * + * THIS CODE IS AUTOMATICALLY GENERATED. + * + * To regenerate, run `npx convex dev`. + * @module + */ + +import { + ActionBuilder, + HttpActionBuilder, + MutationBuilder, + QueryBuilder, + GenericActionCtx, + GenericMutationCtx, + GenericQueryCtx, + GenericDatabaseReader, + GenericDatabaseWriter, +} from "convex/server"; +import type { DataModel } from "./dataModel.js"; + +/** + * Define a query in this Convex app's public API. + * + * This function will be allowed to read your Convex database and will be accessible from the client. + * + * @param func - The query function. It receives a {@link QueryCtx} as its first argument. + * @returns The wrapped query. Include this as an `export` to name it and make it accessible. + */ +export declare const query: QueryBuilder; + +/** + * Define a query that is only accessible from other Convex functions (but not from the client). + * + * This function will be allowed to read from your Convex database. It will not be accessible from the client. + * + * @param func - The query function. It receives a {@link QueryCtx} as its first argument. + * @returns The wrapped query. Include this as an `export` to name it and make it accessible. + */ +export declare const internalQuery: QueryBuilder; + +/** + * Define a mutation in this Convex app's public API. + * + * This function will be allowed to modify your Convex database and will be accessible from the client. + * + * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument. + * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible. + */ +export declare const mutation: MutationBuilder; + +/** + * Define a mutation that is only accessible from other Convex functions (but not from the client). + * + * This function will be allowed to modify your Convex database. It will not be accessible from the client. + * + * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument. + * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible. + */ +export declare const internalMutation: MutationBuilder; + +/** + * Define an action in this Convex app's public API. + * + * An action is a function which can execute any JavaScript code, including non-deterministic + * code and code with side-effects, like calling third-party services. + * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive. + * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}. + * + * @param func - The action. It receives an {@link ActionCtx} as its first argument. + * @returns The wrapped action. Include this as an `export` to name it and make it accessible. + */ +export declare const action: ActionBuilder; + +/** + * Define an action that is only accessible from other Convex functions (but not from the client). + * + * @param func - The function. It receives an {@link ActionCtx} as its first argument. + * @returns The wrapped function. Include this as an `export` to name it and make it accessible. + */ +export declare const internalAction: ActionBuilder; + +/** + * Define an HTTP action. + * + * This function will be used to respond to HTTP requests received by a Convex + * deployment if the requests matches the path and method where this action + * is routed. Be sure to route your action in `convex/http.js`. + * + * @param func - The function. It receives an {@link ActionCtx} as its first argument. + * @returns The wrapped function. Import this function from `convex/http.js` and route it to hook it up. + */ +export declare const httpAction: HttpActionBuilder; + +/** + * A set of services for use within Convex query functions. + * + * The query context is passed as the first argument to any Convex query + * function run on the server. + * + * This differs from the {@link MutationCtx} because all of the services are + * read-only. + */ +export type QueryCtx = GenericQueryCtx; + +/** + * A set of services for use within Convex mutation functions. + * + * The mutation context is passed as the first argument to any Convex mutation + * function run on the server. + */ +export type MutationCtx = GenericMutationCtx; + +/** + * A set of services for use within Convex action functions. + * + * The action context is passed as the first argument to any Convex action + * function run on the server. + */ +export type ActionCtx = GenericActionCtx; + +/** + * An interface to read from the database within Convex query functions. + * + * The two entry points are {@link DatabaseReader.get}, which fetches a single + * document by its {@link Id}, or {@link DatabaseReader.query}, which starts + * building a query. + */ +export type DatabaseReader = GenericDatabaseReader; + +/** + * An interface to read from and write to the database within Convex mutation + * functions. + * + * Convex guarantees that all writes within a single mutation are + * executed atomically, so you never have to worry about partial writes leaving + * your data in an inconsistent state. See [the Convex Guide](https://docs.convex.dev/understanding/convex-fundamentals/functions#atomicity-and-optimistic-concurrency-control) + * for the guarantees Convex provides your functions. + */ +export type DatabaseWriter = GenericDatabaseWriter; diff --git a/npm-packages/private-demos/quickstarts/nuxt/convex/_generated/server.js b/npm-packages/private-demos/quickstarts/nuxt/convex/_generated/server.js new file mode 100644 index 000000000..566d4858e --- /dev/null +++ b/npm-packages/private-demos/quickstarts/nuxt/convex/_generated/server.js @@ -0,0 +1,89 @@ +/* eslint-disable */ +/** + * Generated utilities for implementing server-side Convex query and mutation functions. + * + * THIS CODE IS AUTOMATICALLY GENERATED. + * + * To regenerate, run `npx convex dev`. + * @module + */ + +import { + actionGeneric, + httpActionGeneric, + queryGeneric, + mutationGeneric, + internalActionGeneric, + internalMutationGeneric, + internalQueryGeneric, +} from "convex/server"; + +/** + * Define a query in this Convex app's public API. + * + * This function will be allowed to read your Convex database and will be accessible from the client. + * + * @param func - The query function. It receives a {@link QueryCtx} as its first argument. + * @returns The wrapped query. Include this as an `export` to name it and make it accessible. + */ +export const query = queryGeneric; + +/** + * Define a query that is only accessible from other Convex functions (but not from the client). + * + * This function will be allowed to read from your Convex database. It will not be accessible from the client. + * + * @param func - The query function. It receives a {@link QueryCtx} as its first argument. + * @returns The wrapped query. Include this as an `export` to name it and make it accessible. + */ +export const internalQuery = internalQueryGeneric; + +/** + * Define a mutation in this Convex app's public API. + * + * This function will be allowed to modify your Convex database and will be accessible from the client. + * + * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument. + * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible. + */ +export const mutation = mutationGeneric; + +/** + * Define a mutation that is only accessible from other Convex functions (but not from the client). + * + * This function will be allowed to modify your Convex database. It will not be accessible from the client. + * + * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument. + * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible. + */ +export const internalMutation = internalMutationGeneric; + +/** + * Define an action in this Convex app's public API. + * + * An action is a function which can execute any JavaScript code, including non-deterministic + * code and code with side-effects, like calling third-party services. + * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive. + * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}. + * + * @param func - The action. It receives an {@link ActionCtx} as its first argument. + * @returns The wrapped action. Include this as an `export` to name it and make it accessible. + */ +export const action = actionGeneric; + +/** + * Define an action that is only accessible from other Convex functions (but not from the client). + * + * @param func - The function. It receives an {@link ActionCtx} as its first argument. + * @returns The wrapped function. Include this as an `export` to name it and make it accessible. + */ +export const internalAction = internalActionGeneric; + +/** + * Define a Convex HTTP action. + * + * @param func - The function. It receives an {@link ActionCtx} as its first argument, and a `Request` object + * as its second. + * @returns The wrapped endpoint function. Route a URL path to this function in `convex/http.js`. + */ +export const httpAction = httpActionGeneric; diff --git a/npm-packages/private-demos/quickstarts/nuxt/convex/schema.ts b/npm-packages/private-demos/quickstarts/nuxt/convex/schema.ts new file mode 100644 index 000000000..5c272a67c --- /dev/null +++ b/npm-packages/private-demos/quickstarts/nuxt/convex/schema.ts @@ -0,0 +1,9 @@ +import { defineSchema, defineTable } from "convex/server"; +import { v } from "convex/values"; + +export default defineSchema({ + tasks: defineTable({ + text: v.string(), + isCompleted: v.boolean(), + }), +}); \ No newline at end of file diff --git a/npm-packages/private-demos/quickstarts/nuxt/convex/tasks.ts b/npm-packages/private-demos/quickstarts/nuxt/convex/tasks.ts new file mode 100644 index 000000000..d8186b8f4 --- /dev/null +++ b/npm-packages/private-demos/quickstarts/nuxt/convex/tasks.ts @@ -0,0 +1,8 @@ +import { query } from "./_generated/server"; + +export const get = query({ + args: {}, + handler: async (ctx) => { + return await ctx.db.query("tasks").collect(); + }, +}); \ No newline at end of file diff --git a/npm-packages/private-demos/quickstarts/nuxt/nuxt.config.ts b/npm-packages/private-demos/quickstarts/nuxt/nuxt.config.ts new file mode 100644 index 000000000..467cfcaa2 --- /dev/null +++ b/npm-packages/private-demos/quickstarts/nuxt/nuxt.config.ts @@ -0,0 +1,9 @@ +// https://nuxt.com/docs/api/configuration/nuxt-config +export default defineNuxtConfig({ + compatibilityDate: '2025-05-15', + devtools: { enabled: true }, + modules: ['convex-nuxt'], + convex: { + url: process.env.CONVEX_URL, + } +}) \ No newline at end of file diff --git a/npm-packages/private-demos/quickstarts/nuxt/package.json b/npm-packages/private-demos/quickstarts/nuxt/package.json new file mode 100644 index 000000000..9245fb4a3 --- /dev/null +++ b/npm-packages/private-demos/quickstarts/nuxt/package.json @@ -0,0 +1,19 @@ +{ + "name": "nuxt-app", + "private": true, + "type": "module", + "scripts": { + "build": "nuxt build", + "dev": "nuxt dev --dotenv .env.local", + "generate": "nuxt generate", + "preview": "nuxt preview", + "postinstall": "nuxt prepare" + }, + "dependencies": { + "convex": "^1.25.2", + "convex-nuxt": "^0.1.3", + "nuxt": "^3.17.6", + "vue": "^3.5.17", + "vue-router": "^4.5.1" + } +} diff --git a/npm-packages/private-demos/quickstarts/nuxt/public/favicon.ico b/npm-packages/private-demos/quickstarts/nuxt/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..18993ad91cfd43e03b074dd0b5cc3f37ab38e49c GIT binary patch literal 4286 zcmeHLOKuuL5PjK%MHWVi6lD zOGiREbCw`xmFozJ^aNatJY>w+g ze6a2@u~m#^BZm@8wco9#Crlli0uLb^3E$t2-WIc^#(?t)*@`UpuofJ(Uyh@F>b3Ph z$D^m8Xq~pTkGJ4Q`Q2)te3mgkWYZ^Ijq|hkiP^9`De={bQQ%heZC$QU2UpP(-tbl8 zPWD2abEew;oat@w`uP3J^YpsgT%~jT(Dk%oU}sa$7|n6hBjDj`+I;RX(>)%lm_7N{+B7Mu%H?422lE%MBJH!!YTN2oT7xr>>N-8OF$C&qU^ z>vLsa{$0X%q1fjOe3P1mCv#lN{xQ4_*HCSAZjTb1`}mlc+9rl8$B3OP%VT@mch_~G z7Y+4b{r>9e=M+7vSI;BgB?ryZDY4m>&wcHSn81VH1N~`0gvwH{ z8dv#hG|OK`>1;j7tM#B)Z7zDN?{6=dUal}$e - -import { useConvexQuery } from "@convex-vue/core"; +import { useConvexQuery } from "convex-vue"; import { api } from "../convex/_generated/api"; -const { data, isLoading } = useConvexQuery(api.tasks.get, {}); +const { data, isPending } = useConvexQuery(api.tasks.get); diff --git a/npm-packages/private-demos/quickstarts/vue/src/main.ts b/npm-packages/private-demos/quickstarts/vue/src/main.ts index 3c052b474..66c30939d 100644 --- a/npm-packages/private-demos/quickstarts/vue/src/main.ts +++ b/npm-packages/private-demos/quickstarts/vue/src/main.ts @@ -1,13 +1,11 @@ -import "./assets/main.css"; +import { convexVue } from 'convex-vue' +import { createApp } from 'vue' +import App from './App.vue' -import { createApp } from "vue"; -import App from "./App.vue"; -import { createConvexVue } from "@convex-vue/core"; +const app = createApp(App) -const app = createApp(App); +app.use(convexVue, { + url: import.meta.env.VITE_CONVEX_URL, +}) -const convexVue = createConvexVue({ - convexUrl: import.meta.env.VITE_CONVEX_URL, -}); - -app.use(convexVue).mount("#app"); +app.mount('#app') \ No newline at end of file From 2622ecf5490d680caf97aa2afd57ba27bdc0974c Mon Sep 17 00:00:00 2001 From: Jayde Boardman Date: Mon, 21 Jul 2025 22:56:43 +1000 Subject: [PATCH 4/4] chore: bump example repo to Nuxt v4 --- npm-packages/docs/docs/quickstart/nuxt.mdx | 24 +++++++------------ .../quickstarts/nuxt/{ => app}/app.vue | 8 +++---- .../quickstarts/nuxt/nuxt.config.ts | 4 ++-- .../quickstarts/nuxt/package.json | 7 +++--- .../quickstarts/nuxt/sampleData.jsonl | 2 +- .../quickstarts/nuxt/server/tsconfig.json | 3 --- .../quickstarts/nuxt/tsconfig.json | 16 ++++++++++++- 7 files changed, 34 insertions(+), 30 deletions(-) rename npm-packages/private-demos/quickstarts/nuxt/{ => app}/app.vue (52%) delete mode 100644 npm-packages/private-demos/quickstarts/nuxt/server/tsconfig.json diff --git a/npm-packages/docs/docs/quickstart/nuxt.mdx b/npm-packages/docs/docs/quickstart/nuxt.mdx index 03dc7f344..af8f807d8 100644 --- a/npm-packages/docs/docs/quickstart/nuxt.mdx +++ b/npm-packages/docs/docs/quickstart/nuxt.mdx @@ -8,7 +8,8 @@ sidebar_position: 325 import sampleData from "!!raw-loader!@site/../private-demos/quickstarts/vue/sampleData.jsonl"; import tasks from "!!raw-loader!@site/../private-demos/quickstarts/nuxt/convex/tasks.ts"; -import App from "!!raw-loader!@site/../private-demos/quickstarts/nuxt/app.vue"; +import schema from "!!raw-loader!@site/../private-demos/quickstarts/nuxt/convex/schema.ts"; +import App from "!!raw-loader!@site/../private-demos/quickstarts/nuxt/app/app.vue"; Learn how to query data from Convex in a Nuxt app. @@ -43,12 +44,12 @@ for Convex. ```ts noDialect title="nuxt.config.ts" export default defineNuxtConfig({ - compatibilityDate: '2025-05-15', + compatibilityDate: '2025-07-15', devtools: { enabled: true }, modules: ['convex-nuxt'], // highlight-start convex: { - url: process.env.CONVEX_URL, + url: process.env.CONVEX_URL }, // highlight-end }) @@ -105,17 +106,10 @@ for Convex.

- ```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(), - }), - }); - ``` + @@ -140,7 +134,7 @@ for Convex. diff --git a/npm-packages/private-demos/quickstarts/nuxt/app.vue b/npm-packages/private-demos/quickstarts/nuxt/app/app.vue similarity index 52% rename from npm-packages/private-demos/quickstarts/nuxt/app.vue rename to npm-packages/private-demos/quickstarts/nuxt/app/app.vue index 6600afe85..45d19102a 100644 --- a/npm-packages/private-demos/quickstarts/nuxt/app.vue +++ b/npm-packages/private-demos/quickstarts/nuxt/app/app.vue @@ -1,16 +1,14 @@