A static site building framework giving high speed performance and a modernized development flow. Astro converts your website source code to static HTML during the building process, resulting in an almost fully static website with minimal JavaScript leftover. This results in maximized speed for loading content from the web browser.
Questions tagged [astrojs]
196 questions
12
votes
7 answers
How do I pass a server variable to client side JS in astro?
I found this (github) html starter page for google auth, and I wanted to make it into a astro component. Im wanted to convert this to a .astro file and be able to pass in the variables for CLIENT_ID and API_KEY from the backend. I
Here's the HTML…
ThomasReggi
- 55,053
- 85
- 237
- 424
9
votes
3 answers
How can I render a astro component to a HTML string?
I'd like to be able to have a dynamic page in Astro that renders out an Astro component. I've dug into the docs and code, and couldn't find a function like the one below (Astro.render). Ideally, I can pass properties into it. I'm looking for…
ThomasReggi
- 55,053
- 85
- 237
- 424
8
votes
4 answers
How to get the querystring parameters with Astro
I'm using quite a new technology called Astro (https://astro.build/) to build a completely static, server side rendered page, shipping zero JS.
I have a page with a form that is a simple text input, when the user fills this in and clicks the submit…
DrLazer
- 2,805
- 3
- 41
- 52
7
votes
0 answers
How to customize markdown with Astro components?
md vs mdx
md import pipeline renders to html, mdx import pipeline renders to .js/.ts/.jsx... which allows to customize html tags with Astro components.
goal
I would like to take advantage of the mdx power in .md files with Astro
what I tried
tried…
wassfila
- 1,173
- 8
- 18
7
votes
4 answers
How to use document and window element in astro JS?
I want to use window or document to return path of the current page default Astro.site.pathname isn't working right or proper documentation isn't available.
My question is how to use document or window properly in Astro JS?
Thanks in advance!
Manish Shahi
- 93
- 1
- 7
6
votes
0 answers
Unable to polyfill `Object.fromEntries` using babel/preset-env
Am I misunderstanding something about or misconfiguring babel/preset-env?
I'm using babel configs for vite using vitejs/plugin-legacy, but for AstroJS project.
plugins: [
legacy({
targets: ['defaults', 'not IE 11', 'ios_saf > 10']
})
]
From…
Chill3n
- 61
- 1
- 2
5
votes
2 answers
How to share state among components in Astro?
I believe I'm taking the wrong approach in my code, how can I set a client side preference in a button click that is used as a prop in all my astro components globally? Or how should I do this? I know it is possible since astro js themselves do this…
Daniel Guedes
- 387
- 1
- 4
- 14
5
votes
2 answers
Error in initiating astro after choosing a framework
I'm trying to initiate astro. When i don't choose a framework i get this error although i have git installed and fully working. Any help will be highly appreciated.
√ Which frameworks would you like to use? »
> Copying project files...
could not…
yarshehry
- 51
- 1
4
votes
1 answer
How to integrate MUI in React Integrated Astro site?
I am learning Astro. I thought of using MUI's material components, like Button, Typography, etc., in the Astro components as I already enabled React integration.
astro.config.js
import { defineConfig } from 'astro/config';
import react from…
Sara Lufi
- 95
- 1
- 6
4
votes
2 answers
Astro: How to proxy service calls
I am setting up an Astro site which will display data fetched from a simple service running on the same host but a different port.
The service is a simple Express app.
server.js:
const express = require('express')
const app = express()
const port =…
Jonathan.Brink
- 23,757
- 20
- 73
- 115
3
votes
2 answers
Astro: Eslint was configured to run on
i was trying to set my eslint configuration up with react, typescript and astro, but seems i can't shake this error off:
Here is my .eslintrc.cjs, which looks like:
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
…
Gabriel Pureliani
- 263
- 4
- 8
3
votes
1 answer
How would you pass a Markdown component to a React or Preact component in Astro?
Similarly to how you can pass Markdown components to Astro components, I want to import one into a React/Preact component.
It didn't seem to be working directly when I imported the component into the React/Preact, so I tried passing them in from the…
Cassidy
- 3,328
- 5
- 39
- 76
3
votes
2 answers
Import Bootstrap in Astro
I am currently working on Astro (astro.build) and would like to use it with the latest Bootstrap version.
Does anyone know about Astro and can please explain to me how to properly integrate Bootstrap?
Didn't find anything on the internet or here in…
Andreas
- 39
- 1
- 7
3
votes
0 answers
Tailwind classes not getting applied for Astro Layouts
I am using Astro Tailwind integration, and I am trying to add some tailwind classes to MainLayout.astro which resides in layouts directory as follows
...
user158
- 12,852
- 7
- 62
- 94
3
votes
1 answer
How to add Vuetify to astro?
I'm having trouble adding Vuetify 3 to Astro when using the Vue integration.
This is what I have so far:
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
import vuetify from 'vite-plugin-vuetify';
//…
Cesar Martinez Dominguez
- 446
- 4
- 20