NX: Vue Support

[Jordan-Hall]

Vue Support

With Vue being the next major framework for the frontend and growing. Nx should start supporting Vue. I'm happy to help support Vue, so I've outlined some expected issues and consideration.

Expected Issues

Unlike currently supported frameworks. Vue isn't opinionated and allows more control to the developers. View also supports different ways of working, support for .ts files should be relatively straight forward but support for .vue may take longer.

Considerations

• Should we add support for using Vue using babel?
• Vue supports TSX, should this be included on the first release
• Vue is undergoing a restructure for Vue 3. Should we wait until Vue 3 is officially released?

To-Do

• [ ] Create Vue implementation roadmap
• [ ] Add support for using Vue with typescript
• [ ] Add support for using Vue with Vue
• [ ] Create Schematics for both ts and Vue files
• [ ] Documentation for Vue support

[danieldanielecki]

Great idea! We have Angular, React, Web Component, only Vue.js is missing. Can't wait for this, it should be a priority definitely!

[Jordan-Hall]

Hey, just working on Storybook build then this is the priority for me. Please bear with me, the full support with .vue will have to be added later.

[jaysoo]

@Jordan-Hall Great idea.

Should we add support for using Vue using babel?

Is babel usage ubiquitous with Vue? The CLI uses it, and such, but I do see some setups with just ts-loader. I'm just curious since I've never worked on a production Vue app.

Also note that we're looking to make babel support better. Right now it exists as a React-specific plugin. So it might be good to wait for that to land first.

[leonlafa]

Hey, just working on Storybook build then this is the priority for me. Please bear with me, the full support with .vue will have to be added later.

Any ETA on this @Jordan-Hall, the community is eagerly awaiting 😀

[0xMMelvin]

Would LOVE this!. This is exactly what my company needs right now!!

[vsavkin]

@Jordan-Hall let me know if you need any help with this. We are happy to help.

[Jordan-Hall]

Now Storybook been merged in my focus is on the vue integration. Sorry for the delay

[merlosy]

Hi @Jordan-Hall ! Thank you for taking the time to work on this. Do you have an ETA regarding support for vue? And since vue 3 is almost out, what is your targetted version?

[Jordan-Hall]

@merlosy working slowly on it. Working on it tonight :) Dont worry :) I'll provide ETA and roadmap soon

[satishbabariya]

@Jordan-Hall https://github.com/vuejs/vue-next aka Vue 3 is totally rewritten in typescript. mostly for the ts support reason. and vue 3 is also backward compatible. so are you guys going with vue 3 alpha or vue 2?

[asherccohen]

Surely this will be very appreciated.

[Jordan-Hall]

vue 3 alpha!

[JamesCoonce]

How can I help out? I've got a ton of free time!

[Jordan-Hall]

Hi @JamesCoonce I'll push a fork up after the new year. I could do with help :)

[asherccohen]

Hi everyone!are there any news for vue.js support, I heard it's in alpha stage.

[Jordan-Hall]

Working on it. Only in the evenings but on Limited internet as Im working away. Aiming for it to be ready. Just after vue release

[vsavkin]

Hey folks! Just wanted to let you know that 8.12 release will come with some tooling to make writing, and, most importantly, testing Nx plugins much easier. We should have it out next week.

[puku0x]

Does create-nx-plugin help us to make a builder for Vue.js project? https://blog.nrwl.io/nx-8-12-distributed-caching-improved-dependency-detection-better-support-for-buildable-libraries-6f7cec17b83f

[Jordan-Hall]

@pesoklp13 I'm going to take a look at it tonight. I've helped on the storybook builder so that part i'm fine. Just had poor internet and will still be poor until the 8 but dont worry im still working on it :)

PS just looked at the output. Yes it kinda helps with the unit testing, something I've struggled with in the past. It's more a boilerplate but yes

[jaysoo]

@puku0x @Jordan-Hall That's exactly why we created the create-nx-plugin package. :)

We can't accept everything into the main repo because doing so means we have to have the necessary resources to maintain it. In the future we can start promoting third-party plugins if they cover stacks that we don't cover.

[wickstargazer]

@jaysoo Hi, what kind of things would you be looking into to promote a third-party plugin, is there a guideline? As we are developing some infra as a code plugins for nx and using it in production, we would like to help contribute so the eco-system becomes better :)

[Jordan-Hall]

@jaysoo if thats the case. Should we create a community repo for 3rd party plugins with some core maintainers

[vsavkin]

We are working on good docs for create-nx-plugin now. Stay tuned :)

After that, we are planing to create a page on nx.dev with high-quality Nx plugins. And then at some point in the future integrate them into nx list.

We are happy to help with third-party plugin issues on case-by-case basis. E.g., if you have any questions, open issues and we will help you out.

[asherccohen]

Awesome @vsavkin! I will create a plugin for React native as soon as your tool is ready!

[minhlucvan]

Hi guys, how are things going? I'm very interest in this feature so if have anything that I can help just ping me :)

[jdpearce]

@asherccohen We are already working on a React native plugin! (I believe @jaysoo is working on that at the moment)

[asherccohen]

@jdpearce great news!per me know of help is needed!

[Jordan-Hall]

@minhlucvan I'll set up a slack channel in coming days. Build coming on almost sorted (including for libs)

[jaysoo]

Hey All, the Nx plugin support has been launched. https://nx.dev/nx-plugins

Community plugin guide is available here: https://nx.dev/react/guides/nx-plugin

We won't be adding Vue support in the main repo, but if someone wants to help with a Community plugin feel free to reach out to us.

[asherccohen]

Hey guys. Has anyone been working on this?I heard progress is good, worth releasing as a community plugin. Where's the repo so we can contribute?

[BuckyMaler]

I opened a draft PR adding Vue 2 support to Nx. The work is early. A borderline proof of concept. Hence, it being a draft PR. 😄

This is a weeks worth of after hours work. I was able to leverage Vue CLI for the dev server and production build, but I'm questioning whether I should continue leveraging Vue CLI or switch to Nx's @nrwl/web package.

Again, this work is for Vue 2 and is very early, but I wanted to share in progress work that you can track.

[asherccohen]

Can't wait to see it in action!

[BuckyMaler]

@ZachJW34 and I have made good progress on this. We hope to have a pre-release published by the end of the month.

What you can expect:

• An app schematic with various options (e.g. routing and CSS pre-processors)
• Lint, test, e2e, serve, and build targets for your apps
• A Vuex schematic for adding Vuex to an existing app
• TypeScript support (no JS support 😬 )
• Maybe more 🤔

We'll also try to have documentation and issues created for those who are interested in contributing. It would be greatly appreciated. 😄

You can track our work here.

[BuckyMaler]

We released v0.2.0 of Nx + Vue! First class support for Vue in your Nx workspace. Check it out! 📣

There was no announcement about v0.1.0 because you wouldn't like it. We didn't like it. We changed the DX quite a bit in v0.2.0. If you like Vue CLI you'll feel right at home. ✌️

[sg1asgard]

Hi, Maybe have a support for Nuxt as well such as this module? https://github.com/edbzn/nx-nuxt

Bests, George

[iamandrewluca]

@sg1asgard https://github.com/ZachJW34/nx-plus/tree/master/libs/nuxt

[stewones]

I can’t believe there’s no official support for Vue but is there for React 🙄

[nathandaly]

Can we please get official Vue support (possibly with Vite). I am currently only keeping the backend services in NX when I would like to keep it all together :)

[samatechtw]

I'm putting together a Vue3/Vite plugin here: https://github.com/samatechtw/nx-vue3-vite

We use it internally, but I wouldn't recommend it for production yet. There are still a few kinks to work out, and it's not well tested.

[wind4gis]

emm...there are still a lot of people using vue2...how about support vue2 also?

[npwork]

Please add native support for vue 2 and 3.

[Jordan-Hall]

Guys if you want this, you could use NX vite plugin and then inside the vite.config.js file add the required plugin for vue. I don't plan on personally adding webpack support for vue.

if you want webpack try https://github.com/ZachJW34/nx-plus/tree/master/libs/vue#readme

[mohsinamjad]

+1, need official production level support for vue.

[maxigimenez]

We are moving to a monorepo solution and sadly we cannot use NX because of the lacking of Vue support 😭

[martinstanojevic]

+1 for Vue3 support.

[dakt]

Woah, I have to ditch NX because of lacking support for Vue.

[thebspin]

I would say with the latest developments and trends.. it makes sense that if you support angular (with all due respect) people logically would expect you to also support vue. Talking to someone from the vue-core team would also probably help you in the right direction or they might even help you out

[jcmillett]

Official vue support is a must in order for us to adopt nx. The community provided nx-plus/vue package doesn't appear to be actively maintained. It also requires using nx 12, which is almost 6 months old at this point. Using nx 12 also means that it's not possible to use certain plugins, like @nrwl/js since it's only available for nx 13.

[amitvchaudhary]

It's literally awful that Nx doesn't support Vue. Any other monorepo solutions that one can try for Vue?

[dakt]

It's literally awful that Nx doesn't support Vue. Any other monorepo solutions that one can try for Vue?

We went for Turborepo and it's quite good. It's framework agnostic so no problem there.