Vue.js 1.0.0 Released

Oct 26, 2015

Hi HN! If you are not familiar with Vue.js, you might want to read this blog post for a higher level overview.

After 300+ commits, 8 alphas, 4 betas and 2 release candidates, today I am very proud to announce the release of Vue.js 1.0.0 Evangelion! Many thanks to all those who participated in the API re-design process - it would not have been possible without all the input from the community.

Improved Template Syntax

The 1.0 template syntax resolves a lot of subtle consistency issues and makes Vue templates more concise and more readable in general. The most notable new feature is the shorthand syntax for v-on and v-bind:

<!-- short for v-bind:href -->
<a :href="someURL"></a>

<!-- short for v-on:click -->
<button @click="onClick"></button>

When used on a child component, v-on listens for custom events and v-bind can be used to bind props. The shorthands using child components very succinct:

<item-list
  :items="items"
  @ready="onItemsReady"
  @update="onItemsUpdate">
</item-list>

API Cleanup

The overall goal for Vue.js 1.0 is to make it suitable for larger projects. This is why there are many API deprecations. Except for ones that are barely used, the most common reason for a deprecation is that the feature leads to patterns that damages maintainability. Specifically, we are deprecating features that make it hard to maintain and refactor a component in isolation without affecting the rest of the project.

For example, the default asset resolution in 0.12 has implicit fallbacks to parents in the component tree. This makes the assets available to a component non-deterministic and subject how it is used at runtime. In 1.0, all assets are now resolved in strict mode and there are no longer implicit fallbacks to parent. The inherit option is also removed, because it too often leads to tightly coupled components that are hard to refactor.

Faster Initial Rendering

1.0 replaces the old v-repeat directive with v-for. In addition to providing the same functionality and more intuitive scoping, v-for provides up to 100% initial render performance boost when rendering large lists and tables!

More Powerful Tooling

There are also exciting things going on outside of Vue.js core - vue-loader and vueify have received major upgrades including:

• Hot component reloading. When a *.vue component is edited, all of its active instances are hot swapped without reloading the page. This means when making small changes, e.g. tweaking the styles or the template, your app doesn’t need to fully reload; the state of the app the swapped component can be preserved, drastically improving the development experience.

• Scoped CSS. By simply adding a scoped attribute to your *.vue component style tags, the component’s template and final generated CSS are magically re-written to ensure a component’s styles are only applied to its own elements. Most importantly, the styles specified in a parent component does not leak down to child components nested within it.

• ES2015 by default. JavaScript is evolving. You can write much cleaner and expressive code using the latest syntax. vue-loader and vueify now transpiles the JavaScript in your *.vue components out of the box, without the need for extra setup. Write future JavaScript today!

Combined with vue-router, Vue.js is now more than a library - it provides a solid foundation for building complex SPAs.

What’s Next?

As what 1.0.0 usually suggests, the core API will stay stable for the foreseeable future and the library is ready for production use. Future development will focus on:

1. Improving vue-router and make it production ready.

2. Streamlining the developer experience, e.g. a better devtool and a CLI for scaffolding Vue.js projects and components.

3. Providing more learning resources such as tutorials and examples.