What is $lib in SvelteKit all about?

In SvelteKit, typically you place code which is shared by multiple pages in a src/lib directory. You might include Svelte components as well as utility functions here. $lib is just an alias for src/lib. In fact, in the config it is defined as an absolute path. When importing code from src/lib, instead of a relative path, you can use $lib. The advantage here is that code looks cleaner when importing from a deeply nested folder. On top, it saves you having to count the number of '../' patterns in your path is correct after refactoring. In fact, you can just copy a $lib import statement to any other file and have it just work!

Where is the $lib alias defined in SvelteKit config?

$lib is defined in the tsconfig.json paths object. This is included by default at .svelte-kit/tsconfig.json file. It is included in default config even if you are not using TypeScript.

How can you define your own custom import aliases like $lib in SvelteKit?

You can edit the jsconfig.json file in the root folder of your project to add your own, custom, import aliases. We have seen you need to edit tsconfig.json instead if you are working in TypeScript. Either way, just define the `baseUrl` as "." and then add a paths object which defines the paths your aliases reference. Once defined, VS Code will recognize these aliases.

SvelteKit $lib Import Aliases # SvelteKit $lib Import Aliases #

SvelteKit $lib Import Aliases #

Published: 3 years ago

3 minute read

Gunning Fog Index: 4.7

Content by Rodney

📚 SvelteKit `$lib` #

SvelteKit code often includes the SvelteKit $lib import alias. If you are new to SvelteKit, you might have seen this and wondered what it does. In the video, you will see SvelteKit $lib is nothing more than an alias for the src/lib folder. Typically, you will add a components folder in here, as well as folders for other code which you want to share between pages and endpoints. You might also have asked yourself where $lib is defined within the SvelteKit config files, as well as how you can create your own custom aliases. In this short video, we tackle all of that as well as look at a quick example.

If that’s what you wanted to know, then hit play on the video! After that, don’t forget to check links below. You will also find a handy code snippet, below, referenced in the video. Drop a comment below or reach out for a chat on Element as well as Twitter @mention if you have suggestions for improvements or questions.

📹 SvelteKit `$lib`: Video #

Please enable JavaScript to watch the video 📼

SvelteKit $lib Import Aliases

🗳 Poll #

What were you most familiar with before trying SvelteKit?

🖥 SvelteKit `$lib`: Code #

Defining your own aliases in `jsconfig.json` / `tsconfig.json` #

Here we define a custom $tests alias which maps to the tests directory:

jsconfig.json or tsconfig.json

json

    1 {
2   "compilerOptions": {
3     "baseUrl": ".",
4     "paths": {
5       "$tests": [
6         "tests"
7       ],
8       "$tests/*": [
9         "tests/*"
10       ]
11     },
12   },
13   "extends": "./.svelte-kit/tsconfig.json"
14 }

🔗 SvelteKit `$lib`: Links #

10 tips for getting started with SvelteKit,
Automated accessibility testing with Playwright in SvelteKit,
Twitter handle: @askRodney .

🏁 SvelteKit `$lib`: Summary #

What is $lib in SvelteKit all about? #: In SvelteKit, typically you place code which is shared by multiple pages in a src/lib directory. You might include Svelte components as well as utility functions here. $lib is just an alias for src/lib. In fact, in the config it is defined as an absolute path. When importing code from src/lib, instead of a relative path, you can use $lib. The advantage here is that code looks cleaner when importing from a deeply nested folder. On top, it saves you having to count the number of '../' patterns in your path is correct after refactoring. In fact, you can just copy a $lib import statement to any other file and have it just work!
Where is the $lib alias defined in SvelteKit config? #: $lib is defined in the tsconfig.json paths object. This is included by default at .svelte-kit/tsconfig.json file. It is included in default config even if you are not using TypeScript.
How can you define your own custom import aliases like $lib in SvelteKit? #: You can edit the jsconfig.json file in the root folder of your project to add your own, custom, import aliases. We have seen you need to edit tsconfig.json instead if you are working in TypeScript. Either way, just define the `baseUrl` as "." and then add a paths object which defines the paths your aliases reference. Once defined, VS Code will recognize these aliases.

🙏🏽 Feedback #

If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention, so I can see what you did. Finally, be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.

Just dropped a new video explaining what the

$lib import aliases in ❤️ SvelteKit are all about.

Hopefully, you'll find it useful if you are new to Svelte.

Let me know what else you struggle(d) with learning Svelte and SvelteKit 🧑🏽‍🎓https://t.co/dPZuk7XDu2
— Rodney (@askRodney) April 11, 2022

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.

SvelteKit $lib Import Aliases # SvelteKit $lib Import Aliases #

📚 SvelteKit $lib #

📹 SvelteKit $lib: Video #

🗳 Poll #

🖥 SvelteKit $lib: Code #

Defining your own aliases in jsconfig.json / tsconfig.json #

🔗 SvelteKit $lib: Links #

🏁 SvelteKit $lib: Summary #

What is $lib in SvelteKit all about? #

Where is the $lib alias defined in SvelteKit config? #

How can you define your own custom import aliases like $lib in SvelteKit? #