Integrating a Svelte Component into an Astro.js Project

Set Up a Svelte Project

1. Initialize a new Svelte project:

   npx degit sveltejs/template svelte-app
   cd svelte-app
   npm install
   

Create Your Svelte Component

2. In src, create your Svelte component, e.g., MyComponent.svelte:

   <script>
     export let name;
   </script>
   
   <style>
     /* Add your styles here */
   </style>
   
   <div>
     Hello {name}!
   </div>
   

Build the Svelte Component

3. Install Vite and create a build configuration:

   npm install vite @sveltejs/vite-plugin-svelte --save-dev
   

4. Create a vite.config.js file in the root of your project:

   import { defineConfig } from 'vite';
   import { svelte } from '@sveltejs/vite-plugin-svelte';
   
   export default defineConfig({
     plugins: [svelte()],
     build: {
       lib: {
         entry: 'src/MyComponent.svelte',
         name: 'MyComponent',
         fileName: (format) => `my-component.${format}.js`
       },
       rollupOptions: {
         external: ['svelte/internal'],
         output: {
           globals: {
             'svelte/internal': 'svelte'
           }
         }
       }
     }
   });
   

Build the Library

5. Run the build command:

   npx vite build
   

Include in Astro Project

6. Copy the built file (dist/my-component.umd.js) to your Astro project.

7. In your Astro project, install the Svelte integration:

   npm install @astrojs/svelte
   

8. Update astro.config.mjs to include the Svelte integration:

   import { defineConfig } from 'astro/config';
   import svelte from '@astrojs/svelte';
   
   export default defineConfig({
     integrations: [svelte()],
   });
   

Use the Svelte Component in Astro

9. In an Astro component, import and use the Svelte component:

   ---
   import { SvelteComponent } from 'svelte';
   import MyComponent from './path/to/my-component.umd.js';
   ---
   
   <MyComponent name="Astro"/>