Vue Quickstart - Convex Backend

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 Vue app.

This quickstart guide uses a community-maintained Vue client for Convex.

<StepByStep> <Step title="Create a Vue site"> Create a Vue site using the `npm create vue@latest my-vue-app` command.

Convex will work with any set of options but to follow this quickstart most closely choose:
* Yes to "Add TypeScript?"
* No to everything else

</br>

```sh
npm create vue@latest my-vue-app
```

</Step> <Step title="Install the Convex library"> To get started, install the `convex` package.

```sh
cd my-vue-app && npm install convex convex-vue
```

</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="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="Wire up the ConvexProvider"> In `src/main.ts` set up the Convex client there to make it available on every page of your app.

<Snippet
  source={main}
  title="src/main.ts"
/>

</Step> <Step title="Display the data in your app"> In `src/App.vue` use `useQuery` to subscribe your `api.tasks.get` API function.

<Snippet
  source={App}
  title="src/App.vue"
/>

</Step> <Step title="Start the app"> Start the app, open [http://localhost:5173](http://localhost:5173) in a browser, and see the list of tasks.

```sh
npm run dev
```

</Step> </StepByStep>

See the complete Vue npm package documentation.