> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue Quickstart

> Add a Base44 backend to your Vue project

Follow this quickstart to add Base44 to your Vue project. You'll create a Base44 backend, define entities, and integrate the SDK into your frontend.

<Note>The CLI requires Node.js 20.19.0 or higher.</Note>

## Setup

<Steps>
  <Step title="Install the Base44 CLI">
    Install the Base44 CLI globally:

    ```bash theme={null}
    npm install -g base44@latest
    ```
  </Step>

  <Step title="Create a Base44 backend">
    Navigate to your Vue project directory, then run:

    ```bash theme={null}
    base44 create
    ```

    If you're not already logged in, the command will prompt you to authenticate.

    Select **Create a basic project** when prompted. This creates the backend files within your Vue project directory. Then follow the prompts to configure your project.

    When you create a project, [Base44 skills](/developers/backend/overview/base44-skills) are included automatically, providing your AI agent with instructions and context for Base44 tasks.
  </Step>

  <Step title="Configure your site">
    Update your [config.jsonc](/developers/backend/overview/project-structure#config-jsonc) to point to your Vue build output and set the commands for building and serving. Add the `site.outputDirectory`, `site.buildCommand`, and `site.serveCommand` fields:

    ```json theme={null}
    {
      "site": {
        "outputDirectory": "dist",
        "buildCommand": "npm run build",
        "serveCommand": "npm run dev"
      }
    }
    ```

    With `serveCommand` set, [`base44 dev`](/developers/references/cli/commands/dev) starts your backend and frontend together from a single terminal. With `buildCommand` set, [`base44 build`](/developers/references/cli/commands/build) compiles your frontend with your app ID injected.
  </Step>

  <Step title="Define entities">
    Create [entity schemas](/developers/references/entities/introduction) to define your data structures. Entity files must be placed in the `base44/entities/` directory.

    For example, create `base44/entities/task.jsonc`:

    ```json theme={null}
    {
      "name": "Task",
      "type": "object",
      "properties": {
        "title": {
          "type": "string"
        },
        "completed": {
          "type": "boolean",
          "default": false
        }
      },
      "required": ["title"]
    }
    ```
  </Step>

  <Step title="Push entities to Base44">
    Push your entity schemas to Base44:

    ```bash theme={null}
    base44 entities push
    ```

    This command synchronizes your local entity definitions with your Base44 backend, making them available for use in your application. See [`entities push`](/developers/references/cli/commands/entities-push) for more information.
  </Step>

  <Step title="Install the Base44 SDK">
    Install the Base44 JavaScript SDK:

    ```bash theme={null}
    npm install @base44/sdk
    ```
  </Step>

  <Step title="Create a Base44 client">
    Create a Base44 SDK [client](/developers/references/sdk/getting-started/client) in your project. Read the app ID from `VITE_BASE44_APP_ID`, which [`base44 build`](/developers/references/cli/commands/build) and [`base44 dev`](/developers/references/cli/commands/dev) set automatically.

    For example, create `src/api/base44Client.js`:

    ```javascript theme={null}
    import { createClient } from '@base44/sdk';

    export const base44 = createClient({
      appId: import.meta.env.VITE_BASE44_APP_ID,
    });
    ```

    `VITE_BASE44_APP_ID` resolves to your linked app's ID, which the CLI reads from `base44/.app.jsonc`.
  </Step>

  <Step title="Use the SDK in your frontend">
    Create a simple component to list and add tasks. For example, create `src/components/TaskList.vue`:

    ```vue theme={null}
    <script setup>
    import { ref, onMounted } from 'vue';
    import { base44 } from '@/api/base44Client';

    const tasks = ref([]);
    const newTaskTitle = ref('');
    const isLoading = ref(false);

    onMounted(async () => {
      await loadTasks();
    });

    const loadTasks = async () => {
      isLoading.value = true;
      try {
        // Get records
        tasks.value = await base44.entities.Task.list();
      } catch (error) {
        console.error('Error loading tasks:', error);
      }
      isLoading.value = false;
    };

    const addTask = async (e) => {
      e.preventDefault();
      if (!newTaskTitle.value.trim()) return;

      isLoading.value = true;
      try {
        // Create a record
        const newTask = await base44.entities.Task.create({
          title: newTaskTitle.value,
          completed: false
        });
        tasks.value.push(newTask);
        newTaskTitle.value = '';
      } catch (error) {
        console.error('Error creating task:', error);
      }
      isLoading.value = false;
    };
    </script>

    <template>
      <div>
        <h1>Tasks</h1>

        <p v-if="isLoading">Loading...</p>

        <ul>
          <li v-for="task in tasks" :key="task.id">
            {{ task.title }}
          </li>
        </ul>

        <form @submit="addTask">
          <input
            type="text"
            v-model="newTaskTitle"
            placeholder="New task"
            :disabled="isLoading"
          />
          <button type="submit" :disabled="isLoading || !newTaskTitle.trim()">
            Add Task
          </button>
        </form>
      </div>
    </template>
    ```

    <Note>
      Use the exact entity name from your schema when calling the SDK, including capitalization. By convention, entity names begin with a capital letter. For example, if your schema has `"name": "Task"`, you access it as `base44.entities.Task.list()`.
    </Note>
  </Step>

  <Step title="Run your app locally">
    Start your Vue development server to test your integration. From your project root, run:

    ```bash theme={null}
    npm run dev
    ```

    Your Vue app will connect to your Base44 backend through the SDK client, allowing you to work with your deployed entities in real-time.
  </Step>

  <Step title="Build and deploy your frontend">
    Build your Vue project for production with your app ID injected, then deploy:

    ```bash theme={null}
    base44 build
    base44 deploy
    ```

    `base44 build` runs your `buildCommand` with `VITE_BASE44_APP_ID` set to your linked app's ID. `base44 deploy` uploads the compiled files and pushes any updates to your entity schemas. When complete, you'll see a link to your Base44 dashboard and your live application URL.
  </Step>
</Steps>

## Next steps

Now that your Base44 backend is integrated with your project, you can:

* Use the [SDK](/developers/references/sdk/getting-started/overview) to add more functionality to your frontend.
* Add [entities](/developers/backend/resources/entities/overview), [backend functions](/developers/backend/resources/functions), and [agents](/developers/backend/resources/agents/overview). If you're working in TypeScript, [generate types](/developers/references/sdk/getting-started/dynamic-types) to get autocomplete and type safety.
* Test locally with [`base44 dev`](/developers/references/cli/commands/dev). See [Local development](/developers/backend/overview/local-dev/local-development-overview) for setup instructions.
* Continue building your frontend and deploy updates with [`base44 deploy`](/developers/references/cli/commands/deploy).
* Open your deployed site with [`base44 site open`](/developers/references/cli/commands/site-open).

## See also

* [CLI Command Reference](/developers/references/cli/commands/introduction): All available CLI commands
* [Project Structure](/developers/backend/overview/project-structure): How project files are organized
* [JavaScript SDK Documentation](/developers/references/sdk/getting-started/overview): Connect your app to the backend
* [Base44 Skills](/developers/backend/overview/base44-skills): Teach AI assistants to work with Base44