How to Create Svelte Component Libraries with SvelteKit

Simplify the process of making Svelte modules with SvelteKit

Image by Text To Photo Editor. Background photo by Ryunosuke Kikuno on Unsplash

Update: 2022–8–20 Change in package functionality

Introduction

The SvelteKit documentation states that you can use the SvelteKit to build component libraries as well as apps. So I created my first Svelte component called Svelte-sidebar using SvelteKit. This is how I did it.

Installation

The following code will create a SvelteKit app. We call it my-project.

$ npm init svelte@next my-project
$ cd my-project
$ npm install
$ npm run dev

The last line above starts a server on http://localhost:3000/.

You must store all component files in the src/lib directory. In my case I have Sidebar.svelte, Nav.svelte, Aside.svelte, SidebarList.svelte, and Navbar.svelte in the src/lib directory.

lib/index.js

After creating your files, you need to export them in the src/lib/index.js file.

import Sidebar from './Sidebar.svelte'
import Nav from './Nav.svelte'
import Aside from './Aside.svelte'
import SidebarList from './SidebarList.svelte'
import Navbar from './Navbar.svelte'
 
export…