Learn how to refactor Vue.js Single File Components with a real-world example

Kevin Peters
Oct 28, 2018 · 11 min read
The source code of VArticlePreview.vue before the refactoring

1. Make imports relative

2. Sort component instance options

3. PascalCase components in <template>

4. Self-close elements

5. Make props shorter

6. Extract huge inline values

7. Put every element in a proper HTML tag

8. Use v-text instead of mustache syntax

9. Format the code of the component

10. Extract components

11. Improve props

12. Profit

Kevin Peters

Written by

Full-Stack Developer with a passion for Vue.js, JavaScript and .NET Core, also doing Python/Django development. https://www.kevinpeters.net/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade