Asset URLs prefixed with tilde (`~/`) in template are not resolving correctly when `vite: true`

[yckimura]

Environment

• Operating System: Linux
• Node Version: v18.18.0
• Nuxt Version: 2.17.2
• CLI Version: 3.9.1
• Nitro Version: 2.8.0
• Package Manager: npm@9.4.2
• Builder: vite
• User Config: bridge, serverHandlers, devServerHandlers, devServer, typescript, nitro, buildModules
• Runtime Modules: -
• Build Modules: (), @nuxt/bridge@3.0.0-rc.3-28343365.3c40b3f

Reproduction

https://stackblitz.com/edit/nuxt-starter-abfxvv

Describe the bug

Asset urls prefixed with tilde (~/) in template are not resolving correctly when building with vite: true.

• Expected: /_nuxt/assets/logo.svg
• Actual: /_nuxt/pages/assets/logo.svg

nuxt.config.js:

import { defineNuxtConfig } from '@nuxt/bridge';

export default defineNuxtConfig({
  bridge: {
    vite: true,
  },
});

pages/index.vue:

<template>
  <div>
    <img src="~/assets/logo.svg" width="100" height="100" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({});
</script>

Output:

<div id="__layout">
  <div>
    <img src="/_nuxt/pages/assets/logo.svg" width="100" height="100">
  </div>
</div>

Additional context

No response

Logs

No response

[wattanx]

Until it is fixed, the following workarounds are available:

<script setup>
import assets from '~/assets/logo.svg'
</script>

<template>
  <div>
    <img :src="assets" width="100" height="100" />
  </div>
</template>

<template>
  <div>
    <img src="@/assets/logo.svg" width="100" height="100" />
  </div>
</template>

[medz]

Any progress?

[wattanx]

I think this is an issue with the vite plugin. https://github.com/vitejs/vite-plugin-vue2/issues/59