nuxt / ui-templates

🎨 Unified Assets and Templates for Nuxt

Home Page:https://nuxt-ui-templates.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Wrong string interpolation in NuxtWelcome component

bitsnaps opened this issue · comments

Environment

Nuxt project info: 20:41:00


  • Operating System: Darwin
  • Node Version: v14.18.3
  • Nuxt Version: 3.0.0-rc.8
  • Package Manager: pnpm@7.6.0
  • Builder: vite
  • User Config: typescript
  • Runtime Modules: -
  • Build Modules: -

Reproduction

1- Nothing special, just create a new project using pnpm:

pnpm dlx nuxi init nuxt3-app-rc8
cd nuxt3-app-rc8
pnpm install --shamefully-hoist

2- Edit the app.vue page to pass version as a props to the NuxtWelcome component:

<template>
  <div>
    <NuxtWelcome :version="version" />
  </div>
</template>

<script setup>
const props = defineProps({
  version: {
    type: String,
    default: 'v3.0.0-rc.8'
  }
})
</script>

P.S. The version prop according the definition is a String, so a value like v3.0.0-rc.8 should be accepted.
3- Finally run the project:

pnpm dev

Describe the bug

Current behavior:

The generated url looks like this:

https://github.com/nuxt/framework/releases/tag/%7B%7B%20version%20%7D%7D

and when you click on the link, you'll be redirected to the 404 page.

Expected behavior:

The generated url should be like this:

https://github.com/nuxt/framework/releases/tag/v3.0.0-rc.8

Although in both cases the generated HTML looks like this:

<a href="https://github.com/nuxt/framework/releases/tag/v3.0.0-rc.8" target="_blank" rel="noopener" class="flex justify-end pb-1 sm:pb-2" data-v-e12da2d6="">v3.0.0-rc.8</a>

Additional context

A quick -dirty- fix would be to edit /node_modules/.pnpm/@nuxt+ui-templates@0.3.2/node_modules/@nuxt/ui-templates/dist/templates/welcome.vue like so:

<a :href="`https://github.com/nuxt/framework/releases/tag/${version}`" target="_blank" rel="noopener" class="flex justify-end pb-1 sm:pb-2" v-text="version" />

This would apply the string interpolation correctly, and here is the original generated source:

<a href="https://github.com/nuxt/framework/releases/tag/{{version}}" target="_blank" rel="noopener" class="flex justify-end pb-1 sm:pb-2" v-text="version" />

I couldn't find the original template, since welcome.vue is generated using the magic on the fly, and I know this may have no impact to the framework it self, since it's just a welcome component example, but this may solve another similar issue in some other places.

Logs

No response