Search code examples
sveltesveltekit

How to change page title dynamically in Sveltekit?

I'm learning SvelteKit and this might be a very elementary question. But I could not figure out how to change the tab's title.

In my src/+layout.svelte I have:

    <script>
        let title="My Site Homepage"
    
    </script>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        ...
      <title>{title}</title>
  
   </head>

Then in my /src/faq/+page.svelte I'd like to change the title to 'FAQ'

So I put

<script>
    let title="FAQ"        
</script>

But when I visit http://localhost:5173/faq the tab's title is not changed. So I'm wondering how can I do that? Is there an idomatic way to do so?

Solution

  • Well, thanks svelte docs, I found my answer.

    The svelte:head element allows you to insert elements inside the <head> of your document:

    So I just need to add this to FAQ page:

    <svelte:head>
    <title>FAQ</title> 
</svelte:head>