I'm using svelte to create a personal website. I want to place a chunk of javascript code in the head of my final HTML code, which is based on a svelte ponent. So I have something like

<svetle:head>
    <script> var url = "myurl/"; </script>
<svetle:head>

within a [slug].svelte file. I want to substitute a value that passed into this ponent as a prop within the script. I tried doing something like

<svetle:head>
    <script> var url = "myurl/{post.slug}"; </script>
<svetle:head>

Unfortunately this doesn't work. If the substitution {post.slug} were to occur outside of <script>, svelte would perform the substitution just fine, before passing the resulting html to the client. However because it's within the <script>, svelte seems to be assuming that I must want literally "myurl/{post.slug}", instead of "myurl/my-post-name" . I think this may be because {} has meaning in javascript.

Note that I've tried every bination of "myurl/{post.slug}", "myurl/"{post.slug}, myurl/${post.slug}. Any placement of {post.slug} within <script> does not substitute.

How can I get svelte to perform this substitution at the same time it performs every other substitution in the .svelte ponent? I can't imagine there isn't a way to do this, but the svelte documentation doesn't seem to address this.

I'm using svelte to create a personal website. I want to place a chunk of javascript code in the head of my final HTML code, which is based on a svelte ponent. So I have something like

<svetle:head>
    <script> var url = "myurl./"; </script>
<svetle:head>

within a [slug].svelte file. I want to substitute a value that passed into this ponent as a prop within the script. I tried doing something like

<svetle:head>
    <script> var url = "myurl./{post.slug}"; </script>
<svetle:head>

Unfortunately this doesn't work. If the substitution {post.slug} were to occur outside of <script>, svelte would perform the substitution just fine, before passing the resulting html to the client. However because it's within the <script>, svelte seems to be assuming that I must want literally "myurl./{post.slug}", instead of "myurl./my-post-name" . I think this may be because {} has meaning in javascript.

Note that I've tried every bination of "myurl./{post.slug}", "myurl./"{post.slug}, myurl./${post.slug}. Any placement of {post.slug} within <script> does not substitute.

How can I get svelte to perform this substitution at the same time it performs every other substitution in the .svelte ponent? I can't imagine there isn't a way to do this, but the svelte documentation doesn't seem to address this.

• javascript
• svelte
• svelte-ponent

Share Improve this question Follow edited Aug 14, 2020 at 20:00 user395788 asked Aug 14, 2020 at 19:55 user395788user395788 24533 silver badges77 bronze badges 3

• Have you tried using `myurl./${post.slug}`? It is called a template literals. – johannchopin Commented Aug 15, 2020 at 9:15
• Yes, I did try that. It seems like there is no way to do this in svelte. I ended up finding a different work around. – user395788 Commented Aug 15, 2020 at 16:17
• 6 If you did, please post it as an answer so others can benefit from it. – dummdidumm Commented Sep 7, 2020 at 17:01

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Seemingly you can inject your script via @html svelte function.

<script lang="ts">
    const postSlug: string = "...";
</script>

<svelte:head>

    {@html `<script>
        var url = "${postSlug}";
    </script>`}

</svelte:head>

One downside is that this whole <script/> block will need to render as a string then. Which would make it hard to manage larger JS logic. But it works for my case when injecting env variables into simple <script/> blocks.

This is kinda janky, but if the value you need is a text string, you could put it inside a <meta> tag, then select it.

<svelte:head>
  <meta name="myVar" content={post.slug} />
  <script>
    var url = document.querySelector('meta[name=myVar]')
    console.log(url.getAttribute('content'))
  </script>
</svelte:head>

However, I suspect there's probably a much better way to do this without such a workaround, and knowing a bit more about how the code will consume the variable would be helpful in providing a better answer.