Client-Side Pages, Components, and Interactivity

Adding Components

---

Svelte Components

A component is a self-contained piece of code that can be reused in different parts of the application. Each component consists of three optional parts: script, HTML template, and style. The script part contains the JavaScript logic of the component, the HTML template part contains the structure of the component, and the style part contains the styling of the component.

<script>
  // JavaScript goes here
</script>

<!-- HTML template goes here -->

<style>
  /* CSS goes here */
</style>

The three parts are optional, and a component can e.g. be created without the script part and without the style part.

In Svelte, the common practice is to keep the +page.svelte files as lean as possible and put most reusable or complex UI/functionality into separate components.

Creating and using components

Create a folder called components in the src/lib folder of the client-side project. Then, create a file called Header.svelte to the src/lib/components folder.

Component names are typically written in PascalCase (e.g., Header.svelte, UserProfile.svelte).

Place the following content to the file. The component has only the HTML template part, and it contains an h1 element with the text “Hello, Component!”.

<h1>Hello, Component!</h1>

To use the component, we need to import it to the application. Open the src/routes/+page.svelte file and modify it to match the following.

<script>
  import Header from "$lib/components/Header.svelte";
</script>

<Header />

Above, in the script area, we first import the component from the $lib/components/Header.svelte file using the import statement. Then, in the template area, we use the component by adding <Header /> to the HTML template. This tells Svelte to render the Header component at that location in the page.

The $lib alias is a special alias that points to the src/lib folder, making it easier to import components and other files from there.

Now, when we open the application in the browser, we should see the component being displayed on the page, as shown in Figure 1.

Fig 1. — The browser shows the application, displaying the text ‘Hello, Component!’ from the Header.svelte component.

Loading Exercise...

Let’s continue by creating another component called Footer. Create a file called Footer.svelte to the src/lib/components folder, and place the following content to the file. The component has only the HTML template part, and it contains a footer element with a paragraph that has the text “Thanks for visiting!”.

<footer>
  <p>Thanks for visiting!</p>
</footer>

With the component in place, add it again to the src/routes/+page.svelte file, placing it at the bottom. The file should now look like the following.

<script>
  import Header from "$lib/components/Header.svelte";
  import Footer from "$lib/components/Footer.svelte";
</script>

<Header />
<Footer />

With the newly created footer, the application should now display the header and the footer when opened in the browser. The application should look like the one shown in Figure 2.

Fig 2. — The browser shows the application, displaying the header and the footer.

Loading Exercise...

Code in components

The script area of components can — and often does — contain JavaScript code. In the following, we declare two variables called “name” and “version”.

<script>
  let name = "Svelte";
  let version = 5;
</script>

<h1>Hello!</h1>

Variable values can be injected to the HTML part of a component using braces {}, where the variable name is placed inside the curly brackets. The following example shows how to display the variable name in the HTML part of the component.

<script>
  let name = "Svelte";
  let version = 5;
</script>

<h1>Hello {name}!</h1>

With the above component, the application would look similar to the one shown in Figure 1. The value of the variable name is injected to the page, displaying the text “Hello Svelte!”.

Fig 3. — The value of the variable “name” is injected to the HTML part.

Loading Exercise...

Inline expressions

Curly brackets {} can also be used to inject JavaScript expressions to the HTML part of a component. The following example shows how to display the value of the variable version multiplied by 2.

<script>
  let name = "Svelte";
  let version = 5;
</script>

<h1>Hello {name}! The version is {version * 2}.</h1>

The above component would show the text “Hello Svelte! The version is 10.” in the browser.

An inline expression is a piece of code written directly within curly braces {} in a template, used to display or manipulate data dynamically, such as {version * 2} or {version === 5 ? 'Yes' : 'No'}.

Inline expressions may also contain method calls. As an example, the following component calls the toUpperCase method of the String variable name.

<script>
  let name = "Svelte";
  let version = 5;
</script>

<h1>Hello {name.toUpperCase()}! The version is {version * 2}.</h1>

Now, the text “Hello SVELTE! The version is 10.” is displayed in the browser.

Loading Exercise...

Summary

To summarize:

• A Svelte component is a self-contained piece of code that can be reused in different parts of the application.
• A component consists of three optional parts: script, HTML template, and style.
• Components are created by creating a .svelte file and adding the component code to it. Component names are typically capitalized and use camel case.
• Components are used by importing them to the application (e.g. to a +page.svelte file) and referencing them in the HTML template. The $lib alias is a special alias that points to the src/lib folder.
• Variables and expressions can be injected to the HTML part of a component using curly brackets {}.

Loading Exercise...