[QUESTION] Vue Compatibility

[Cas du Plessis]

Cool preset! I tried to use this with a Vue 3 (Vite) app, but could not get it to work. When adding components, these are added as .tsx. Is there a guide to get this working with Vue components?

[Stephen Zhou]

Are you using it with https://www.shadcn-vue.com ?

I haven't tried it yet, I will try it and create a demo.

[Stephen Zhou]

Hi, I created a demo for shadcn-vue.

The key issue is that you need to add the following configuration to uno.config.ts, you can find updated setup steps in the readme.

content: {
  pipeline: {
    include: [
      /\.(vue|svelte|[jt]s|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
    ],
  },
},

[Cas du Plessis]

Thanks, @hyoban!

I have started over, using the updated README guide. Everything working well now, thanks!

The only addition I had to make was, adding the following to vite.config.js:

  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },