Skip to content

Getting Started

GitHub
  1. Install the package

    Terminal window
    npm i @capgo/capacitor-auto
  2. Sync native projects

    Terminal window
    npx cap sync
  3. Set the root car template

    import { Auto } from '@capgo/capacitor-auto';
    await Auto.setRootTemplate({
    title: 'Garage',
    sections: [
    {
    header: 'Doors',
    items: [
    {
    id: 'open-main-door',
    title: 'Open main door',
    subtitle: 'Tap to send the action to the phone app',
    payload: { doorId: 'main' },
    },
    ],
    },
    ],
    });
  4. Handle car actions

    await Auto.addListener('carAction', async (event) => {
    if (event.id === 'open-main-door') {
    await openGarageDoor(event.payload?.doorId);
    }
    });
  5. Track connection state

    const status = await Auto.isAvailable();
    console.log(status.available, status.connected, status.platform);
    await Auto.addListener('connectionChanged', (event) => {
    console.log('Car connected:', event.connected, event.platform);
    });

Set emptyText when the template has no rows:

await Auto.setRootTemplate({
title: 'Garage',
emptyText: 'No actions are available right now.',
sections: [],
});

Use sendMessage for application-defined native bridge messages:

await Auto.sendMessage({
type: 'status',
payload: { online: true },
});
  • Follow the iOS setup page for CarPlay scene and entitlement notes.
  • Follow the Android setup page for Android Auto category and manifest notes.

If you are using Getting Started to plan native plugin work, connect it with Using @capgo/capacitor-auto for the native capability in Using @capgo/capacitor-auto, Capgo Plugin Directory for the product workflow in Capgo Plugin Directory, Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, Adding or Updating Plugins for the implementation detail in Adding or Updating Plugins, and Ionic Enterprise Plugin Alternatives for the product workflow in Ionic Enterprise Plugin Alternatives.