Astro Integration

Integrate with Astro

Astro is a very popular polyglot framework, mainly due to it's capabilities of integrating multiple ui libraries within it.

You can also build fast webapps using Weblabs by integrating it inside of astro, and it is actually super easy to do.

Weblabs does not support SSR, hence it has no SSR driver for Astro. Use Weblabs when you need performant webapp but not reliant on SEO, i.e dashboards, editors and so on.

Using Script Tag

You can directly integrate weblabs inside of astro pages via scripts, that also supports modularity, and can import other weblabs components from your codebase or npm.

index.astro

---
---
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <div id="app"></div>
        <script>
            import { render } from '@weblabsjs/core'
            import { p } from '@weblabsjs/core/components'
            
            render("app", p("Hello world from Weblabs"))
        </script>
    </body>
</html>

Using External Codebase

You can create a dedicated directory for weblabs components/pages and then import them into the astro pages as required.

src/weblabs/index.ts

import { render } from '@weblabsjs/core'
import { p } from '@weblabsjs/core/components'

export default function myApp() {
    render("app", p("Hello World"))
}

---
---
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <div id="app"></div>
        <script>
            import myApp from '../weblabs/index'
            myApp()
        </script>
    </body>
</html>

This is how you can add performant Weblabs components inside of your views. You can also do this in pretty much any framework of your wish, make sure you call render and that's all. We are also working on an intercom for isolated components, to and from react or any other component to enable them sharing data through a global network of namespaces.

PreviousRouting NextAPI Reference

Last updated 2 years ago

hashtagUsing Script Tag

hashtagUsing External Codebase

Using Script Tag

Using External Codebase