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 the tab's title is not changed.
So I'm wondering how can I do that? Is there an idomatic way to do so?
2 Answers
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>
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
