In early March, I attended VueConf in Austin, Texas. This is a two-day conference about all things Vue-related. Speakers covered an assortment of topics from general topics like SEO and performance along with covering additional libraries and frameworks you can add to a Vue project like Nuxt.js and TypeScript. While there was a breath of topics, there was a collective string between all of them and that was the upcoming version, Vue 3. Most talks centered around this topic by showcasing the new and exciting features building hype amongst the conference goers.

Vue 3

The great thing about the latest version of Vue is that you can start using it right away. Since it has yet to be officially released, I would highly discourage anyone from deploying it to their production environments. Instead this is the time to explore those latest features.

Composition API

This was probably the most exciting feature in Vue 3. Sometimes when we are building a single component, our component code can find itself spanning hundreds of lines of code across various options like data, methods, and lifecycle methods. Less than ideal. This feature allows us to logically group our code by breaking it out of the component and letting it live within its own JS file. This has the additional benefit of making our code more readable and maintainable. Now this isn’t a new way to write components, it is simply an alternative. We can keep our components succinct as they were always intended to be in Vue.

Here are some useful resources as you navigate this new feature:

Ridiculously Reusable Components

I attended the workshop “Ridiculously Reusable Components” by Ben Hong & Damian Dulisz. They covered techniques for building and managing components along with best practices for designing components.

Best Practices

During this workshop, we learned some basic best practices. For instance, you do not need to declare your prop as required if you declare a default.


props: {
   prop1:  {
      type: String,
      required: true // not necessary due to default below
      default: ‘hello world!’
   }
}
props: {
   prop1:  {
      type: String,
      default: ‘hello world!’
   }
}

An additional simple tip was naming conventions for your components. Avoid using single words when naming components. This will reduce any conflicts with the HTML specification. Another great tip was about the ‘the’ within a component’s name for single use components. This way your developers can tell whether or not this is intended to be site wide or site specific. These simple tips and tricks prove to be invaluable as your application code base grows. Reducing any confusion or conflict especially as more developers jump in.

Slots

When we need to pass our component several pieces of data, we may be tempted to do this through the use of props. Unfortunately, overloading your component with props introduces issues like inflating our template with conditionals, reduced flexibility, and increased difficulty in maintaining the component. While there is a time and place for props, it is best to leverage slots when possible. We can also have several slots within our component. We can even name our slots so we can tell our data exactly where it should go within the template.

Conclusion

VueConf 2020 was an incredibly informative conference. I walked away with a better understanding of core Vue principles along with gaining some insights into all that is upcoming in Vue 3. Now let’s build some awesome applications!