From a409657bbfcdf5330588aeabf2a8d76f9ce63d39 Mon Sep 17 00:00:00 2001
From: Jesper Brinch Korsbakke <21107805+jebkor@users.noreply.github.com>
Date: Fri, 4 Jan 2019 19:59:57 +0100
Subject: [PATCH] Added a section for vue single-file-components (#26963)

* Added a section for vue single-file-components

Brief description of the single file components in Vue

* fix: added front matter block
---
 .../vue/single-file-components/index.md       | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 guide/english/vue/single-file-components/index.md

diff --git a/guide/english/vue/single-file-components/index.md b/guide/english/vue/single-file-components/index.md
new file mode 100644
index 00000000000..bb008d5d02c
--- /dev/null
+++ b/guide/english/vue/single-file-components/index.md
@@ -0,0 +1,56 @@
+---
+title: Single File Components
+---
+
+# Single File Components
+One of the many benefits of using Vue, is the option of making a Single File Component. This component, as the name suggests, is a regular Vue component, living in its own file.
+
+Having your component in its own file, enables you to have a better structure and overview of your application. It also enables you to have syntax highlighting in your editor of choice.
+
+## Structure
+A Single File Component is made up of three sections:
+* Template, where you put your HTML that makes up the component
+* Script, where your logic exists
+* Style, where your styling to your component exists
+
+## Template
+You can use the default language, HTML, or you can use other templating engines, such as `Jade` or `Pug`.
+```html
+<template>
+  <div>
+    <h1>I am a headline</h1>
+  </div>
+</template>
+```
+Basic example of html in a single file component
+
+
+## Script
+The script section is where all of your logic exists. You can use the default language, JavaScript. You also have the option of using `TypeScript` instead.
+It's also in this section all of your properties, methods and watchers exists, to make your component work.
+
+```html
+<script>
+  export default {
+    name: "foo-component",
+    data() {
+      return {
+        message: "I am a message"
+      }
+    },
+    methods: {
+      sayHello() {
+        console.log("Hello world");
+      }
+    }
+  }
+</script>
+```
+You can check out how to use Vue, either by browsing this site, or checking out Vue's own documentation, [here](https://vuejs.org/v2/guide/index.html)
+
+
+## Style
+The final block in the single file component house. This section is where you can style your component. You can also choose, whether or not it should be non-scoped or scoped. Scoped means that the compiled code automatically gets ID's that is specific to the component, that the styling will affect. Non-scoped means that elements outside of the component, also will get targeted for the styling.
+
+## Read more
+If you want to read more about the Single File Components, you can do so [here](https://vuejs.org/v2/guide/single-file-components.html)