Skip to content
Astro Integration Kit

addDevToolbarFrameworkApp

addDevToolbarFrameworkApp allows you to register a framework component as a Dev Toolbar App! You can now use a React, Preact, Solid, Vue or Svelte component instead of manipulating the DOM imperatively!

integration/index.ts
1
import {
2
    defineIntegration,
3
    createResolver,
4
    addIntegration,
5
    addDevToolbarFrameworkApp,
6
} from "astro-integration-kit";
7
import Vue from "@astrojs/vue";
8


9
export default defineIntegration({
10
    // ...
11
    setup() {
12
        const { resolve } = createResolver(import.meta.url);
13


14
        return {
15
            hooks: {
16
                "astro:config:setup": (params) => {
17
                    addIntegration(params, {
18
                        integration: Vue(),
19
                    })
20


21
                    addDevToolbarFrameworkApp(params, {
22
                        framework: "vue",
23
                        name: "Test Vue Plugin",
24
                        id: "my-vue-plugin",
25
                        icon: `<svg version="1.1" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"/></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"/></g></g></svg>`,
26
                        src: resolve("./my-plugin.vue"),
27
                        style: `
28
                            h1 {
29
                                font-family: Inter;
30
                            }
31
                        `,
32
                    })
33
                }
34
            }
35
        }
36
    }
37
})
integration/my-app.vue
1
<script setup lang="ts">
2
    import { ref } from 'vue'
3


4
    const count = ref(0)
5
</script>
6


7
<template>
8
    <h1>Count is: {{ count }}</h1>
9
    <button type="button" @click="count++">Increment</button>
10
</template>

Component Props

addDevToolbarFrameworkApp initialises your framework component with three props:

canvas

Type: HTMLElement The root ShadowDOM node that holds your whole application.

eventTarget

Type: EventTarget Allows you to set and listen to events from the server. See the Client-side Events docs for more info.

renderWindow

Type: HTMLElement Physical window shown when your app is opened.

Dev Toolbar App docs For more info on these props, see the Dev Toolbar App docs
integration/plugin.tsx
1
 import type { DevToolbarFrameworkAppProps } from "astro-integration-kit";
2


3
 export default function App({ canvas, eventTarget, renderWindow }: DevToolbarFrameworkAppProps) {
4
     return <div>...</div>
5
 }

Adding Framework-specific Integrations

It’s recommended to manually add the official Astro integration for your chosen framework using the addIntegration utility instead of relying on your users to install and add it. addIntegration won’t re-add integrations, so you’re safe to call it even if your user has added it already.

addIntegration The addIntegration is used to add integrations from an integration.

This also means it’s a good idea to have the @astrojs/* framework package be a dependency of your integration package so the correct dependencies will definitely be installed.

integration/index.ts
1
import {
2
    defineIntegration,
3
    createResolver,
4
    addIntegration,
5
    addDevToolbarFrameworkApp,
6
} from "astro-integration-kit";
7
import Vue from "@astrojs/vue";
8


9
export default defineIntegration({
10
    // ...
11
    setup() {
12
        const { resolve } = createResolver(import.meta.url);
13


14
        return {
15
            hooks: {
16
                "astro:config:setup": (params) => {
17
                    addIntegration(params, {
18
                        integration: Vue(),
19
                    })
20


21
                    addDevToolbarFrameworkApp(params, {
22
                        framework: "vue",
23
                        name: "Test Vue Plugin",
24
                        id: "my-vue-plugin",
25
                        icon: `<svg version="1.1" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"/></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"/></g></g></svg>`,
26
                        src: resolve("./my-plugin.vue"),
27
                        style: `
28
                            h1 {
29
                                font-family: Inter;
30
                            }
31
                        `,
32
                    })
33
                }
34
            }
35
        }
36
    }
37
})

Styling

addDevToolbarFrameworkApp allows you to pass in a stylesheet through the option style.

This stylesheet gets injected into the shadow DOM of your plugin meaning it’s styles won’t leak out.

This is great so you don’t have to define your styles in your component or JS. You can create a stylesheet and use that as the styles for your app.

Tailwind CSS

Tailwind is not supported out of the box… Yet! 👀

As in you can’t just use Tailwind classes in your component and it’ll work. Even if you install the @astrojs/tailwind integration. The Tailwind integration currently has no way to attach styles generated to the shadow DOM of your plugin.

If you want to use Tailwind, your best option is to build the stylesheet yourself and read the file in your component.

my-integration/plugin.svelte
1
<script>
2
  const title = "Hello world"
3
</script>
4
<div>
5
  <h1 class="font-black text-5xl">{title}</h1>
6
</div>
tailwind.config.js
1
/** @type {import('tailwindcss').Config} */
2
export default {
3
  content: [
4
    './**/**/*.{svelte}',
5
  ],
6
}

Then you can run the Tailwind CLI and it will generate a CSS file for you.

Terminal window
pnpm i tailwindcss
pnpm exec tailwindcss -o ./src/styles.css

Then you can read that file in your integration.

integration/index.ts
1
import {
2
    defineIntegration,
3
    createResolver,
4
    addDevToolbarFrameworkApp,
5
} from "astro-integration-kit";
6
import Vue from "@astrojs/vue";
7
import { readFileSync } from "node:fs";
8


9
export default defineIntegration({
10
    // ...
11
    setup() {
12
        const { resolve } = createResolver(import.meta.url);
13


14
        return {
15
            hooks: {
16
                "astro:config:setup": (params) => {
17
                    addDevToolbarFrameworkApp(params, {
18
                        framework: "vue",
19
                        name: "Test Vue Plugin",
20
                        id: "my-vue-plugin",
21
                        icon: `<svg version="1.1" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"/></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"/></g></g></svg>`,
22
                        src: resolve("./my-plugin.vue"),
23
                        style: readFileSync(resolve('./styles.css'), 'utf-8'),
24
                    })
25
                }
26
            }
27
        }
28
    }
29
})