search

hyoban / unocss-preset-shadcn

Use shadcn ui with UnoCSS
https://unocss-preset-shadcn.vercel.app
MIT License
237 stars 9 forks source link

[QUESTION] Vue Compatibility #1

Closed go4cas closed 10 months ago

go4cas commented 10 months ago

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?

hyoban commented 10 months ago

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

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

hyoban commented 10 months ago

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)($|\?)/,
    ],
  },
},
go4cas commented 10 months ago

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'),
    },
  },