How to Create Svelte Component Libraries with SvelteKit
Simplify the process of making Svelte modules with SvelteKit
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…