Vue Quickstart

npm install -g base44@latest

base44 create

{
  "site": {
    "outputDirectory": "dist",
    "buildCommand": "npm run build",
    "serveCommand": "npm run dev"
  }
}

{
  "name": "Task",
  "type": "object",
  "properties": {
    "title": {
      "type": "string"
    },
    "completed": {
      "type": "boolean",
      "default": false
    }
  },
  "required": ["title"]
}

base44 entities push

npm install @base44/sdk

import { createClient } from '@base44/sdk';

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

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

npm run dev

base44 build
base44 deploy