How to create Svelte Nested Components?

Any application with some level of complexity will need multiple components. In this post, we will learn how to create Svelte Nested Components. Basically, this will act as a key catalyst for us to create bigger applications using Svelte.

In case you are new to Svelte, you can start with this detailed walkthrough of a basic Svelte application.

1 – Creating a New Svelte Component

To demonstrate the nesting of components, let’s create a new component. Imagine that this component has two attributes. First is the bookName and second is the author. The job of this component is to display both of these attributes.

<script>
    export let bookName;
    export let author
</script>
<div>
    <p>Book Name: {bookName}</p>
    <p>Author: {author}</p>
</div>

As you can see, we export two variables bookName and author. Basically, these are the props to our component.

We use them in the markup to display the name of the book and its author. Please note that here export keyword is important. Without this, the property value cannot be set from outside the consumer. And in case, we do not set anything within the component as well, the value is taken as undefined.

2 – Svelte Nested Components

Now that our component is ready, we have to use it in our application. In a typical Svelte application, the App component is the top-most component. We can basically nest our new component within the App component.

The first step is to import the Book component within the App component’s script section.

import Book from "./Book.svelte"

Also, we declare two variables that we intend to pass as props to the Book component. See below:

let bookName = "Eye of the World";
let author = "Robert Jordan";

Finally, we use the component in the markup as below:

<Book bookName={bookName} author={author} />

Here’s the complete code for the App component.

<script>
    import Book from "./Book.svelte"
    let bookName = "Eye of the World";
    let author = "Robert Jordan"
    
</script>

<p>Welcome to the Fantasy Library</p>
<Book bookName={bookName} author={author} />

Here, the Book component is nested within the App component.

3 – Self-extending Property Names

We can also improve the above piece of code by switching the property names as below:

<script>
    import Book from "./Book.svelte"
    let bookName = "Eye of the World";
    let author = "Robert Jordan"
    
</script>

<p>Welcome to the Fantasy Library</p>
<Book 
    {bookName} 
    {author} 
/>

This is because the name of the local variable in the App component is the same as the prop variables in the Book component. We can directly use curly braces with the variable name.

Conclusion

With this, we have successfully learnt how to create Svelte nested components. This is the first step to building bigger Svelte applications.

If you have any comments or queries, please write in the comments section below.