Installing astro-vtbot

astro-vtbot can be installed as a full Astro integration or as a node package. Both ways install the package as a dependency in your project and allow you to import its components and scripts in your own pages. Installing the package as an Astro integration in addition sets up your project with an automatic loading indicator and automatic linter warnings in the browser console. Installing as an integration also gives you access to The Bag’s DevToolbar App!

Contents

• Installing as an Astro integration
• Installing as a node package

Installing as an Astro integration

Installing astro-vtbot as an Astro integration will install the package and in addition it will by default add vtbot’s <LoadingIndicator /> component and <Linter /> component to all pages that use Astro’s <ViewTransitions />. However, there are also options to selectively opt out of either feature, as detailed below.

To install astro-vtbot as an Astro integration, run the astro add command in your project directory …

1
npx astro add astro-vtbot

… and press the return key twice to answer the questions with “yes”:

1
⚠ astro-vtbot is not an official Astro package. Use at your own risk!
2
✔ Continue? … yes
3
✔ Resolving with third party packages...
4
10:26:47
5
  Astro will run the following command:
6
  If you skip this step, you can always run it yourself later
7

8
 ╭─────────────────────────────────╮
9
 │ npm install astro-vtbot@^1.2.0  │
10
 ╰─────────────────────────────────╯
11

12
✔ Continue? … yes
13
✔ Installing dependencies...
14
10:26:52
15
   success  Configuration up-to-date.

As a result astro-vtbot will hook into your astro.config file:

1
import { defineConfig } from "astro/config";
2

3
import vtbot from "astro-vtbot";
4

5
// https://astro.build/config
6
export default defineConfig({
7
  integrations: [vtbot()],
8
});

When you start Astro in DEV mode, e.g. npm run dev, this will automatically add vtbot’s <Linter /> component to all pages that use Astro’s <ViewTransitions />. This will only happen in DEV mode. When you build for production, the <Linter /> component will not be included.

You can disable automatic linting and the loading-indicator without having to remove the integration by setting the loadingIndicator option and/or the autoLint option of vtbot in your astro.config file to false (the default is true):

1
import { defineConfig } from "astro/config";
2
import vtbot from "astro-vtbot";
3
export default defineConfig({
4
  integrations: [vtbot({
5
    loadingIndicator: false, autoLint: false
6
  })],
7
});

After disabling the loadingIndicator, as an alternative, you could also add the <ProgressBar /> component to your Layout.astro.

If you have Astro’s DevToolbar enabled, The Bag will show up as a new app there and will give you access to the InspectionChamber on every page without any further modification of your project.

Installing as a node package

To install astro-vtbot as a node package without the integration, run the following command in your project directory:

1
npm install astro-vtbot