CODEWITHSUNDEEP
sveltesveltekit
blnks
blnks

Reputation: 1161

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?

Upvotes: 32

Views: 20950

Answers (3)

blnks
blnks

Reputation: 1161

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>

Upvotes: 50

Roko C. Buljan
Roko C. Buljan

Reputation: 206508

Inside the main +layout.svelte file you could use the page store:

<script>
    //...
    import { page } from "$app/stores";

    const appName = "My App";
    $: title = [appName, ...$page.url.pathname.split("/").slice(1)].filter(Boolean).join(" - ");
</script>

<svelte:head>
    <title>{title}</title>
</svelte:head>

will result for example in:

Route Title
/ My App
/about My App - about
/products/345 My App - products - 345

Upvotes: 5

joy
joy

Reputation: 247

From my understanding you want to change the title as go.

To get this I don't suggest using two way binding, since 'variable' you are inputting to bind is not actually a variable but a space box which is functioned for binding. Just pass the title and it might work.

Since people need direct answers instead of explaining the issues.

//../components/meta-title.svelte

<svelte:head>
   <title>{title}</title>
</svelte:head>

<script>
   export let title = "default title for page"
</script>


//../pages/_layout.svelte

<Meta title="This is a dynamic title" />

Let me know if it doesn't work.

Thank you

Upvotes: 7

Related Questions