Using gulp to convert vue files?

GiorgioMartini commented 7 years ago

What problem does this feature solve?

In my company we recenlty decided to use vue.js, as you recommend is a good idea to use vue files. We have a rails app, dont use too much Js atm, we have of course jQuery and various plugins

Webpack... i read in order to use webpack you "have" to go all in into the js modules philosophy and will encounter many bumps organizing old and new codebase.. and that its "complicated" to use...

Learning vue for now is enough to slow development now, we need to add features and stuff... adding webpack seems like it will slow us very much, as we are all not experts in node or js tooling...

would gulp be an option to transform vue files? if not is there a simpler alternative?

Thanks

What does the proposed API look like?

there is no api

JounQin commented 7 years ago

Maybe you can try gulp+rollup+rollup-plugin-vue.

wszerad commented 7 years ago

I will try to help you, just send me an email.

yyx990803 commented 7 years ago

Gulp is just a task runner; Vue files is a module source format, so it must be combined with some sort of module bundler to work. Rollup might be the simplest one out there at the moment.

@chrisvfritz has a repo on different strategies of integrating Vue with Rails: https://github.com/chrisvfritz/rails-javascript-integrations

Also - rails 5.1 already supports scaffolding with webpack + vue out of the box with the --webpack=vue flag!

GiorgioMartini commented 7 years ago

Yes, its true about rails 5.1... we are going to check on that...

One question, lets say we upgrade to 5.1 and start using webpack...

-can we happily continue to use our old pipeline as it is.. -start using webpack for vue and other new stuff we add? -and slowly migrate whatever js stuff we need?

Thanks!

chrisvfritz commented 7 years ago

@GiorgioMartini Yes. 🙂 Check out some of the strategies in my repo that Evan linked to. I'm not using Rails 5.1 or webpacker there, but one of the reasons I prefer managing Webpack on my own is so that I can integrate it with the asset pipeline however I want and slowly migrate assets like you mentioned.

trev-dev commented 5 years ago

Hello from 2019

I recently started a project where I wanted to hack VueJS into a Wagtail CMS (powered by Django) to create custom content blocks that are powered by Vue...and honestly found myself in a similar situation.

If you want the majority of your site (except the Vue single file components) to be static and you aren't using NuxtJS, webpack doesn't really work as a catch all. Especially if your bundle is at the bottom of your layout template! You get horrible CSS re-rendering and jitter.

This might be super hacky, but I managed to combine both Gulp & Webpack to get the job done, since no one has maintained vueify for like 2 years. This way my global scss styles get loaded at the top of the document & the Vue components get loaded at the bottom.

https://gist.github.com/trev-dev/e52975b3a1879d621926b83cde3dcf88

Hope this helps.

Side Note: If anyone has ideas around how to revive single-file Vue components in gulp, I'd be up for contributing. Gulp is nicer to configure and faster to execute, even if it is just a "task runner".

vuejs / vue