Get More Done with Vue.js: You Can Do More with Vue

You can do more with Vue

My third lesson on Vue.js focuses on it’s flexibility. Vue is simple enough for you to start writing components with HTML and plain JavaScript. But Vue was also designed with flexibility in mind. This means you are not just limited to creating components with HTML and plain JavaScript. Vue has an official Webpack loader for Vue components called vue-loader that enables support for ES2015. If you prefer to use TypeScript, Vue has official type declarations for TypeScript for Vue core, as well as vue-router and Vuex.

For most cases, Vue recommends that you use templates to build your HTML components. But for those cases where it’s necessary, Vue allows you to create HTML components using JavaScript via a render function. If you have a lot of components using render functions, the API may seem rather verbose. So if you prefer, you can actually use JSX via a Babel plugin. With JSX, you can get back to a syntax that’s much closer to templates.

If your project is more complex or entirely driven by JavaScript, like a Single Page Application, you can create single-file components with Vue. Single file components are components contained in a single file with a .vue extension that are compiled with a build tool like Webpack or Browserify. A compiler makes your components even more flexible because you can now use preprocessors such as Pug, Babel (with ES2015 modules), Stylus, Bublé, TypeScript, SCSS, PostCSS and others.

Server-Side Rendering is not exactly trivial but it is possible to do server-side rendering with Vue. In fact, the Vue guide has excellent documentation that walks you through this step-by-step. There is even a community project called Nuxt.js that simplifies server-side rendering in your Vue projects.

Weex is a project similar to React Native that uses Vue to build native applications for iOS and Android. With Weex, you can create native mobile UI using components written in Vue.js.

Vue provides different ways to apply transition effects when items are inserted, updated, or removed from the DOM. With Vue, you can integrate third party CSS animation libraries or JS animation libraries or use JavaScript to directly manipulate the DOM during transition hooks. Most importantly, Vue can automatically apply classes for CSS transitions and animations.

Vue can be extended in multiple ways as well. Vue allows you to register your own custom directives for accessing the DOM on your HTML elements. Mixins are a flexible way to distribute reusable functionalities for Vue components. And plugins are available to add global-level functionality to Vue.

If you are building Single Page Applications, Vue offers more than just components. Vue has an official supported routing library called vue-router. If you just need simple routing rather than a full-featured router library, you can build a basic but fully-functional client-side router by dynamically rendering a page-level component in combination with the HTML5 History API.

Last but not least, Vue also has a state management library called vuex to help you manage state in large and complex applications with many components. Vuex is inspired by the functional, compile-to-JavaScript library elm and is often compared to Redux, another state management library that is also inspired by elm. If you would prefer, you can actually use Redux with Vue with simple bindings although the creators believe that vuex integrates better with Vue applications.

There’s plenty more that I haven’t mentioned. Vue is designed with developers in mind. It’s highly flexible so you can use it for just about anything you can imagine.

Limitations

Despite it’s flexibility, Vue does have some limitations. Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue instances cannot detect property addition or deletion. Since Vue doesn’t allow dynamically adding root-level reactive properties, you have to initialize Vue instances by declaring all root-level reactive data properties upfront, even just with an empty value.

If your application is performance sensitive, it may benefit you to precompile your templates and use Single-file components. This is faster than using in-DOM templates or in-JavaScript template strings, even though those are both fast enough in most cases.

Finally, although I mentioned Weex for creating native applications with Vue components, it is still in active development and not as mature as ReactNative.

There’s no one size fits all solution for JavaScript frameworks. So even though Vue has plenty of flexibility, you should be aware of its limitations. I believe it has a bright future, but there’s still plenty of room for improvement. In the next lesson, we’ll discuss Vue.js and performance.

By the way, I’m working on a larger course on Vue.js, so sign up for the email list using the form below to be notified when it launches!

Sign up to Get More Done with Vue.js

* indicates required