How I switched to Vue.js for personal projects. A React dev perspective

I’ve been a react dev for quite a while at this point. And for me it all started as a search for a new technology to power my personal projects. Years later — I’m working as a full-time React developer, and I can’t feel better about it.

That doesn’t mean that I’m not looking around, though. I’m the kind of person, who tries to find a perfect tool for the job, even if it might be not in my skillset (yet). And, obviously, Vue made a lot of buzz lately, so it was hard to pass by.

But every time I looked at the official docs, they greeted me with something, that looked outdated and felt like a step back compared to what I did atm. I’m not sure if it is a docs’ issue, or mine, but that’s where we’re at. And judging by what I see around me — I’m not alone, hence all the holywars.

That’s what you see first on vuejs.org

Thankfully, a friend of mine showed me, that Vue is not necessarily what you see on it’s front page, it can actually be pretty cool and modern. He linked me vue-class-component, and that changed everything.

For me, as a React dev, that should’ve been advertised right at the front page, maybe even above the logo, or in a popup, or I don’t know… you get the point. That was like a revelation, which made me keep digging. And I ended up with something like this

Fellow React developers might recognise familiar structure

I was shocked, to say the least.

What I ended up with was a react-like component, with css-modules right out of the box, and even template engines like pug! All working together, without changing (almost) anything in my webpack config and such.

Don’t get me wrong, changing webpack configs isn’t hard, especially, when you’ve done it a number of times already. But we’re talking about personal projects, where you have limited time, and you want that time to be spent on the actual idea, not the boilerplate.

And that doesn’t mean that everything is purely magical. I’m not a huge fan of magic myself, BUT! In a sideproject, I can only imagine how much time I could’ve saved if I had such tool at hand.

And what’s even better — I didn’t have to re-learn all the things! Well, almost. Most of my questions are answered in the docs, and all you have to learn is some syntax things and shortcuts. But if you want to — you can even use JSX, yes, that JSX, the one you use in React every day!

And the list goes on. At this point I’m rebuilding frontend for a project I’ve worked on a for a while now. And I’m doing it in Vue. Why? Because it’s just faster. It helps me achieve my goals in a record time.

To be fair, I don’t need anything highly complex in terms of build structure, my app is simple enough that react-create-app or, in this case, vue-cli with cue-loader can handle everything I want. And it just makes my life better.

I can simply drop some <style lang="sass" module> and I’m good to go with CSS modules!

Want to use pug inside templates? <template lang="pug">does it. The event or prop bindings are pretty simple too. And an out-of-the box support for keyboard events does wonders.

No need to bring an external dependency, just do a @keyup.shift and it works!

I know, it’s a bit too magical for a sceptical React dev out there, but, personally, I think that it’s worth it. It wasn’t totally without hitches, that’s why I even included a whole section at the bottom with tips you mind find useful as a React dev trying out Vue.

And even if you’re not convinced to fully embrace Vue in your personal stuff — you can merge it with React and use them both! Sounds a bit crazy, but you should check that approach too.

In the end I want to say this. Just try it. I was really sceptical about it, but it turned out great. I won’t be using Vue in large scale production anytime soon (not because it can’t handle it, but because that’s just not what I do), but my personal projects will see a lot of Vue now, that’s for sure.

Useful stuff

• Official Vue Docs
• Vue-Router Docs
• Vue-Loader Docs
• Vuex Docs (state management, think redux/flux)
• JSX in Vue (read a bit about Vue first)
• Vue Class Component (ES6)

Things to look out for

• By default Vue will only use hash as a class name for CSS-Modules, which is ok-ish for production, but really hard for development. You might want to open your vue-loader config (build/vue-loader.conf.js by default) and add something like this. It will make your CSS-Modules class names look like Button_chs3f

Add to the end of your config’s module.exports

• You might want to change router to HTML5 history mode (so it will act similar to react-router . To do so — open your src/router/index.js and add mode: 'history', to the new Router({}) .
• I recommend using Vue template blocks (with something like Pug) for most of the templates, it’s a lot faster and more readable than doing everything in JSX (no offence to JSX).
• This one somehow wasn’t as obvious as I expected. If you want to pass children to component (i.e. have something like <my-component>Child Content</my-component> ), then it should have at least one <slot /> tag in its template.
• At last — don’t forget that you need to use transform-decorators-legacy babel plugin for vue-class-component decorators to work properly. You’ll also need to define all the components and props you want your new and shiny component to use inside that decorator. It follows the same data structure as the base Vue constructor, so look in the Vue docs for full list of options.

And with that, you should be good to go! Hopefully this will help you out, and you won’t need three attempts to get this whole thing figured out and to start enjoying Vue, like it was for me.