Astro
How to integrate Webcore into Astro
Source ↗️ Report Issue ↗️This documentation helps you guide through the steps to integrate Webcore into your Astro project. The easiest way to get started is to use the CLI. Run the following command in your terminal and follow the prompts to install Astro with Webcore:
If you’d like to integrate Webcore into an existing project, you can follow the steps below to configure it manually.
-
Create a new Astro Project
If you don’t have an existing project, start by creating a new Astro project by running the following command in your terminal:
-
Add Webcore
Add Webcore as a dependency by running the following command in your terminal:
-
Update Astro Configuration
Update your Astro configuration file with the following lines:
-
Create the CSS Configuration File
Add an empty
webcore.config.scss
file at the root of your project. You can read more about how you can configure your CSS using this file in the CSS Configuration section. -
Configure CSS
Create a
Layout.astro
component for your app that can hold global CSS for the default styles. Inside the component, setup default styles and fonts by adding the following mixin:Make sure the path to your fonts are correctly configured. The above example assumes your fonts are present in the
public/fonts
directory.You can download the fonts Webcore uses from thepublic/fonts
directory. -
Using Components
That’s it! You’re all set to start using Webcore components in your Astro project. Import components from
webcoreui/astro
:Then run your dev server using the following command to view your app:
Note:
Using Svelte components inside Astro components may cause the following TypeScript error:
Related issue on GitHub: #425. As a temporary workaround, you can ignore these warnings using the
@ts-ignore
annotation, or using@ts-nocheck
for ignoring an entire Astro file where Svelte components may be used.
Source Code
Request improvement for this page