From b91c8271e408774ba16036ea0317d816fb7e0b9f Mon Sep 17 00:00:00 2001
From: Aaron Ransley <aaronransley@gmail.com>
Date: Thu, 21 Oct 2021 04:14:40 -0600
Subject: [PATCH] docs: add `<script setup>` usage for layouts (#1305)

---
 .../3.docs/2.directory-structure/6.layouts.md | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/docs/content/3.docs/2.directory-structure/6.layouts.md b/docs/content/3.docs/2.directory-structure/6.layouts.md
index d3cd832fed..90327605f5 100644
--- a/docs/content/3.docs/2.directory-structure/6.layouts.md
+++ b/docs/content/3.docs/2.directory-structure/6.layouts.md
@@ -59,3 +59,45 @@ export default {
 };
 </script>
 ```
+
+### Example: using with `<script setup>`
+
+If you are utilizing Vue `<script setup>` [compile-time syntactic sugar](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup), you can use a secondary `<script>` tag to set `layout` options as needed.
+
+::alert{type=info}
+Learn more about [`<script setup>` and `<script>` tags co-existing](https://v3.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script) in the Vue docs.
+::
+  
+Assuming this directory structure:
+
+```bash
+-| layouts/
+---| custom.vue
+-| pages/
+---| my-page.vue
+```
+
+And this `custom.vue` layout:
+
+```vue
+<template>
+  <div>
+    Some shared layout content:
+    <slot />
+  </div>
+</template>
+```
+
+You can set a page layout in `my-page.vue` — alongside the `<script setup>` tag — like this:
+
+```vue
+<script>
+export default {
+  layout: "custom",
+};
+</script>
+
+<script setup>
+// your setup script
+</script>
+```