Add note about SFC's everywhere string templates are used

src/guide/class-and-style.md

@@ -136,6 +136,10 @@ app.component('my-component', {
 })
 ```
 
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
+
 Then add some classes when using it:
 
 ```html

src/guide/component-attrs.md

@@ -18,6 +18,10 @@ app.component('date-picker', {
 })
 ```
 
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
+
 In the event we need to define the status of the date-picker component via a `data-status` attribute, it will be applied to the root node (i.e., `div.date-picker`).
 
 ```html

src/guide/component-custom-events.md

@@ -89,6 +89,10 @@ app.component('my-component', {
 })
 ```
 
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
+
 
 ## Multiple `v-model` bindings
 

src/guide/component-props.md

@@ -267,3 +267,7 @@ app.component('blog-post', {
 ```
 
 Again, if you're using string templates, this limitation does not apply.
+
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::

src/guide/component-provide-inject.md

@@ -49,6 +49,10 @@ app.component('todo-list-statistics', {
 })
 ```
 
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
+
 However, this won't work if we try to provide some component instance property here:
 
 ```js

src/guide/component-slots.md

@@ -247,6 +247,10 @@ app.component('todo-list', {
 })
 ```
 
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
+
 We might want to replace the <span v-pre>`{{ item }}`</span> with a `<slot>` to customize it on parent component:
 
 ```html

src/guide/component-template-refs.md

@@ -28,6 +28,10 @@ app.component('base-input', {
 })
 ```
 
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
+
 Also, you can add another `ref` to the component itself and use it to trigger `focusInput` event from the parent component:
 
 ```html

src/guide/custom-directive.md

@@ -212,6 +212,10 @@ app.component('my-component', {
 })
 ```
 
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
+
 Unlike attributes, directives can't be passed to a different element with `v-bind="$attrs"`.
 
 With [fragments](/guide/migration/fragments.html#overview) support, components can potentially have more than one root node. When applied to a multi-root component, directive will be ignored and the warning will be thrown.

src/guide/data-methods.md

@@ -125,3 +125,7 @@ app.component('save-button', {
   `
 })
 ```
+
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::

src/guide/introduction.md

@@ -235,6 +235,10 @@ app.component('todo-item', {
 app.mount(...)
 ```
 
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
+
 Now you can compose it in another component's template:
 
 ```html

src/guide/list.md

@@ -355,3 +355,7 @@ app.mount('#todo-list-example')
 ```
 
 <common-codepen-snippet title="v-for with components" slug="abOaWpz" tab="js,result" :preview="false" />
+
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::

src/guide/render-function.md

@@ -55,6 +55,10 @@ app.component('anchored-heading', {
 })
 ```
 
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
+
 This template doesn't feel great. It's not only verbose, but we're duplicating `<slot></slot>` for every heading level. And when we add the anchor element, we have to again duplicate it in every `v-if/v-else-if` branch.
 
 While templates work great for most components, it's clear that this isn't one of them. So let's try rewriting it with a `render()` function:

src/guide/teleport.md

@@ -51,6 +51,10 @@ app.component('modal-button', {
 })
 ```
 
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
+
 When using this component inside the initial HTML structure, we can see a problem - the modal is being rendered inside the deeply nested `div` and the `position: absolute` of the modal takes the parent relatively positioned `div` as reference.
 
 Teleport provides a clean way to allow us to control under which parent in our DOM we want a piece of HTML to be rendered, without having to resort to global state or splitting this into two components.

src/guide/transitions-enterleave.md

@@ -551,3 +551,7 @@ Vue.createApp(Demo).mount('#demo')
 ```
 
 <common-codepen-snippet title="Transitioning between components" slug="WNwVxZw" tab="html,result" theme="39028" />
+
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::

src/guide/transitions-state.md

@@ -130,6 +130,10 @@ app.mount('#app')
 
 <common-codepen-snippet title="State Transition Components" slug="e9ef8ac7e32e0d0337e03d20949b4d17" tab="js,result" :editable="false" />
 
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
+
 Now we can compose multiple states with these child components. It's exciting- we can use any combination of transition strategies that have been covered on this page, along with those offered by Vue's [built-in transition system](transitions-enterleave.html). Together, there are very few limits to what can be accomplished.
 
 You can see how we could use this for data visualization, for physics effects, for character animations and interactions, the sky's the limit.