From 425075fdf3ec7f06ed0495470feb2e1d5d50a7c5 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Thu, 10 Nov 2022 14:38:47 +0200
Subject: [PATCH 1/3] Composition API version

---
 src/guide/scaling-up/sfc.md | 51 +++++++++++++++++++++++++++++++++++--
 1 file changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/guide/scaling-up/sfc.md b/src/guide/scaling-up/sfc.md
index 63dc3c9af9..b3405d777c 100644
--- a/src/guide/scaling-up/sfc.md
+++ b/src/guide/scaling-up/sfc.md
@@ -4,6 +4,8 @@
 
 Vue Single-File Components (a.k.a. `*.vue` files, abbreviated as **SFC**) is a special file format that allows us to encapsulate the template, logic, **and** styling of a Vue component in a single file. Here's an example SFC:
 
+<div class="options-api">
+
 ```vue
 <script>
 export default {
@@ -27,6 +29,31 @@ export default {
 </style>
 ```
 
+</div>
+
+<div class="composition-api">
+
+```vue
+<script setup>
+  import { ref } from 'vue';
+  const greeting = ref('Hello World!');
+}
+</script>
+
+<template>
+  <p class="greeting">{{ greeting }}</p>
+</template>
+
+<style>
+.greeting {
+  color: red;
+  font-weight: bold;
+}
+</style>
+```
+
+</div>
+
 As we can see, Vue SFC is a natural extension of the classic trio of HTML, CSS and JavaScript. The `<template>`, `<script>`, and `<style>` blocks encapsulate and colocate the view, logic and styling of a component in the same file. The full syntax is defined in the [SFC Syntax Specification](/api/sfc-spec).
 
 ## Why SFC {#why-sfc}
@@ -54,16 +81,36 @@ That said, we do realize there are scenarios where SFCs can feel like overkill.
 
 Vue SFC is a framework-specific file format and must be pre-compiled by [@vue/compiler-sfc](https://github.com/vuejs/core/tree/main/packages/compiler-sfc) into standard JavaScript and CSS. A compiled SFC is a standard JavaScript (ES) module - which means with proper build setup you can import an SFC like a module:
 
-```js
-import MyComponent from './MyComponent.vue'
+<div class="options-api">
+
+```vue
+
+<script>
+import MyComponent from './MyComponent.vue';
 
 export default {
   components: {
     MyComponent
   }
 }
+</script>
 ```
 
+</div>
+
+<div class="composition-api">
+
+```vue
+<script setup>
+import MyComponent from './MyComponent.vue';
+
+</script>
+```
+
+With `<script setup>`, imported components are automatically made available to the template.
+
+</div>
+
 `<style>` tags inside SFCs are typically injected as native `<style>` tags during development to support hot updates. For production they can be extracted and merged into a single CSS file.
 
 You can play with SFCs and explore how they are compiled in the [Vue SFC Playground](https://sfc.vuejs.org/).

From 83d3a9a5729f4fb009fa644dfcbb22ca10ff2ead Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Fri, 18 Nov 2022 22:44:46 +0200
Subject: [PATCH 2/3] fix

---
 src/guide/scaling-up/sfc.md | 28 ++++------------------------
 1 file changed, 4 insertions(+), 24 deletions(-)

diff --git a/src/guide/scaling-up/sfc.md b/src/guide/scaling-up/sfc.md
index b3405d777c..9647926395 100644
--- a/src/guide/scaling-up/sfc.md
+++ b/src/guide/scaling-up/sfc.md
@@ -35,8 +35,8 @@ export default {
 
 ```vue
 <script setup>
-  import { ref } from 'vue';
-  const greeting = ref('Hello World!');
+  import { ref } from 'vue'
+  const greeting = ref('Hello World!')
 }
 </script>
 
@@ -81,36 +81,16 @@ That said, we do realize there are scenarios where SFCs can feel like overkill.
 
 Vue SFC is a framework-specific file format and must be pre-compiled by [@vue/compiler-sfc](https://github.com/vuejs/core/tree/main/packages/compiler-sfc) into standard JavaScript and CSS. A compiled SFC is a standard JavaScript (ES) module - which means with proper build setup you can import an SFC like a module:
 
-<div class="options-api">
-
-```vue
-
-<script>
-import MyComponent from './MyComponent.vue';
+```js
+import MyComponent from './MyComponent.vue'
 
 export default {
   components: {
     MyComponent
   }
 }
-</script>
 ```
 
-</div>
-
-<div class="composition-api">
-
-```vue
-<script setup>
-import MyComponent from './MyComponent.vue';
-
-</script>
-```
-
-With `<script setup>`, imported components are automatically made available to the template.
-
-</div>
-
 `<style>` tags inside SFCs are typically injected as native `<style>` tags during development to support hot updates. For production they can be extracted and merged into a single CSS file.
 
 You can play with SFCs and explore how they are compiled in the [Vue SFC Playground](https://sfc.vuejs.org/).

From 9cffc32ba7b421ddd950f8cc8617c06aef32f498 Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Wed, 4 Jan 2023 01:26:32 +0000
Subject: [PATCH 3/3] Fix problems with new SFC example

---
 src/guide/scaling-up/sfc.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/guide/scaling-up/sfc.md b/src/guide/scaling-up/sfc.md
index 9647926395..6c2c1ce766 100644
--- a/src/guide/scaling-up/sfc.md
+++ b/src/guide/scaling-up/sfc.md
@@ -35,9 +35,8 @@ export default {
 
 ```vue
 <script setup>
-  import { ref } from 'vue'
-  const greeting = ref('Hello World!')
-}
+import { ref } from 'vue'
+const greeting = ref('Hello World!')
 </script>
 
 <template>