AstroHow-ToBeginner · 3 min read

How to Use Solid with Astro: Simple Integration Guide

To use Solid with Astro, install the @astrojs/solid integration and add it to your astro.config.mjs. Then, import Solid components in your Astro files and render them using the <Counter /> syntax.

📐

Syntax

First, install the Solid integration for Astro. Then, add it to your Astro config file. Import Solid components in your Astro pages or components and use them like regular components.

Installation: Use npm install @astrojs/solid.
Config: Add solid() to the integrations array in astro.config.mjs.
Usage: Import Solid components and use them with JSX-like syntax inside Astro files.

javascript

import { defineConfig } from 'astro/config';
import solid from '@astrojs/solid';

export default defineConfig({
  integrations: [solid()],
});

💻

Example

This example shows a simple Solid component used inside an Astro page. The Solid component displays a button that updates a counter when clicked.

astro

// src/components/Counter.jsx
import { createSignal } from 'solid-js';

export default function Counter() {
  const [count, setCount] = createSignal(0);
  return (
    <button onClick={() => setCount(count() + 1)}>
      Clicked {count()} times
    </button>
  );
}

---

---

<!-- src/pages/index.astro -->
---
import Counter from '../components/Counter.jsx';
---
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Solid with Astro Example</title>
  </head>
  <body>
    <h1>Solid Counter in Astro</h1>
    <Counter />
  </body>
</html>

Output

<h1>Solid Counter in Astro</h1> <button>Clicked 0 times</button> (button increments count on click)

⚠️

Common Pitfalls

Common mistakes when using Solid with Astro include:

Not installing or adding the @astrojs/solid integration in astro.config.mjs.
Forgetting to import Solid components before using them.
Using Solid component files without the proper .jsx or .tsx extension.
Trying to use Solid state or hooks outside Solid components.

Always ensure your Solid components are self-contained and imported correctly.

javascript

/* Wrong: Missing integration in astro.config.mjs */
// Astro config without solid integration
import { defineConfig } from 'astro/config';

export default defineConfig({
  integrations: [], // solid() missing here
});

/* Right: Adding solid integration */
import { defineConfig } from 'astro/config';
import solid from '@astrojs/solid';

export default defineConfig({
  integrations: [solid()],
});

📊

Quick Reference

Summary tips for using Solid with Astro:

Install @astrojs/solid and add it to astro.config.mjs.
Use .jsx or .tsx files for Solid components.
Import Solid components in Astro files before use.
Use Solid components with JSX syntax inside Astro.
Keep Solid state logic inside Solid components only.

✅

Key Takeaways

Add the @astrojs/solid integration in astro.config.mjs to enable Solid support.

Import and use Solid components with JSX syntax inside Astro files.

Keep Solid state and hooks inside Solid components only.

Use .jsx or .tsx extensions for Solid components for proper recognition.

Double-check imports and integration setup to avoid common errors.