diff --git a/npm-packages/docs/docs/client/nuxt.md b/npm-packages/docs/docs/client/nuxt.md new file mode 100644 index 000000000..a51186189 --- /dev/null +++ b/npm-packages/docs/docs/client/nuxt.md @@ -0,0 +1,25 @@ +--- +title: "Nuxt" +sidebar_position: 250 +--- + +The community-maintained +[`@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 +[convex-nuxt GitHub page](https://github.com/chris-visser/convex-nuxt) +for more documentation. + + + +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! + +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/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 new file mode 100644 index 000000000..af8f807d8 --- /dev/null +++ b/npm-packages/docs/docs/quickstart/nuxt.mdx @@ -0,0 +1,189 @@ +--- +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 tasks from "!!raw-loader!@site/../private-demos/quickstarts/nuxt/convex/tasks.ts"; +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. + +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 and the `convex-nuxt` module to your Nuxt application. + + ```sh + 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-07-15', + devtools: { enabled: true }, + modules: ['convex-nuxt'], + // highlight-start + convex: { + url: process.env.CONVEX_URL + }, + // highlight-end + }) + ``` + + + + + 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. + +

+ + + + + + + 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`. + + + + + + + In `app.vue` use `useQuery` to subscribe your `api.tasks.get` + API function. + + + + + + + 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" + }, + "dependencies": { + "convex": "^1.25.2", + "convex-nuxt": "^0.1.3", + "nuxt": "^3.17.6", + "vue": "^3.5.17", + "vue-router": "^4.5.1" + } + } + ``` + + + + + 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/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/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..a9b9b5446 100644 --- a/npm-packages/docs/src/css/custom.css +++ b/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; } 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 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/app.vue b/npm-packages/private-demos/quickstarts/nuxt/app/app.vue new file mode 100644 index 000000000..45d19102a --- /dev/null +++ b/npm-packages/private-demos/quickstarts/nuxt/app/app.vue @@ -0,0 +1,15 @@ + + + \ 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..881dd6870 --- /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-07-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..ddf2e50f1 --- /dev/null +++ b/npm-packages/private-demos/quickstarts/nuxt/package.json @@ -0,0 +1,20 @@ +{ + "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.4", + "convex-nuxt": "^0.1.5", + "convex-vue": "^0.1.5", + "nuxt": "^4.0.1", + "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 000000000..18993ad91 Binary files /dev/null and b/npm-packages/private-demos/quickstarts/nuxt/public/favicon.ico differ diff --git a/npm-packages/private-demos/quickstarts/nuxt/public/robots.txt b/npm-packages/private-demos/quickstarts/nuxt/public/robots.txt new file mode 100644 index 000000000..0ad279c73 --- /dev/null +++ b/npm-packages/private-demos/quickstarts/nuxt/public/robots.txt @@ -0,0 +1,2 @@ +User-Agent: * +Disallow: diff --git a/npm-packages/private-demos/quickstarts/nuxt/sampleData.jsonl b/npm-packages/private-demos/quickstarts/nuxt/sampleData.jsonl new file mode 100644 index 000000000..a15cbf01e --- /dev/null +++ b/npm-packages/private-demos/quickstarts/nuxt/sampleData.jsonl @@ -0,0 +1,3 @@ +{"text": "Buy groceries", "isCompleted": true} +{"text": "Go for a swim", "isCompleted": true} +{"text": "Integrate Convex", "isCompleted": false} diff --git a/npm-packages/private-demos/quickstarts/nuxt/tsconfig.json b/npm-packages/private-demos/quickstarts/nuxt/tsconfig.json new file mode 100644 index 000000000..307b2134b --- /dev/null +++ b/npm-packages/private-demos/quickstarts/nuxt/tsconfig.json @@ -0,0 +1,18 @@ +{ + // https://nuxt.com/docs/guide/concepts/typescript + "files": [], + "references": [ + { + "path": "./.nuxt/tsconfig.app.json" + }, + { + "path": "./.nuxt/tsconfig.server.json" + }, + { + "path": "./.nuxt/tsconfig.shared.json" + }, + { + "path": "./.nuxt/tsconfig.node.json" + } + ] +} diff --git a/npm-packages/private-demos/quickstarts/vue/package.json b/npm-packages/private-demos/quickstarts/vue/package.json index 0836f49a3..02d20d789 100644 --- a/npm-packages/private-demos/quickstarts/vue/package.json +++ b/npm-packages/private-demos/quickstarts/vue/package.json @@ -11,10 +11,9 @@ "type-check": "vue-tsc --build --force" }, "dependencies": { - "@convex-vue/core": "^0.0.4", - "@vueuse/core": "^10.9.0", - "convex": "^1.11.2", - "vue": "^3.4.21" + "convex": "^1.25.2", + "convex-vue": "^0.1.1", + "vue": "^3.5.17" }, "devDependencies": { "@tsconfig/node20": "^20.1.4", diff --git a/npm-packages/private-demos/quickstarts/vue/src/App.vue b/npm-packages/private-demos/quickstarts/vue/src/App.vue index a8c6a6065..85e7f4997 100644 --- a/npm-packages/private-demos/quickstarts/vue/src/App.vue +++ b/npm-packages/private-demos/quickstarts/vue/src/App.vue @@ -1,18 +1,15 @@ 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