From 08a9f1da74e4e9b1311abd3af501332f1dc79b39 Mon Sep 17 00:00:00 2001
From: Nigel Cheok <cheok.nigel@gmail.com>
Date: Thu, 22 Nov 2018 21:10:49 +0800
Subject: [PATCH] Added 'single file components' to components readme (#22563)

---
 guide/english/vue/components/index.md | 29 +++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/guide/english/vue/components/index.md b/guide/english/vue/components/index.md
index 7c66dc3cef..8a2406be8d 100644
--- a/guide/english/vue/components/index.md
+++ b/guide/english/vue/components/index.md
@@ -84,3 +84,32 @@ Once a prop is registered, you can pass data to it as a custom attribute, like t
 <blog-post title="Blogging with Vue"></blog-post>
 <blog-post title="Why Vue is so fun"></blog-post>
 ```
+
+### Single File Components
+
+Instead of declaring many components in a single file resulting in a long spagetti code. You may want to modularize your components by having different files. (ie. more info: https://vuejs.org/v2/guide/single-file-components.html)
+
+Enclose your template in a <template> tag, script the structure of the component in the <script> tag and style your components in the <style scoped> tag.
+
+```
+<template>
+  <p>{{ greeting }} World!</p>
+</template>
+
+<script>
+module.exports = {
+  data: function () {
+    return {
+      greeting: 'Hello'
+    }
+  }
+}
+</script>
+
+<style scoped>
+p {
+  font-size: 2em;
+  text-align: center;
+}
+</style>
+```