Fetching data in a setup script from an url that has ${variable} in the url is not possible.

[SebbeJohansson]

Environment

Nuxt CLI v3.0.0-rc.8 15:57:24
RootDir: /home/projects/nuxt-starter-si1vu3 15:57:27
Nuxt project info: 15:57:27

---

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-rc.8
• Package Manager: npm@7.17.0
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/nuxt-starter-si1vu3?file=pages%2Fblog%2F[slug].vue,pages%2F[...slug].vueexampl%2Ce

Test url:
https://nuxt-starter-si1vu3--3000.local.webcontainer.io/blog/storyblok-datetime-field-with-today-as-default

Describe the bug

I expect it to be possible to use:

const {
  data: blok,
  pending,
  refresh,
} = await useAsyncData(() =>
  $fetch(
    `https://api.storyblok.com/v2/cdn/stories/blog/${route.params.slug}?token=ee04k73GERZuvgzbdMDHqQtt&version=${version}`
  )
);

to pull data in a setup script, but I'm getting computed is not defined when I do that.

If I instead do:

const {
  data: blok,
  pending,
  refresh,
} = await useAsyncData(() =>
  $fetch(
    'https://api.storyblok.com/v2/cdn/stories/blog/' +
      route.params.slug +
      '?token=ee04k73GERZuvgzbdMDHqQtt&version=' +
      version
  )
);

it works fine.

I cant use the working version because of eslint auto formatting it.

Additional context

Even if i make a variable that has the whole URL it still errors if I use ${variable}.

Logs

No response

[516310460]

The problem was not found. Please provide a correct link
See: https://stackblitz.com/edit/nuxt-starter-b1aatu?file=pages%2Findex.vue,pages%2Faaa%2F[id].vue

[SebbeJohansson]

@516310460 I dont know what you are on about. That stackblitz seems to be different from the one I posted.
Doing the steps in the reproduction with the proper stackblitz results in this:

The only difference between yours and mine is the weird folder of aaa and the template by the looks of it.
Doesnt work:

<template>
  <div class="page blog-entry-page">
    {{ portfolioTitle }}
    {{ story }}
  </div>
</template>

Works:

<template>
  <div>
    aaa/[{{ route.params.id }}].vue
    <nuxt-link to="/">index</nuxt-link>
    {{ portfolioTitle }}
    {{ story }}
  </div>
</template>

I don't see a logic in why that should make computed stop working.

[SebbeJohansson]

Here is another repro based on your stackblitz: https://stackblitz.com/edit/nuxt-starter-pr2brk?file=pages%2Faaa%2F[slug].vue

[danielroe]

I would guess that this might be similar to unjs/mlly#64.

[SebbeJohansson]

@danielroe Is it something that needs to be fixed in nuxt or is there something I need to do?

[danielroe]

@SebbeJohansson I can't reproduce with the linked stackblitz. Is there a specific URL I need to go to or step I need to take?

[SebbeJohansson]

@danielroe Yes! I specified it as "Test url" in the oriignal comment. Maybe I wasn't clear enough.
https://nuxt-starter-si1vu3--3000.local.webcontainer.io/blog/storyblok-datetime-field-with-today-as-default

[danielroe]

My bad - perfect 👍

@antfu - might be a possible unimport issue.

[richgcook]

I have also had this issue...

const mailChimpUrl = `https://${props.mailChimpUsername}.${props.mailChimpServer}.list-manage.com/subscribe/post-json`

This throws an error with whatever is directly below the variable declation

[danielroe]

This is no longer replicable: https://stackblitz.com/edit/nuxt-starter-h35gez.

Let me know if you're still experiencing this and I'd be happy to reopen/look at this again.