feat: Added vite esm build for Nuxt UI playground

[jd-solanki]

🔗 Linked issue

None

Here's the playground link: https://nuxt-ui-playground.netlify.app/

❓ Type of change

• [ ] 📖 Documentation (updates to the documentation or readme)
• [ ] 🐞 Bug fix (a non-breaking change that fixes an issue)
• [ ] 👌 Enhancement (improving an existing functionality)
• [ ] ✨ New feature (a non-breaking change that adds functionality)
• [x] 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• [ ] ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

For Nuxt UI playground we are using Vue Repl. It requires lib to have compiled components in ESM so we can import them via import map: https://github.com/vuejs/repl/issues/234#issuecomment-2127354755

Hence, added new build setup that compiles components using vite.

📝 Checklist

• [x] I have linked an issue or discussion.
• [x] I have updated the documentation accordingly. Not needed

[benjamincanac]

@danielroe Do you know if there's a way to achieve this through the current build process? 🤔

[danielroe]

I would guess it would significantly increase the build size. but if that's not an issue, you can likely add each component as an 'entry' (using a globbing util to get them all) in build.config. you will also need to ensure that rollup-plugin-vue (or vite-plugin-vue) is added to the rollup config, which might have to be in an unbuild hook, if there's no option to do so directly.

[benjamincanac]

Doesn't the build size increases with both solutions? We would need to publish the result of this build as well no? 🤔

[jd-solanki]

@danielroe @benjamincanac

How about distributing it as a separate package? This is only needed for the playground. Maybe like @nuxt/ui-esm?

BTW, the goal is that it shouldn't affect existing build & distribution.