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
1
vote
1 answer
Why is the visibility of an element not changing when I add the 'hidden' class?
I'm trying to create a hamburger menu, and the hamburger icon is supposed to change to an 'x' icon when the menu is open. I'm using Tailwind in Astro JS and this is my html:

Tara
- 389
- 3
- 14
1
vote
1 answer
How was the Astro CLI wizard made?
So I started playing around with Astro and noticed the interactive CLI wizard that guides you through the setup steps after using npm create astro@latest is really nice, works well and actually looks good!
Does anyone know how it was made? Was there…

shine-on-me
- 13
- 2
1
vote
1 answer
How can I apply custom styles to only one Astro layout and all its child layouts?
This is the first time I use Astro (and components, in general), and applying styles is leading me to a dead end because of encapsulation.
What I want is to style certain layout (for example, a blog section) and all of its sub-layouts with a…

Nacho B
- 1,573
- 1
- 12
- 16
1
vote
1 answer
How to render multiple Markdown files on one page in Astro?
I want to render the contents of multiple .md files on a single page using Astro.
I have this file structure:
pages/
items/
item-1.md
item-2.md
item-3.md
// etc
index.astro
item-1.md looks like this:
---
title = 'Item…

Santa
- 43
- 4
1
vote
2 answers
How to use environement variable in client side Astro?
I would like to use an api key stored in an environment variable. I know I can just put it directly in the html (I don't think it is bad security wise since it is a public key). But I can't get access it an my react component.
useEffect(()=>{
…

Eye Patch
- 881
- 4
- 11
- 23
1
vote
0 answers
Loading PostCSS Plugin failed: Cannot find module 'fast-glob'
I was trying Astro build for the very first time. I follow the documentation and create an Astro app with npm create astro@latest and then npm install but when trying to run a server with npm run dev I am getting this error: Loading PostCSS Plugin…

Mohammad Farhan
- 131
- 1
- 8
1
vote
1 answer
Astro.js deployment: Media files not rendering
I've recently tried to deploy my 1st portfolio on github pages which is being built with Astro.js.
Everything looks as it should on dev mode, and the build doesn't start any errors, but when I access the page where my portfoli was deployed the…

pedro correia
- 23
- 4
1
vote
1 answer
Single page with Astro and Netlify CMS
I’m trying to create a Single page with astro and netlify cms, in which the admin should be able to add/remove/modify the page through /admin, but I’m struggling with the understanding of the folder structure.
So, as far as I know, I need to specify…

Don_Huan
- 85
- 2
- 10
1
vote
1 answer
use `document` in external TypeScript file within Astro project
I've switched to Astro after some difficulties getting Vite+Eleventy to cooperate. I have everything like I want it except that I can't have an external TypeScript module that interacts with the document. I think it may be two problems tied in a…

nshew13
- 3,052
- 5
- 25
- 39
1
vote
0 answers
Is there a way to make custom url destination based on source in vercel rewrites?
My goal is to extract URL from the pathname and then use that URL as a destination in vercel rewrites to make a proxy
let's say if a user try to open example.com/google.com/search?q=hello then it should rewrite to google.com/search?q=hello
In code I…

mapple
- 41
- 4
1
vote
2 answers
User Swiper.js in Astro.build
Please can anyone help me how I can use swiper or any other slider in astro.build?
Like we use in react.

Muhammad Khalil
- 13
- 1
- 4
1
vote
1 answer
Why does my website flash unstyled content?
I am hosting the following astro project on netlify, and every time i refresh a page i get a flash of unstyled content. any help would be appreciated.
Im handling styles using tailwindCss and the main layout for the page is:
---
import Navbar from…
1
vote
1 answer
ASTRO / Svelte / Rxfire: Named export 'collectionData' not found
I try to build my astro application. I have one component using svelte and rxFire, but when i try to build id, i receive this error. Try the suggestion bring me to another error like "default member is not exported". It can be a bug from firebase v9…

nevradub
- 238
- 1
- 9
1
vote
2 answers
How access environment variables from a Framework Components in Astro?
I'm working in a project using Astro and I am using a component with VUE. For this project I need to access some env vars.
I am able to access from the Astro templates, but I can't find a way to get in the VUE component. Is this possible?
1
vote
1 answer
Partial Hydration in Vue.Js
Lets say I have this simple structure as mounted Vue.js;
Normally vue.js mounted on
as empty and renders it later. And I…

Ünsal Korkmaz
- 224
- 4
- 17