search

vuejs / rollup-plugin-vue

Roll .vue files
https://vuejs.github.io/rollup-plugin-vue
MIT License
843 stars 148 forks source link

How to use the rollup plugin #350

Open DrMabuse23 opened 4 years ago

DrMabuse23 commented 4 years ago

What problem does this feature solve?

Hi thx for your Package, but iam not sure how to run this script ? i'm using at the moment the vue-cli to create a web-component output. vue-cli-service build --target wc --name <%=name%> and now how to use this plugin then ? i need to add rollup ? or this hook into the vue cli build ? Sorry for my stupid questions but i don't see any on the docs how to run a build with that

What does the proposed API look like?

just add something like you could run the build then as expected with : ...

przemkow commented 4 years ago

Hi. Yes, if you want to use this plugin you need to change build process of your application and migrate to rollup. rollup-plugin-vue is a .vue files loader created for rollup (you can think as equivalent to same vue-loader` in webpack world https://github.com/vuejs/vue-loader.)

Vue-cli is a tool created on top of webpack which use vue-loader under the hood to simplify work needed to setup a Vue.js project.

About targeting web component you need to pass isWebComponent: true as a Vue plugin option in rollup config. Also check this blog post, I think it might help to answer your question. https://znck.dev/blog/2019-shipping-web-components-with-vue

DrMabuse23 commented 4 years ago

Thank you very much @przemkow i will try that out

DrMabuse23 commented 4 years ago

Sorry maybe you can help another time but we are using typescript and i see you are on this https://github.com/przemkow/rollup-plugin-vue/tree/typescript-example did you know when this is done ?

przemkow commented 4 years ago

Hi @DrMabuse23, I think this example is not something you are looking for. It was added as an example to the next version of rollup-plugin-vue which will be used with Vue3.

Answering your question PR with this example is currently in Core Review but I am not sure when it will be merged. https://github.com/vuejs/rollup-plugin-vue/pull/357

About TypeScript I created some time ago more advanced example as an answer under this issue https://github.com/vuejs/rollup-plugin-vue/issues/343#issuecomment-633235071 So for this approach works fine in my projects.