Lovable and Todoist integration: Step-by-Step Guide 2025

 

Adding Required Dependencies

 

• Since Lovable doesn't support a terminal, open your project's package.json file and add the dependency for axios manually. This is needed to perform HTTP requests.
• Add the following code under the "dependencies" section. If the section already exists, insert the axios line:

  
  "dependencies": {
    "axios": "^0.27.2",
    // ... other dependencies if any
  }
      

 

Configuring Your Todoist API Key

 

• In your Lovable project, create a new file in the src folder named todoistConfig.ts. This file will store your Todoist API key.
• Open todoistConfig.ts and add the following code. Replace yourtodoistapikeyhere with your actual Todoist API key.

  
  export const TODOISTAPIKEY = 'yourtodoistapikeyhere';
      

 

Creating the Todoist Integration Code

 

• In the src folder, create a new file named todoistIntegration.ts. This file will include functions to interact with the Todoist API.
• Paste the following code into todoistIntegration.ts. This code defines an asynchronous function to create a new task in Todoist.

  
  import axios from 'axios';
  import { TODOISTAPIKEY } from './todoistConfig';
  
  export const createTodoistTask = async (content: string, dueString?: string) => {
    try {
      const response = await axios.post('https://api.todoist.com/rest/v2/tasks', {
        content,
        due_string: dueString
      }, {
        headers: {
          'Authorization': Bearer ${TODOIST_API_KEY},
          'Content-Type': 'application/json'
        }
      });
      console.log('Task created:', response.data);
    } catch (error) {
      console.error('Error creating task:', error);
    }
  };
      

  
  

 

Integrating Todoist Functions into Your Lovable Project

 

• Open the main file of your Lovable project where you handle user actions, for example app.ts or main.ts.
• Import the createTodoistTask function at the top of the file:

  
  import { createTodoistTask } from './todoistIntegration';
      

• Add a function that will be triggered when the user wants to add a Todoist task. For example:

  
  const onAddTask = async () => {
    // Replace the content and due date as per your needs
    const taskContent = "Buy groceries";
    const dueDate = "tomorrow"; // This parameter is optional
    await createTodoistTask(taskContent, dueDate);
  };
      

 

Linking the Integration to Your User Interface

 

• In the section of your Lovable project's HTML (or within a template), add a button for triggering the Todoist task creation. Insert the following snippet where appropriate:

  
  <button id="todoistTaskButton">Add Todoist Task</button>
      

• At the bottom of your HTML file or in a script section that runs after the page loads, add the following code to attach the event listener to the button:

  
  document.getElementById('todoistTaskButton')?.addEventListener('click', () => {
    onAddTask();
  });
      

• Ensure that your built TypeScript files are correctly loaded into the page so that the event and functions are available.

 

Final Notes

 

• Save all files and confirm that your project's build process picks up the new todoistConfig.ts and todoistIntegration.ts files.
• When the user clicks the "Add Todoist Task" button, the onAddTask function is triggered and creates a new task in Todoist using your API key.
• Check your browser console for success or error logs to verify that the integration is working as expected.