-
Notifications
You must be signed in to change notification settings - Fork 90
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to build Vue component library? #80
Comments
I am also facing the same. I end up using vite. |
So instead building them I am using bundleless, or just copy assets/components as it is by removing entries: [
// bundling
// 'src/index',
// bundleless, or just copy assets
{ input: 'src/components/', outDir: 'dist/' }, // this works but not generating MyComponent.vue.d.ts
], which works fine, perhaps this might help you @jd-solanki |
If someone still stuck with this & stubborn enougn for using this cool tool anyhow........... Just Keep <!-- src/components/InputAmount.vue -->
<template>
........
</template>
<script setup lang="ts">
//
</script> Easy, HuH..! |
Still giving same error but now for templates ...
frame: '1: <template>\n' +
' ^\n' +
... |
can you please share working minimal reproduction? |
I am getting similar errror when I tried unbuild in react.js library, but it complains about .png or .svg formats, I guess I need some sort of rollup plugin for images maybe like @rollup/plugin-image, but I am not sure how to configure in unbuild |
@Digital-Coder you should be able to access the // build.config.ts
import { defineBuildConfig } from 'unbuild'
export default defineBuildConfig({
// other configs
hooks: {
'rollup:options'(_ctx, options) {
options.plugins.push(
// rollup plugin...
)
},
},
}) |
Hi @itsmnthn as I mentioned I ended up using vite. Here's how in case you want insights: https://github.com/jd-solanki/anu |
@dwightjack I tried this trick to build
|
@amery I guess that's an issue with rollup typing because in the source code
The solution, in this case, could be to wrap the code in a type guard condition: if (Array.isArray(options.plugins)) {
options.plugins.push(
// ...
)
} |
thank you @dwightjack, that did the trick. wouldn't this make a case for adding a plugins list to unbuild's RollupBuildOptions ? The amount of boilerplate just to add a rollup plugin |
@amery I guess so. @pi0 What do you think about it? From a more general point of view, I think that a plugin interface similar to the one provided by vite could help improve the extensibility of the tool. Something like: // unbuild-plugin-myplugin
export default function MyPlugin({
hooks: {
'rollup:options'(_ctx, options) {
options.plugins.push(
// rollup plugin...
)
},
},
})
// // build.config.ts
import { defineBuildConfig } from 'unbuild'
import MyPlugin 'unbuild-plugin-myplugin'
export default defineBuildConfig({
plugins: [MyPlugin()],
}) |
If you're still looking for one... https://github.com/wobsoriano/vue-sfc-unbuild Supports vue 2 and 3 |
how did you solve it? |
it doesn't seem to work @amery |
Are those css files? What happens if you add the extension? @lixiaofa |
|
I think you have to use a compiler/transformer within the build tool, something like Or only use antfu:
|
|
The best is to create a basic repro so userland can play with it @lixiaofa |
options.plugins.push(
- commonjs(),
- nodeResolve(),
- externals(),
postcss({
plugins: [],
})
) This may help but this is not the way
unbuild-vue-transform.zip ( still not working when you add CSS content in the style section 😭 ) From what I understand unbuild only works well when it's all about JS stuff |
repro: https://github.com/lixiaofa/fast-plus build.config.ts: import 'vant/es/popup/style': @wobsoriano @sadeghbarati |
@lixiaofa I think the reproduction repo is too large and complex to understand the issue. From what I can understand from the screenshots, the task that is failing is My advice is to create a minimal reproduction to isolate the unbuild setup from all the other things going on in the project. |
I have conducted tests and found that importing 'vant/es/popup/style' without it can be packaged normally. If it is added, the above error will be reported. You seem to be right |
Hey @pi0 can we have a example/template in this repo for building vue component library? |
I create a demo for building vue component library with And I have a component library (@leex/components) which also use |
When working with monorepo, how to stub the I am currently having questions when packages have multiple entries:
However, when working with such setup:
I understand that I can ship and include all the The workflow seems broken when it comes to monorepo, how does everyone build and stub, even develop their UI compoents in multi-entries and monorepo packages? Does anyone have examples for me to take a look at? |
I finally came up an all-in-one unified solution for both developing, previewing, bundling for mixed project that has Vue components Library and Vite plugin all together. Configure for
|
@wen403 The error is saying that, probably, you have a reference to a |
@nekomeowww @dwightjack Thanks for the amazing workaround 👍 But I have a question, is it a good practice to directly put |
An article "The Simplest Method to Create a Vue.js Component Library" with unbuild https://soubiran.dev/posts/the-simplest-method-to-create-a-vue-js-component-library |
I think it depends on the use case you expect. If you pulbish your components as |
As per antfu's blog we can bundle
Vue
components. I have followed it but getting error. here are the files I havewhen doing
yarn build
throws errorThe text was updated successfully, but these errors were encountered: