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 as an integration in addition gives you access to The Bag’s DevToolbar App with the ability to open the Inspection Chamber on any page during dev mode.

If you’re unsure, go with installing it as an integration!

Contents

• Installing as an Astro integration
  • Changes introduced with astro-vtbot 2.0
• Installing as a node package

Installing as an Astro integration

Installing astro-vtbot as an Astro integration will install the package and it will add the Bag’s devToolbar app that lets you open the InspectionChamber on any page during development mode.

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 trice to answer the questions with “yes”:

1
⚠ astro-vtbot is not an official Astro package.
2
✔ Continue? … yes
3
✔ Resolving with third party packages...
4

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@^2.0.0  │
10
 ╰─────────────────────────────────╯
11

12
✔ Continue? … yes
13
✔ Installing dependencies...
14

15
  Astro will make the following changes to your config file:
16

17
 ╭ astro.config.ts ──────────────────────────────╮
18
 │ import { defineConfig } from 'astro/config';  │
19
 │                                               │
20
 │ import vtbot from 'astro-vtbot';              │
21
 │                                               │
22
 │ export default defineConfig({                 │
23
 │   integrations: [vtbot()],                    │
24
 │ });                                           │
25
 ╰───────────────────────────────────────────────╯
26

27
✔ Continue? … yes
28

29
   success  Added the following integration to your project:
30
  - astro-vtbot

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.

Changes introduced with astro-vtbot 2.0

Installing astro-vtbot as an integration used to add vtbot’s <LoadingIndicator /> component and <Linter /> component to all pages that use Astro’s <ClientRouter />. This behavior was changes in 2.0: None of these features will be added automatically anymore.

You can still get the former behavior by explicitly setting the loadingIndicator option and/or the autoLint option of vtbot in your astro.config file to true (the default is now false):

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

As an alternative to the loadingIndicator, you can also add the <ProgressBar /> component to your Layout.astro.

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