Get Started with General Vue Project ​

Besides the popular frameworks, Documate also supports any Vue project. This guide will show you how to add Documate to your Vue project.

Initialize Documate ​

In the root of your project, run the following command:

npx @documate/documate init --framework vue

npx @documate/documate init --framework vue

This command does the following:

• Install @documate/documate and @documate/vue packages to your project
• Create a documate.json

{
  "root": ".",
  "include": [ "**/*.md" ],
  "backend": ""
}

{
  "root": ".",
  "include": [ "**/*.md" ],
  "backend": ""
}

• Add a script to your package.json

{
  "scripts": {
    ...
    "documate:upload": "documate upload"
  }
}

{
  "scripts": {
    ...
    "documate:upload": "documate upload"
  }
}

Add Documate UI to Your Project ​

Documate offer a ready-to-use and fully accessible Vue component that you can add to your project.

<script setup>
import Documate from '@documate/vue'
import '@documate/vue/dist/style.css'
</script>

<template>
  <div>
    <!-- This will render a button as the start point -->
    <Documate />
  </div>
</template>

<script setup>
import Documate from '@documate/vue'
import '@documate/vue/dist/style.css'
</script>

<template>
  <div>
    <!-- This will render a button as the start point -->
    <Documate />
  </div>
</template>

If you want to customize the default style to match your brand, you can override the CSS variables.

:root {
  --dm-color-brand: #1a73e8;
}

:root {
  --dm-color-brand: #1a73e8;
}

See default CSS variables for the full list.

Connect to Backend ​

Now you are all set with the frontend. The last step is to connect it to the backend.

Prerequisite ​

Before continue, please make sure you have built and deployed the backend. Follow Build the Backend Guide if you haven't done so. It only takes 5 minutes.

1. Add the Backend URL to documate.json ​

Open your backend App in the AirCode dashboard, select the deployed upload.js file, and copy the backend URL. It's located under the function's name.

Then add it to the documate.json file:

{
  "root": ".",
  "include": [ "**/*.md", "**/*.mdx" ],
  "backend": "https://test123.us.aircode.run/upload"
}

{
  "root": ".",
  "include": [ "**/*.md", "**/*.mdx" ],
  "backend": "https://test123.us.aircode.run/upload"
}

Remember to replace https://test123.us.aircode.run/upload with your own one.

2. Add the ask Endpoint to Component ​

Find the ask endpoint (Which is the URL for ask.js), and click to copy it.

Modify the Documate UI you added before to pass the endpoint to the Documate component as props.

<script setup>
import Documate from '@documate/vue'
import '@documate/vue/dist/style.css'
</script>

<template>
  <div>
    <!-- Replace the URL with your own one -->
    <Documate endpoint="https://test123.us.aircode.run/ask" />
  </div>
</template>

<script setup>
import Documate from '@documate/vue'
import '@documate/vue/dist/style.css'
</script>

<template>
  <div>
    <!-- Replace the URL with your own one -->
    <Documate endpoint="https://test123.us.aircode.run/ask" />
  </div>
</template>

Run the Project ​

Now you're all set with Documate. Run the following command to upload your content to backend and generate the knowledge base:

npm run documate:upload

npm run documate:upload

After the command finishes, you can start the dev server and see the Ask AI button in your page.

npm run dev

npm run dev