#--

3 messages · Page 1 of 1 (latest)

broken rivetBOT
#

Hi @delicate geyser. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Yes, it is possible to import a component into your script code in Astro. You can import other Astro components, framework components like React, data like a JSON file, and more. Here's an example from the Astro documentation:

---
import SomeAstroComponent from '../components/SomeAstroComponent.astro';
import SomeReactComponent from '../components/SomeReactComponent.jsx';
import someData from '../data/pokemon.json';
// Access passed-in component props, like `<X title="Hello, World" />`
const { title } = Astro.props;
// Fetch external data, even from a private API or database
const data = await fetch('SOME_SECRET_API_URL/users').then(r => r.json());
---
<!-- Your template here! -->

In this example, SomeAstroComponent and SomeReactComponent are imported and can be used in the template section of the Astro component. The imported components can be used directly in your HTML template.

However, note that the console.log(Component) line in your code won't work as expected. Astro components are not JavaScript objects that can be logged to the console. They are used to render HTML and should be used in the template section of your Astro component.

For more information, you can refer to the Astro documentation on component scripts (https://docs.astro.build/en/basics/astro-components/#the-component-script).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@delicate geyser kapa.ai is still learning and improving, please let us know how it did by reacting below