> ## 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.

# Quickstart com Vue

> Adicione um backend Base44 ao seu projeto Vue

Siga este quickstart para adicionar a Base44 ao seu projeto Vue. Você criará um backend Base44, definirá entidades e integrará o SDK no seu frontend.

<Note>A CLI requer Node.js 20.19.0 ou superior.</Note>

## Configuração

<Steps>
  <Step title="Instale a CLI da Base44">
    Instale a CLI da Base44 globalmente:

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

  <Step title="Crie um backend Base44">
    Navegue até o diretório do seu projeto Vue e execute:

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

    Se você ainda não estiver logado, o comando vai solicitar que você autentique.

    Selecione **Create a basic project** quando solicitado. Isso cria os arquivos do backend dentro do diretório do seu projeto Vue. Em seguida, siga as instruções para configurar seu projeto.

    Quando você cria um projeto, as [Base44 skills](/developers/backend/overview/base44-skills) são incluídas automaticamente, fornecendo ao seu agente de IA instruções e contexto para tarefas da Base44.
  </Step>

  <Step title="Configure o diretório de saída">
    Atualize seu [config.jsonc](/developers/backend/overview/project-structure#config-jsonc) para apontar para a saída do build do Vue. Adicione ou modifique o campo `site.outputDirectory`:

    ```json theme={null}
    {
      "site": {
        "outputDirectory": "dist"
      }
    }
    ```
  </Step>

  <Step title="Defina entidades">
    Crie [schemas de entidade](/developers/references/entities/introduction) para definir suas estruturas de dados. Arquivos de entidade devem estar no diretório `base44/entities/`.

    Por exemplo, crie `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="Envie entidades para a Base44">
    Envie seus schemas de entidade para a Base44:

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

    Este comando sincroniza suas definições locais de entidade com seu backend Base44, tornando-as disponíveis para uso na sua aplicação. Veja [`entities push`](/developers/references/cli/commands/entities-push) para mais informações.
  </Step>

  <Step title="Instale o SDK da Base44">
    Instale o SDK JavaScript da Base44:

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

  <Step title="Crie um cliente Base44">
    Crie um [cliente](/developers/references/sdk/getting-started/client) SDK da Base44 no seu projeto. O `appId` pode ser encontrado no seu arquivo `base44/.app.jsonc`.

    Por exemplo, crie `src/api/base44Client.js`:

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

    export const base44 = createClient({
      appId: 'your-app-id-from-app.jsonc'
    });
    ```
  </Step>

  <Step title="Use o SDK no seu frontend">
    Crie um componente simples para listar e adicionar tarefas. Por exemplo, crie `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 o nome exato da entidade do seu schema ao chamar o SDK, incluindo capitalização. Por convenção, os nomes de entidade começam com letra maiúscula. Por exemplo, se seu schema tem `"name": "Task"`, você acessa como `base44.entities.Task.list()`.
    </Note>
  </Step>

  <Step title="Execute seu app localmente">
    Inicie seu servidor de desenvolvimento Vue para testar sua integração. A partir da raiz do projeto, execute:

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

    Seu app Vue se conectará ao seu backend Base44 através do cliente SDK, permitindo trabalhar com suas entidades implantadas em tempo real.
  </Step>

  <Step title="Faça build do seu frontend">
    Quando estiver satisfeito com como tudo está localmente, faça build do seu projeto Vue para produção:

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

    Isso cria arquivos de produção otimizados no seu diretório de saída (normalmente `dist`).
  </Step>

  <Step title="Implante seu frontend">
    Implante seu frontend compilado na Base44:

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

    O comando `deploy` implanta seu frontend compilado na hospedagem da Base44. Também enviará quaisquer atualizações nos seus schemas de entidade se você tiver feito mudanças desde o último push. Quando concluído, você verá o nome do seu projeto, um link para seu dashboard Base44 e a URL da sua aplicação ao vivo.
  </Step>
</Steps>

## Próximos passos

Agora que o backend Base44 está integrado ao seu projeto, você pode:

* Usar o [SDK](/developers/references/sdk/getting-started/overview) para adicionar mais funcionalidade ao seu frontend.
* Adicionar [entidades](/developers/backend/resources/entities/overview), [funções de backend](/developers/backend/resources/functions) e [agentes](/developers/backend/resources/agents-config). Se está trabalhando em TypeScript, [gere tipos](/developers/references/sdk/getting-started/dynamic-types) para obter autocomplete e segurança de tipo.
* Testar localmente executando [`base44 dev`](/developers/references/cli/commands/dev) para o backend e `npm run dev` para o frontend. Veja [Desenvolvimento local](/developers/backend/overview/local-dev/local-development-overview) para instruções de configuração.
* Continuar construindo seu frontend e implantar atualizações com [`base44 deploy`](/developers/references/cli/commands/deploy).
* Abrir seu site implantado com [`base44 site open`](/developers/references/cli/commands/site-open).

## Veja também

* [Referência de comandos da CLI](/developers/references/cli/commands/introduction): Todos os comandos da CLI disponíveis
* [Estrutura do projeto](/developers/backend/overview/project-structure): Como os arquivos do projeto são organizados
* [Documentação do SDK JavaScript](/developers/references/sdk/getting-started/overview): Conecte seu app ao backend
* [Base44 Skills](/developers/backend/overview/base44-skills): Ensine assistentes de IA a trabalhar com a Base44

<Note>Esta página foi traduzida usando IA. Para informações mais precisas e atualizadas, consulte a [versão em inglês](/). </Note>