Vuejs problems with v0

v0
1

When using Vue.js with external packages like Chart.js or Shacdn-Vue, are others experiencing issues previewing components? I consistently encounter the error Failed to resolve module specifier "@/components/ui/button". Relative references must start with either "/", "./", or "../"

2

Hi, @etska! Welcome to the Vercel Community :smile:

The error message you’re seeing suggests there’s a problem with how the module paths are being resolved. Could you try path aliasing? The “@” symbol in “@/components/ui/button” is typically used as an alias for the “src” directory in Vue projects. This alias needs to be properly configured in your build tool settings.

For Vite, you can configure this in your vite.config.js file:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

As a workaround, you could try using relative imports instead of the “@” alias. For example, instead of @/components/ui/button, use ../../components/ui/button (adjust the number of ../ based on your file structure).

If you’ve tried these solutions and are still experiencing issues, it might be helpful to check your project’s structure and build configuration files. Also, ensure that all dependencies are correctly installed and up-to-date.

Let us know how you get on!

3

Hi,

Thank you for your answer. It works when i try to run it locally, but when i click preview button in v0 chat, i get the error in browser console…

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.