VueConf US 2018

Talks

1. State of Vue

Evan You

2. How We Do Vue At GitLab

Jacob Schatz

3. Vue in Motion

Rachel Nabors

4. Testing Vue apps

Edd Yerburgh

5. Serverless Functions and Vue.js

Sarah Drasner

6. vue-rx

John Lindquist

7. Create an Engaging Native Mobile App with Vue and NativeScript

Jen Looper

8. 7 secret patterns Vue consultants don't want you to know

Chris Fritz

9. Agile Design Systems in Vue

Miriam Suzanne

10. Vue & TypeScript: Up and Running

Daniel Rosenwasser

11. A React Point of Vue

Divya Sasidharan

12. Vue & SSR: The best practices

Sebastien Chopin

13. A Short Synopsis of Vue Storybook

Peter Finn

14. Prototyping with Vue Single File Component

Pine Wu

15. 5 Libraries You Should Know About

Adam Jahr

16. Update an Existing Application to Vue

Michael Bennett

17. Vue and Vuex for Complex Application State

Patrick Seda

18. Top 5 Must-Have UI Animation Patterns

Rachel Nabors

19. The Dream: A Full Rewrite

Seth White

20. Start Your Own Vue.js Meetup

Ben Hong

21. Reusability - Is It Worth It?

Shelton Clinard

22. Reactivity - Learning by Accident

Jeff Schenck

23. Quick Publishing of Redistributable SFC on NPM

Mike Dodge

24. OverVue of Vuetify.js

CJ

25. Ionic and Vue

Mike Hartington

26. Dynamic Store Modules with Vuex

Adam Bradford

27. Build a MiniFlix Clone with Vue Contest

Dan Zeitman

28. Beyond HTML with Vue

Eduardo San Martin Morote

29. Vue with AWS Lambda

Matt Biilmann

30. 40 Hour Plan For UX Proficiency

Jacob Covey

31. Code Splitting Patterns with Vue

Sean Thomas Larkin
Notify me when new talks are available.

7 secret patterns Vue consultants don't want you to know

7 secret patterns Vue consultants don't want you to know

Chris Fritz

Chris does a lot of work on the official Vue.js documentation and tooling. In this talk he goes over a series of productivity boosts, radical tweaks, and unlocked possibilities to help you write better Vue applications.

Productivity Boosts


Smarter Watchers

It’s a common pattern to have a method that needs to get called on component creation and then again when a watched property changes:

However, this can be optimized by like so, by specifying “immediate: true” which will run the moment it’s registered.

Component Registration

When you have frequently used components you may have to import many files all over the place.

You can use component registration to include many different files. He includes this in “src/main.js” or “/components/_globals.js”:

He doesn’t recommend doing this with all components, because you may end up having components that you don’t need in the long run.

Module Registration

Just like component registration, module registration can start to get tedious.

To solve this he creates a /modules/index.js which has the following content:

Also while in this file sometimes he will namespace his modules. Changing to the following code:

Now the code from above, where we had to import all the modules can change to:

Radical Tweaks

Lazy Loaded Routes

Sometimes you may have parts of your website that are only accessible to a part of your users. See this code:

With this code everyone is forced to download the admin files just in case they need it. Fortunately there’s a small change we have to make to lazy load this route:

You won’t want to do this with all your components, as there would be additional load time for the user.

Transparent Wrappers

In a base input component we may want to have a template that works with v-model, so we might have the following code.

But if I want to listen for a focus event, and add a label element it could break:

To solve this I need to define a computed property which returns an object of all the listeners from the parent.

This then works as we want. However, what happens when we add a placeholder attribute that we want to pass through to <input>?

We can use inheritAttrs to get fully transparent wrappers like so:

As you can see, the placeholder attribute is now getting applied to the <input> element as we want.

Unlocked Possibilities

Single Root Components

As a Vue developer you’re probably familiar with the following error, about only having a single root element:

Normally the solution is to wrap it in a div. However, sometimes there are patterns where this limitation doesn’t work well. For example: routes that create multiple list items like so:

The solution here is to use a functional component, which can return an array of elements.

Coordinated Transitions

Sometimes you have multiple transitions, and it can get a little annoying to have multiple v-if statements.

One way to solve this is to create a TheaterCurtains component which uses another functional component.

Conclusion

If you want to see more of Chris’s best practices he created a Vue Enterprise Boilerplate which contains many of these and more.