Svelte Nesting Components
Last Updated :
22 Jul, 2024
Nesting in svelte is a way to combine different components to get the desired user interface we want, we can combine our own components or use 3rd party components in our svelte application
Why do we need nesting?
If we will use a single component to contain all the segments and functionalities of our application then it becomes very impractical and hectic to manage a large codebase so, dividing our app in different components helps in re-usability as well as make it easier to debug the errors if present in an individual component rather than jumping around the whole codebase
Nesting in svelte allows to import components from other files (any-name.svelte) and use them as if they were HTML elements <your_component>
So, first of all, we will use two different components named header and img:
Syntax:
import component_name from "./component_name.svelte";
<component_name/>
Parameter description:
- component_name.svelte: Use the name of your component for importing it into another component or App.svelte for nesting.
- <component_name/>: Use the name of your imported component as an HTML tag to use it inside any component or App.svelte file.
Header_component: Save the below code inside the header.svelte file:
JavaScript
<script>
</script>
<style>
#header {
background-color: black;
color: white;
}
button {
background-color: yellow
}
button:hover {
background-color: #00FF00;
transform: scale(1.2)
}
#a {
margin-left: 410px
}
</style>
<div id='header'>
My-app
<button id='a'>
option-a
</button>
<button id='b'>
option-b
</button>
<button id='c'>
option-c
</button>
</div>
img_component: Save the below code inside img.svelte file:
JavaScript
<script>
// here loc is exported as a prop which
// can be dynamically changed from outside
export let loc =
'https://media.geeksforgeeks.org/wp-content/uploads/20221011144212/gfgcrop-300x148.png';
function prev() {
loc =
'https://media.geeksforgeeks.org/wp-content/uploads/20221011144212/gfgcrop-300x148.png';
}
function next() {
loc =
'https://media.geeksforgeeks.org/wp-content/uploads/20221011163934/pic1-300x147.png';
}
</script>
<style>
img {
width: 800px;
}
#foot {
height: 50px;
width: 800px;
background-color: aqua;
}
</style>
<div>
<img src="{loc}" alt="image">
</div>
<div id='foot'>
<button on:click={prev}>PREV</button>
<button on:click={next}>NEXT</button>
</div>
Now we will open the App.svelte file and use the following code:
Example 1:
JavaScript
<script>
import Top from "./top.svelte";
import ImageDiv from "./image_div.svelte";
</script>
<div>
<p>
<b>#As you can see both components are
now combined inside App.svelte file</b>
</p>
<Top />
<ImageDiv />
</div>
Note: As you can see we can use individual components as a separate HTML tag <>
Output:
Please note the CSS styling we choose inside the component remains connected to the same component and does not affect the styling of another component, styling isolation feature in svelte provides error-free styling
Example 2: Now we are going to create another component that will hold profile pic, name, email, and skills for developers, this component will have props to set the values of the component externally from the App.svelte file
So first create a geeks.svelte file and paste the following code to create the geeks component.
JavaScript
<script>
export let name = 'default',
email = 'default',
skills = 'default',
profile =
'https://media.geeksforgeeks.org/wp-content/uploads/20221011173439/Defaultdp-199x200.png';
</script>
<style>
#profile {
width: 500px;
height: 200px;
background-color: black;
margin-left: 150px;
color: #50C878;
border-radius: 25px;
}
img {
width: 50px;
height: 50px;
margin-top: 5px;
;
}
h3 {
margin-left: 150px;
}
</style>
<div id='profile'>
<img src={profile} alt="profile-pic">
<h3>Name = {name}</h3>
<h3>Email = {email}</h3>
<h3>skills = {skills}</h3>
</div>
Now we will open the App.svelte file and use the following code:
We can call the geeks component inside App.svelte file using the <geeks> tag and pass props to it so it can display the values we want to appear on the display.
App.svelte
JavaScript
<script>
import Top from "./top.svelte";
import ImageDiv from "./image_div.svelte";
import Geeks from "./geeks.svelte";
</script>
<div>
<p>
<b>#As you can see both components are
now combined inside App.svelte file</b></p>
<Top />
<ImageDiv />
<Geeks name=mohit email=anything@gmail.com skills=frontend />
<br>
<Geeks name=bablu email=bablu@gmail.com skills=backend />
<br>
<Geeks name=ankit email=ankit@gmail.com skills=fullstack />
<br>
<Geeks name=shreya email=shreya@gmail.com skills=devops />
</div>
Output:
Reference: https://svelte.dev/tutorial/nested-components
Similar Reads
Vue.js Reusing Components
Vue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers
4 min read
Next.js Components
Next.js components are integral to building modular and efficient applications, offering tools like Image, Link, Script, and Font to handle media, navigation, scripts, and typography effectively. These components enhance performance and streamline development in Next.js. Table of Content What is a C
4 min read
ReactJS | Components - Set 2
In our previous article on ReactJS | Components we had to discuss components, types of components, and how to render components. In this article, we will see some more properties of components. Composing Components: Remember in our previous article, our first example of GeeksforGeeks's homepage whic
3 min read
Vue.js Dynamic Components
Vue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers
3 min read
React Suite Nav Component
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. Nav component allows the user to provide a list of various forms of navigation menus. We can use the following approach in ReactJS to use the React Suite Nav Com
3 min read
Svelte Building Components
Components: In svelte a web application is built up from components, a component is nothing but encapsulated, reusable block of code which wraps up HTML, CSS, and JS into a single file .svelte components help in dividing our web page into smaller individual units, which can be called into App.svelte
3 min read
React JS Component Composition
In React, it becomes difficult to manage the complex UI components and maintain the code. With the help of Component Compositions, we can solve this problem by combining the components into a single component. What is Component Composition?Component composition in React includes one or more componen
5 min read
Lazy Loading Components in VueJS
Lazy Loading, fundamentally, is a design principle that delays the initialization of an object or a resource until the point at which it is genuinely required. The purpose of lazy loading is to postpone downloading parts of the application that are not needed by the user on the initial page load whi
2 min read
React Suite Nav Usage Component
React suite is a library of React components that has sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, we'll learn about React Suite Nav Usage
4 min read
VueJS Component
Vue.js components are essential for creating adaptable and organized web applications. They let you divide your user interface into separate, self-sufficient sections, each handling its own specific part of the UI. This modular structure enhances the management and organization of complex applicatio
4 min read