<p>When working with Vue SFCs (Single File Components), it can become challenging to view both the <code>&lt;script&gt;</code> and <code>&lt;template&gt;</code> sections when the code gets lengthy. This often results in the inconvenience of constantly scrolling up and down.</p>
<p>To address this, you can use the <code>Vue: Split &lt;script&gt;, &lt;template&gt;, &lt;style&gt; Editors</code> feature provided by the Vue - Official extension in VSCode. This allows you to split the <code>&lt;script&gt;</code> and <code>&lt;template&gt;</code> sections, making it possible to view them side by side on the same screen.</p>
<p><img src="https://media.daily.dev/image/upload/s--4FkFAhdR--/f_auto/v1736612601/ugc/content_e685b5f3-93a7-4169-a180-90e23b0b23a8" alt="Snipaste_2025-01-12_01-13-27"></p>
<p><img src="https://media.daily.dev/image/upload/s--usGRAa4g--/f_auto/v1736613014/ugc/content_ff194576-5242-49f3-b55f-8924267e09ee" alt="Snipaste_2025-01-12_01-30-03"></p>


Hey there! Welcome to The Looop Tech - Vue.js. I’m your host IGC , your friendly neighborhood Vue.js enthusiast! Join me each week as I chat about the latest Vue.js news, share fun tips, and dive into all things Nuxt.js. It’s just me here, so if you’

Vuejs&Nuxtjs

To facilitate easier editing of Vue Single File Components (SFCs) in VSCode, you can use the Vue: Split script, template, style Editors feature from the Vue - Official extension. This enables side-by-side viewing of the <script> and <template> sections, reducing the need to scroll excessively.

Vue Tip: Side-by-Side <script> and <template> Editing in VSCode

<p>You don’t need any extensions for this - just use the built-in Split Editor function (Ctrl/Cmd + ).</p>


<p>This is amazing, thanks for sharing it!</p>


<p>But there are no way to unsplit 😅
Ah, FYI, we have an option (Vue &gt; Split Editors: Icon) to show Split icon in title area of editor; to unsplit/split.</p>
