Svelte

How to integrate Webcore into Svelte

This documentation helps you guide through the steps to integrate Webcore into your Svelte 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 Svelte with Webcore:

npm create webcore@latest

If you’d like to integrate Webcore into an existing project, you can follow the steps below to configure it manually.

• Create a new Svelte Project

  If you don’t have an existing project, start by creating a new Svelte project by running the following command in your terminal:

  npm create vite@latest my-app -- --template svelte-ts

• Add Webcore

  Add Webcore as a dependency by running the following command in your terminal:

  npm i webcoreui

• 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 styles.scss file in your src folder, then add the following lines to setup default styles and fonts by calling the setup mixin:

  @use 'webcoreui/styles' as *;
  @include setup((
      fontRegular: '/fonts/Inter-Regular.woff2',
      fontBold: '/fonts/Inter-Bold.woff2'
  ));

  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 the public/fonts directory.

  Import this file into your main.ts file to add the necessary CSS to your app:

  import App from './App.svelte'
  import './styles.scss'
  
  const app = new App({
      target: document.getElementById('app')!,
  })
  
  export default app

• Using Components

  That’s it! You’re all set to start using Webcore components in your Svelte project. Import components from webcoreui/svelte:

  <script>
      import { Alert } from 'webcoreui/svelte'
  </script>
  
  <Alert theme="info">Webcore is ready</Alert>

  Then run your dev server using the following command to view your app:

  npm run dev

Source Code