VueConf US 2018


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


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.

Prototyping with Vue Single File Component

Prototyping with Vue Single File Component

Pine Wu

Pine Wu works as an Information Architect at Visual Studio Code. He is also the author of the popular VS Code plugin Vetur.

Pine’s talk begins with a brief demo of Vetur and how it combines features to enrich and simplify the Vue development experience within VS Code. While Vetur is feature-rich, Pine says it’s about 60% complete and will be incrementally added to over time.

However, he explains that while thinking about how to radically improve the development experience, he can’t just continue to improve Vetur. He had to come up with something entirely new.

Introducing Proun

If you’re creating a prototype on pen and paper, and you want to draw a line, you have the luxury of a line appearing exactly as you move your pen along the paper. If you had to hit save and wait for the line to appear, that would literally slow down your creative process. That is Pine’s analogy for the problem that Proun solves.

Proun is a plugin designed for prototyping with single file Vue components. In his talk, Pine demonstrates how edits happen in real time. As he’s typing in VS code, the text in the browser is updating in real time with no need to save the file or refresh the browser.

Auto-Switching Tabs

Another major Proun feature Pine demonstrates is how, when he clicks on different files within VS Code, this causes the tab in his browser to switch to the tab associated with that file. There’s no need to touch the browser to view what’s happening in that file. Proun does it for you.

Intuitive Workflow

Pine demonstrates how intuitive the developer experience with Proun can be by showing other features, such as how VS Code’s color picker will update the styles in the browser in real time, too. He compares this to previewing colors within Chrome’s dev tools until you find a color you like, then copying that code and pasting it into your code editor. With Proun, it all happens live from VS Code, making the creative prototyping experience more seamless and function more like a sketch pad.

Exploring Ideas

Pine shares how Proun makes it easier for beginners to start working with Vue, versus jumping into a Webpack configuration. And he believes Proun’s ability to catch errors and provide helpers and snippets where you need them within your editor helps all developers while reducing the need to look at external documentation while coding.

It’s essentially designed with the intention of being self-contained so a developer has what they need where and when they need it so they can focus on being creative and exploring ideas.