Svelte:Head doesn't update, when switch between pages

[UIX-Design]

In my Page Components, i use the <svelte:head> like this:

<svelte:head>
    <title>Website Title</title>
    <meta name="description" content="Website Description">
</svelte:head>

But when i switch between my pages, the svelte:head doesn't update... I always see the title and meta content from my Home Component.

When i use the svelte router package svero i don't have these issue...
How can i solve this?

[davidhorak]

@UIX-Design could you share with me the whole setup? It should work just fine as illustrated in the Live Preview from the Boilerplate project.

[UIX-Design]

@davidhorak good to hear, that the function works in your project. Sure...

Here is my App.svelte

<script>
import createRouter from '@spaceavocado/svelte-router';
import {router} from '@spaceavocado/svelte-router';
import {ROUTER_MODE} from '@spaceavocado/svelte-router';
import {HASH_TYPE} from '@spaceavocado/svelte-router';
import RouterView from '@spaceavocado/svelte-router/component/view';

createRouter({
    routes: [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/solutions/technic',
        name: 'Technic',
        component: Technic
      },
      {
        path: '/solutions/speed',
        name: 'Speed',
        component: Speed
      },
      {
        path: '/solutions/security',
        name: 'Security',
        component: Security
      },
      {
        path: '/solutions/content',
        name: 'Content',
        component: Content
      },
      {
        path: '/costs',
        name: 'Costs',
        component: Costs
      },
      {
        path: '/about',
        name: 'About',
        component: About
      }, 
      {
        path: '/imprint',
        name: 'Imprint',
        component: Imprint
      },
      {
        path: '/terms',
        name: 'Terms',
        component: Terms
      },
      {
        path: '/privacy',
        name: 'Privacy',
        component: Privacy
      },     
    ],
    mode: 'HISTORY',
  })
</script>

<div class="max-w-9xl mx-auto bg-white">
  <Header />
  <main>
    <SubmitDialog /> 
    <RouterView />
  </main>
  <Footer />
</div>

And my Header.svelte looks like this:

<script>
import RouterLink from '@spaceavocado/svelte-router/component/link';
import { currentPath, changePage } from '../../store.js';

let y = 0;

    const unsubscribe = changePage.subscribe(value => {
        if (value) {
            y = 0;
            changePage.update(n => false);
        }
    });

function handleScroll() {
        if (y > 10) {
            stickyNav = true;
        } else {
            stickyNav = false;
        }
    }

function handleOnCompleted() {
        y = 0;
        currentPath.update(n => n = window.location.pathname);
        stickyNav = false;
    }
</script>

<svelte:window bind:scrollY={y} on:scroll={handleScroll} />
<header>
    <nav>
        <RouterLink on:completed={handleOnCompleted} to="/" exact={true} activeClass="hello" aria-label="Go to Home">
         <ul>
            <li><RouterLink on:completed={handleOnCompleted} to="/costs">Costs</RouterLink></li>
            <li><RouterLink on:completed={handleOnCompleted} to="/about">About</RouterLink></li>
          </ul>
</nav>
</header>

My store.js looks like this:

import { writable } from 'svelte/store';

export const currentPath = writable('');
export const changePage = writable(false);

And my for e.g. costs page component looks like this:

<svelte:head>
    <title>Website Title</title>
    <meta name="description" content="Website Description.">
</svelte:head>

<script>
import Hero from '../components/partials/Hero.svelte'
import Button from '../components/partials/Button.svelte'
</script>

<div class="max-w-5xl mx-auto px-8 pb-20 justify-center">
    <!-- Page Content -->
</div>

I hope this helps you to understand my project better...

[davidhorak]

@UIX-Design that's seems to all correct ... would be possible to share the code base so I can debug it? Also, just to be sure, what title is defined in the Home component, and what title exactly you are getting on the front-end, i.e. rendered HTML.

[UIX-Design]

@davidhorak it works now! probably the problem was due to my cache, oh man sorry... 🙈
But a lot of thanks for your quick help 👍

[davidhorak]

@UIX-Design no worries.